diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index f38593b..c76091a 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -38,14 +38,23 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
+	  'fixed left-[50%] top-[50%] z-50 w-[90%] grid max-w-lg',
+	  'translate-x-[-50%] translate-y-[-50%]',
+	  'gap-4 border bg-gray-300/80 dark:bg-gray-700/80',
+	  'p-6 shadow-lg duration-200',
+	  'data-[state=open]:animate-in data-[state=closed]:animate-out',
+	  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+	  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+	  'data-[state=closed]:slide-out-to-left-1/2',
+	  'data-[state=closed]:slide-out-to-top-[48%]',
+	  'data-[state=open]:slide-in-from-left-1/2',
+	  'data-[state=open]:slide-in-from-top-[48%] rounded-lg',
+	  className)}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 bg-red-500 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-3 w-3" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/frontend/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
index fe7103d..b6147e4 100644
--- a/frontend/src/components/ui/toaster.tsx
+++ b/frontend/src/components/ui/toaster.tsx
@@ -1,34 +1,30 @@
-"use client"
+'use client'
 
-import { useToast } from "@/components/ui/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
+import { useToast } from '@/components/ui/use-toast'
+import { Toast,
+	 ToastClose,
+	 ToastDescription,
+	 ToastProvider,
+	 ToastTitle,
+	 ToastViewport } from '@/components/ui/toast'
 
-export function Toaster() {
-  const { toasts } = useToast()
+
+export const Toaster = () => {
+  const { toasts } = useToast ()
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
+      {toasts.map (({ id, title, description, action, ...props }) => (
+	  <Toast key={id}
+		 className="bg-gray-300/80 dark:bg-gray-700/80"
+		 {...props}>
+	    <div className="grid gap-1">
+	      {title && <ToastTitle>{title}</ToastTitle>}
+	      {description && <ToastDescription>{description}</ToastDescription>}
+	    </div>
+	    {action}
+	    <ToastClose />
+	  </Toast>))}
       <ToastViewport />
     </ToastProvider>
   )
diff --git a/frontend/src/components/users/InheritDialogue.tsx b/frontend/src/components/users/InheritDialogue.tsx
index c266fb8..26141bf 100644
--- a/frontend/src/components/users/InheritDialogue.tsx
+++ b/frontend/src/components/users/InheritDialogue.tsx
@@ -46,8 +46,8 @@ export default ({ visible, onVisibleChange, setUser }: Props) => {
 
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
-        <DialogContent className="space-y-6">
-          <DialogTitle>ほかのブラウザから引継ぐ</DialogTitle>
+	<DialogContent>
+	  <DialogTitle>ほかのブラウザから引継ぐ</DialogTitle>
 	  <div className="flex gap-2">
 	    <Input placeholder="引継ぎコードを入力"
 		   value={inputCode}
diff --git a/frontend/src/components/users/UserCodeDialogue.tsx b/frontend/src/components/users/UserCodeDialogue.tsx
index 3dddf5a..483b5ea 100644
--- a/frontend/src/components/users/UserCodeDialogue.tsx
+++ b/frontend/src/components/users/UserCodeDialogue.tsx
@@ -2,8 +2,8 @@ import axios from 'axios'
 
 import { Button } from '@/components/ui/button'
 import { Dialog,
-         DialogContent,
-         DialogTitle } from '@/components/ui/dialog'
+	 DialogContent,
+	 DialogTitle } from '@/components/ui/dialog'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL } from '@/config'
 
@@ -37,8 +37,8 @@ export default ({ visible, onVisibleChange, user, setUser }: Props) => {
 
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
-        <DialogContent className="space-y-6">
-          <DialogTitle>引継ぎコード</DialogTitle>
+	<DialogContent>
+	  <DialogTitle>引継ぎコード</DialogTitle>
 	  <div>
 	    <p>あなたの引継ぎコードはこちらです：</p>
 	    <div className="m-2">{user?.inheritanceCode}</div>