diff --git a/pos/app/components/atoms/ReadyBell.tsx b/pos/app/components/atoms/ReadyBell.tsx
index 86e9cff..4c1dc9b 100644
--- a/pos/app/components/atoms/ReadyBell.tsx
+++ b/pos/app/components/atoms/ReadyBell.tsx
@@ -2,6 +2,7 @@ import type { WithId } from "common/lib/typeguard";
 import type { OrderEntity } from "common/models/order";
 import { HiBell, HiBellAlert } from "react-icons/hi2";
 import { cn } from "~/lib/utils";
+import { Button } from "../ui/button";
 
 type props = {
   order: WithId<OrderEntity>;
@@ -11,24 +12,24 @@ type props = {
 export const ReadyBell = ({ order, changeReady }: props) => {
   const isReady = order.readyAt != null;
   return (
-    <button
+    <Button
       type="button"
       onClick={() => changeReady(!isReady)}
-      className="flex w-24 flex-col items-center"
+      className="flex h-16 w-20 flex-col items-cente bg-stone-200 hover:bg-orange-200"
     >
       {isReady ? (
         <HiBellAlert className="h-7 w-7 fill-orange-600" />
       ) : (
-        <HiBell className="h-7 w-7 fill-stone-400" />
+        <HiBell className="h-7 w-7 fill-stone-500" />
       )}
       <span
         className={cn(
           "text-xs",
-          isReady ? "text-orange-600" : "text-stone-400",
+          isReady ? "text-orange-600" : "text-stone-500",
         )}
       >
-        {isReady ? "呼び出し中" : "呼び出しボタン"}
+        {isReady ? "呼び出し中" : "呼び出し"}
       </span>
-    </button>
+    </Button>
   );
 };
diff --git a/pos/app/routes/_header.master.tsx b/pos/app/routes/_header.master.tsx
index 3266da2..ace8179 100644
--- a/pos/app/routes/_header.master.tsx
+++ b/pos/app/routes/_header.master.tsx
@@ -154,7 +154,7 @@ export default function FielsOfMaster() {
                     {isReady && (
                       <div className="mt-5 flex items-center">
                         <LuHourglass className="mr-1 h-5 w-5 stroke-yellow-600" />
-                        <p className="">提供待ち</p>
+                        <p className="text-yellow-700">提供待ち</p>
                       </div>
                     )}
                   </CardContent>
diff --git a/pos/app/routes/_header.serve.tsx b/pos/app/routes/_header.serve.tsx
index 7749ee3..e7772f2 100644
--- a/pos/app/routes/_header.serve.tsx
+++ b/pos/app/routes/_header.serve.tsx
@@ -168,7 +168,7 @@ export default function Serve() {
                       </div>
                     )}
                     <InputComment order={order} addComment={addComment} />
-                    <div className="mt-4 flex justify-between">
+                    <div className="mt-4 flex justify-between items-center">
                       <ReadyBell
                         order={order}
                         changeReady={(ready) => changeReady(order, ready)}
@@ -185,6 +185,7 @@ export default function Serve() {
                             },
                           });
                         }}
+                        className="h-16 w-16 bg-green-700 text-lg hover:bg-green-500 "
                       >
                         提供
                       </Button>