diff --git a/apps/dispatch/app/pilot/page.tsx b/apps/dispatch/app/pilot/page.tsx
index 54f550c2..336d3d2a 100644
--- a/apps/dispatch/app/pilot/page.tsx
+++ b/apps/dispatch/app/pilot/page.tsx
@@ -9,32 +9,43 @@ const Map = dynamic(() => import("../dispatch/_components/map/Map"), {
 	ssr: false,
 });
 
-// ...existing code...
 const DispatchPage = () => {
 	return (
 		<div className="relative flex-1 flex transition-all duration-500 ease w-full">
 			{/* <MapToastCard2 /> */}
-			<div className="flex flex-1 relative">
+			<div className="flex flex-1 relative w-full">
 				<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
 					<Chat />
 					<div className="mt-2">
 						<Report />
 					</div>
 				</div>
-				<div className="absolute top-4 right-0 pr-4 z-999999 items-end">
-					<div className="max-w-120 mb-2">
-						<Mrt />
-					</div>
-					<div className="max-w-130">
-						<Dme />
+				<div className="flex w-2/3 h-full">
+					<Map />
+				</div>
+				<div className="flex w-1/3 h-full">
+					<div className="flex flex-col w-full h-full p-4">
+						<div className="card bg-base-300 shadow-xl">
+							<div className="card-body p-4">
+								<h2 className="card-title mb-2">MRT & DME</h2>
+								<div className="card bg-base-200 shadow-xl mb-4">
+									<div className="card-body w-full h-full flex items-center justify-center">
+										<Mrt />
+									</div>
+								</div>
+								<div className="card bg-base-200 shadow-xl h-1/2 flex">
+									<div className="card-body w-full h-full p-4 mb-0 flex items-center justify-center">
+										<Dme />
+									</div>
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
-				<Map />
 			</div>
 		</div>
 	);
 };
-// ...existing code...
 
 DispatchPage.displayName = "DispatchPage";