diff --git a/apps/docs/src/stories/Dialog.stories.tsx b/apps/docs/src/stories/Dialog.stories.tsx
index 9db2166..7bf6fdc 100644
--- a/apps/docs/src/stories/Dialog.stories.tsx
+++ b/apps/docs/src/stories/Dialog.stories.tsx
@@ -1,8 +1,7 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 
-import Dialog from 'ui/Dialog';
-
 import { useContext } from 'react';
+import { Dialog } from 'ui';
 import DialogProvider, { DialogContext } from 'ui/Dialog/DialogProvider';
 import { DialogOptionType } from 'ui/Dialog/types';
 import useDialog from '../../../../packages/ui/Dialog/useDialog';
@@ -96,7 +95,7 @@ export const DesktopSingleLabel: StoryObj = {
         checked: false,
         size: 'small',
         color: 'white',
-        onChange: checkCheckBox,
+        onChange: (e) => checkCheckBox(e.target.checked),
       },
       type: 'single',
       typeOptions: {
@@ -168,7 +167,7 @@ export const DesktopSingleLong: StoryObj = {
         checked: false,
         size: 'small',
         color: 'white',
-        onChange: checkCheckBox,
+        onChange: (e) => checkCheckBox(e.target.checked),
       },
       type: 'default',
       typeOptions: {
@@ -259,7 +258,7 @@ export const MobileSingleLabel: StoryObj = {
         checked: false,
         size: 'small',
         color: 'white',
-        onChange: checkCheckBox,
+        onChange: (e) => checkCheckBox(e.target.checked),
       },
       type: 'single',
       typeOptions: {
@@ -323,7 +322,7 @@ export const MobileSingleLong: StoryObj = {
         checked: false,
         size: 'small',
         color: 'white',
-        onChange: checkCheckBox,
+        onChange: (e) => checkCheckBox(e.target.checked),
       },
       type: 'default',
       typeOptions: {
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 3038f45..4de6b00 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -55,4 +55,7 @@ a {
     format('woff2');
   font-weight: 700;
   font-style: normal;
-}
\ No newline at end of file
+}
+
+@import url('ui/desktop-variables.css') screen;
+@import url('ui/mobile-variables.css') screen and (max-width: 768px); 
\ No newline at end of file
diff --git a/packages/ui/Dialog/Dialog.tsx b/packages/ui/Dialog/Dialog.tsx
new file mode 100644
index 0000000..8493f24
--- /dev/null
+++ b/packages/ui/Dialog/Dialog.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+
+import * as Dialogs from '@radix-ui/react-dialog';
+import { DialogAnimation, DialogDescription, DialogFooter, DialogTitle } from './components';
+import { dialogContainer, overlay } from './style.css';
+import { DialogProps } from './types';
+
+export const DialogContainer: FC<DialogProps> = ({ isOpen, onClose, children, ...restProps }) => {
+  return (
+    <Dialogs.Root open={isOpen} onOpenChange={onClose}>
+      <Dialogs.Portal>
+        <Dialogs.Overlay className={overlay}>
+          <DialogAnimation>
+            <Dialogs.Content className={dialogContainer} asChild {...restProps}>
+              <div>{children}</div>
+            </Dialogs.Content>
+          </DialogAnimation>
+        </Dialogs.Overlay>
+      </Dialogs.Portal>
+    </Dialogs.Root>
+  );
+};
+
+const Dialog = Object.assign(DialogContainer, {
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Animation: DialogAnimation,
+});
+
+export default Dialog;
diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx
index 992bb1a..4c117f3 100644
--- a/packages/ui/Dialog/DialogComponent.tsx
+++ b/packages/ui/Dialog/DialogComponent.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import Dialog from '.';
 import Button from '../Button';
 import CheckBox from '../CheckBox';
-import { buttonMinSize, buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css';
+import Dialog from './Dialog';
+import { buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css';
 import { DialogValueProps } from './types';
 
 export const DialogComponent = ({
@@ -72,7 +71,7 @@ export const DialogComponent = ({
               rounded="md"
               theme="white"
               onClick={onApprove}
-              className={`${buttonSize} ${buttonMinSize['single']}`}
+              className={`${buttonSize}`}
             >
               {typeOptions?.approveButtonText}
             </Button>
diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx
index 339c752..a1a7ff4 100644
--- a/packages/ui/Dialog/DialogProvider.tsx
+++ b/packages/ui/Dialog/DialogProvider.tsx
@@ -1,54 +1,47 @@
 'use client';
 
-import React, { ChangeEvent, createContext, useCallback, useEffect, useState } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import { DialogComponent } from './DialogComponent';
 import { DialogOptionType, ProviderChildren } from './types';
 
 export const DialogContext = createContext({
   openDialog(option: DialogOptionType) {},
   closeDialog() {},
-  checkCheckBox(e: ChangeEvent<HTMLInputElement>) {},
+  checkCheckBox(isCheckValue:boolean) {},
 });
 
 function DialogProvider({ children }: ProviderChildren) {
   const [dialogOption, setDialogOption] = useState<DialogOptionType | null>(null);
-  const [isMounted, setIsMounted] = useState(false);
-  useEffect(() => {
-    setIsMounted(true);
-  });
-
-  const openDialog = useCallback(
-    (option: DialogOptionType) => {
-      setDialogOption(option);
-    },
-    [dialogOption]
-  );
+  const [isCheck, setIsCheck] = useState(dialogOption?.checkBoxOptions?.checked ?? false);
+
+  const openDialog = (option: DialogOptionType) => {
+    setDialogOption(option);
+  };
 
   const closeDialog = () => {
     setDialogOption(null);
   };
 
-  const checkCheckBox = (e: ChangeEvent<HTMLInputElement>) => {
-    setDialogOption((prevOption) => ({
-      ...prevOption,
-      checkBoxOptions: { ...prevOption?.checkBoxOptions, checked: e.target.checked },
-    }));
+  const checkCheckBox = (isCheckValue:boolean) => {
+    setIsCheck(isCheckValue);
   };
+  
+  useEffect(() => {
+    if (dialogOption?.checkBoxOptions) {
+      const newCheckBoxOption = { ...dialogOption.checkBoxOptions, checked: isCheck };
+      const newDialogOption = { ...dialogOption, checkBoxOptions: newCheckBoxOption };
+      setDialogOption(newDialogOption);
+    }
+  }, [isCheck]);
 
   return (
     <>
-      {isMounted && (
-        <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
-          {children}
-          {dialogOption && (
-            <DialogComponent
-              isOpen={dialogOption !== null}
-              onClose={closeDialog}
-              {...dialogOption}
-            />
-          )}
-        </DialogContext.Provider>
-      )}
+      <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
+        {children}
+        {dialogOption && (
+          <DialogComponent isOpen={dialogOption !== null} onClose={closeDialog} {...dialogOption} />
+        )}
+      </DialogContext.Provider>
     </>
   );
 }
diff --git a/packages/ui/Dialog/components/style.css.ts b/packages/ui/Dialog/components/style.css.ts
index 159203a..ca4f9b1 100644
--- a/packages/ui/Dialog/components/style.css.ts
+++ b/packages/ui/Dialog/components/style.css.ts
@@ -3,13 +3,13 @@ import theme from '../../theme.css';
 
 export const title = style({
   color: `${theme.colors.gray10}`,
-  marginBottom: 'var(-mds-dialog-title-margin-bottom,8px)',
-  fontFamily: 'var(-mds-dialog-title-font-family, SUIT)',
-  fontSize: 'var(-mds-dialog-title-font-size, 18px)',
-  fontStyle: 'var(-mds-dialog-title-font-stlye, normal)',
-  fontWeight: 'var(-mds-dialog-title-font-weight, 600)',
-  lineHeight: 'var(-mds-dialog-title-font-line-height, 28px)',
-  letterSpacing: 'var(-mds-dialog-title-font-letter-spacing, -2%)',
+  marginBottom: 'var(--mds-dialog-title-margin-bottom,8px)',
+  fontFamily: 'var(--mds-dialog-title-font-family,SUIT)',
+  fontSize: 'var(--mds-dialog-title-font-size,18px)',
+  fontStyle: 'var(--mds-dialog-title-font-style,normal)',
+  fontWeight: 'var(--mds-dialog-title-font-weight,600)',
+  lineHeight: 'var(--mds-dialog-title-font-line-height,28px)',
+  letterSpacing: 'var(--mds-dialog-title-font-letter-spacing,-2%)',
 });
 
 export const description = style({
@@ -17,12 +17,12 @@ export const description = style({
   overflowY: 'scroll',
   color: `${theme.colors.gray100}`,
 
-  fontFamily: 'var(-mds-dialog-description-font-family, SUIT)',
-  fontSize: 'var(-mds-dialog-description-font-size, 14px)',
-  fontStyle: 'var(-mds-dialog-description-font-stlye, normal)',
-  fontWeight: 'var(-mds-dialog-description-font-weight, 400)',
-  lineHeight: 'var(-mds-dialog-description-font-line-height, 22px)',
-  letterSpacing: 'var(-mds-dialog-v-font-letter-spacing, -1.5%)',
+  fontFamily: 'var(--mds-dialog-description-font-family, SUIT)',
+  fontSize: 'var(--mds-dialog-description-font-size, 14px)',
+  fontStyle: 'var(--mds-dialog-description-font-style, normal)',
+  fontWeight: 'var(--mds-dialog-description-font-weight, 400)',
+  lineHeight: 'var(--mds-dialog-description-font-line-height, 22px)',
+  letterSpacing: 'var(--mds-dialog-v-font-letter-spacing, -1.5%)',
 
   '::-webkit-scrollbar': {
     width: '4px',
diff --git a/packages/ui/Dialog/index.tsx b/packages/ui/Dialog/index.tsx
index 33f4e36..2e6cb80 100644
--- a/packages/ui/Dialog/index.tsx
+++ b/packages/ui/Dialog/index.tsx
@@ -1,32 +1,4 @@
-import { FC } from 'react';
-
-import * as Dialogs from '@radix-ui/react-dialog';
-import React from 'react';
-import { DialogAnimation, DialogDescription, DialogFooter, DialogTitle } from './components';
-import { dialogContainer, overlay } from './style.css';
-import { DialogProps } from './types';
-
-export const DialogContainer: FC<DialogProps> = ({ isOpen, onClose, children, ...restProps }) => {
-  return (
-    <Dialogs.Root open={isOpen} onOpenChange={onClose}>
-      <Dialogs.Portal>
-        <Dialogs.Overlay className={overlay}>
-          <DialogAnimation>
-            <Dialogs.Content className={dialogContainer} asChild {...restProps}>
-              <div>{children}</div>
-            </Dialogs.Content>
-          </DialogAnimation>
-        </Dialogs.Overlay>
-      </Dialogs.Portal>
-    </Dialogs.Root>
-  );
-};
-
-const Dialog = Object.assign(DialogContainer, {
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Footer: DialogFooter,
-  Animation: DialogAnimation,
-});
-
-export default Dialog;
+export { default as Dialog } from './Dialog';
+export { DialogContext, default as DialogProvider } from './DialogProvider';
+export type { DialogOptionType } from './types';
+export { default as useDialog } from './useDialog';
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 24f6a4a..1355cdd 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,8 +1,9 @@
 export * from "./cssVariables";
 
 // component exports
-// export { default as Button } from "./Button";
-// export { ToastProvider, useToast } from "./Toast";
-// export type { ToastOptionType } from "./Toast";
-// export { default as Test } from "./Test";
-// export { default as Dialog } from "./Dialog";
+export { default as Button } from "./Button";
+export { Dialog, DialogContext, DialogProvider, useDialog } from "./Dialog";
+export type { DialogOptionType } from "./Dialog";
+export { ToastProvider, useToast } from "./Toast";
+export type { ToastOptionType } from "./Toast";
+