diff --git a/src/components/ui/toast/index.stories.tsx b/src/components/ui/toast/index.stories.tsx
index 2721480f..8a0a6038 100644
--- a/src/components/ui/toast/index.stories.tsx
+++ b/src/components/ui/toast/index.stories.tsx
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    type: 'info',
+    type: 'success',
     children: '모임 신청 완료! Share the fun',
   },
   parameters: {
@@ -43,13 +43,13 @@ export const Default: Story = {
           </thead>
           <tbody>
             <tr className='border-b'>
-              <td className='px-4 py-4'>info</td>
+              <td className='px-4 py-4'>success</td>
               <td className='px-4 py-4'>
-                <Toast type='info'>모임 신청 완료! Share the fun</Toast>
+                <Toast type='success'>모임 신청 완료! Share the fun</Toast>
               </td>
               <td className='px-4 py-4'>
                 <code className='rounded bg-gray-100 px-2 py-1 text-sm'>
-                  {`<Toast type="info">모임 신청 완료! Share the fun</Toast>`}
+                  {`<Toast type="success">모임 신청 완료! Share the fun</Toast>`}
                 </code>
               </td>
             </tr>
@@ -62,7 +62,7 @@ export const Default: Story = {
 
 export const Code_Snippet: Story = {
   args: {
-    type: 'info',
+    type: 'success',
     children: '모임 신청 완료! Share the fun',
   },
   parameters: {
@@ -79,7 +79,7 @@ export const Code_Snippet: Story = {
             className='rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600'
             onClick={() => {
               console.log('Button clicked');
-              run(<Toast type='info'>모임 신청 완료! Share the fun</Toast>);
+              run(<Toast type='success'>모임 신청 완료! Share the fun</Toast>);
               console.log('Toast run called');
             }}
           >
@@ -99,7 +99,7 @@ const HomePage = () => {
   const { run } = useToast();
   return (
     <div>
-      <button onClick={() => run(<Toast type='info'>모임 신청 완료! Share the fun</Toast>)}>
+      <button onClick={() => run(<Toast type='success'>모임 신청 완료! Share the fun</Toast>)}>
         토스트 실행
       </button>
     </div>
diff --git a/src/components/ui/toast/index.test.tsx b/src/components/ui/toast/index.test.tsx
index 0842a8b7..1c2e26f7 100644
--- a/src/components/ui/toast/index.test.tsx
+++ b/src/components/ui/toast/index.test.tsx
@@ -39,12 +39,12 @@ describe('Toast', () => {
     render(<Toast>모임 신청 완료!</Toast>);
     const toast = screen.getByText('모임 신청 완료!');
 
-    expect(toast).toHaveClass('text-mono-white bg-[#0D2D3A]/50');
+    expect(toast).toHaveClass('text-mono-white bg-[#0D2D3A]/80');
   });
 
   test('option을 전달하지 않고 toast 실행 시 toast가 popup 되며 3초 후에 사라진다.', async () => {
     const TestToast = () => {
-      return <Toast type='info'>모임 신청 완료! Share the fun</Toast>;
+      return <Toast type='success'>모임 신청 완료! Share the fun</Toast>;
     };
 
     renderToast({ content: <TestToast /> });
@@ -69,7 +69,7 @@ describe('Toast', () => {
 
   test('duration을 5000으로 지정하면 toast가 popup 되며 5초 후에 사라진다.', async () => {
     const TestToast = () => {
-      return <Toast type='info'>모임 신청 완료! Share the fun</Toast>;
+      return <Toast type='success'>모임 신청 완료! Share the fun</Toast>;
     };
 
     renderToast({ content: <TestToast />, options: { duration: 5000 } });
@@ -94,7 +94,7 @@ describe('Toast', () => {
 
   test('toast run 을 연속으로 실행하면 toast가 여러개 popup 된다.', async () => {
     const TestToast = () => {
-      return <Toast type='info'>모임 신청 완료! Share the fun</Toast>;
+      return <Toast type='success'>모임 신청 완료! Share the fun</Toast>;
     };
 
     renderToast({ content: <TestToast />, options: { duration: 5000 } });
diff --git a/src/components/ui/toast/index.tsx b/src/components/ui/toast/index.tsx
index b8b90a07..b7b523ac 100644
--- a/src/components/ui/toast/index.tsx
+++ b/src/components/ui/toast/index.tsx
@@ -7,8 +7,8 @@ const toastVariants = cva(
   {
     variants: {
       type: {
-        info: 'text-mono-white bg-[#0D2D3A]/50',
-        // success: 'text-mono-white bg-green-600',
+        info: 'text-mono-white bg-[#0D2D3A]/80',
+        success: 'text-mono-white bg-[#0D2D3A]/80',
         // error: 'text-mono-white bg-red-600',
         // warning: 'text-mono-white bg-yellow-600',
       },
@@ -20,8 +20,8 @@ const toastVariants = cva(
 );
 
 const toastIcons = {
-  info: 'congratulate',
-  // success: 'check-circle',
+  info: '',
+  success: 'congratulate',
   // error: 'alert-circle',
   // warning: 'alert-triangle',
 } as const;
@@ -34,7 +34,7 @@ interface Props {
 export const Toast = ({ type = 'info', children }: Props) => {
   return (
     <div className={toastVariants({ type })}>
-      <Icon id={toastIcons[type]} className='size-6' />
+      {toastIcons[type] && <Icon id={toastIcons[type]} className='size-6' />}
       {children}
     </div>
   );