diff --git a/src/components/ui/LogoutButton.tsx b/src/components/ui/LogoutButton.tsx
index 3a3b526..519a17b 100755
--- a/src/components/ui/LogoutButton.tsx
+++ b/src/components/ui/LogoutButton.tsx
@@ -2,15 +2,16 @@
 
 import { logoutAction } from '@/lib/actions/auth';
 import { useActionState } from 'react';
+import { Button } from '@/components/ui/Button';
 
 export default function LogoutButton() {
 	const [, formAction] = useActionState(logoutAction, null);
 	return (
 		<form action={formAction}>
-			<button type="submit" className="flex items-center text-gray-300 hover:text-white">
+			<Button type="submit" variant="ghost" size="sm" className="flex items-center gap-1">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					className="h-6 w-6"
+					className="h-4 w-4"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -22,8 +23,8 @@ export default function LogoutButton() {
 						d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
 					/>
 				</svg>
-				<span className="ml-1 hidden sm:inline">Logout</span>
-			</button>
+				<span className="hidden sm:inline">Logout</span>
+			</Button>
 		</form>
 	);
 }
diff --git a/src/components/ui/RefreshButton.tsx b/src/components/ui/RefreshButton.tsx
index 7fb329c..0e0852b 100755
--- a/src/components/ui/RefreshButton.tsx
+++ b/src/components/ui/RefreshButton.tsx
@@ -1,15 +1,13 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/Button';
 
 export default function RefreshButton() {
 	const router = useRouter();
 	return (
-		<button
-			onClick={() => router.refresh()}
-			className="rounded-md bg-gray-700 px-3 py-1 text-sm hover:bg-gray-600"
-		>
+		<Button variant="ghost" size="sm" onClick={() => router.refresh()}>
 			Refresh
-		</button>
+		</Button>
 	);
 }