diff --git a/components/common/Toast/index.module.scss b/components/common/Toast/index.module.scss
index dc9c36c6..b5bcf620 100644
--- a/components/common/Toast/index.module.scss
+++ b/components/common/Toast/index.module.scss
@@ -1,4 +1,4 @@
-.Toast {
+.toast {
   background: var(--dialog-bg);
   border-radius: $card-corner;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
@@ -28,7 +28,7 @@
     animation: slideRight 100ms ease-out;
   }
 
-  .Header {
+  .header {
     align-items: center;
     display: flex;
     justify-content: space-between;
diff --git a/components/common/Toast/index.tsx b/components/common/Toast/index.tsx
index ed317d70..7ff95d40 100644
--- a/components/common/Toast/index.tsx
+++ b/components/common/Toast/index.tsx
@@ -22,13 +22,13 @@ const Toast = ({
   const { onCloseClick, ...toastProps } = props
 
   const classes = classNames(props.className, {
-    Toast: true,
+    [styles.toast]: true,
   })
 
   return (
     <ToastPrimitive.Root {...toastProps} className={classes}>
       {title && (
-        <div className="Header">
+        <div className={styles.header}>
           <ToastPrimitive.Title asChild>
             <h3>{title}</h3>
           </ToastPrimitive.Title>