diff --git a/apps/dispatch/app/(dispatch)/_components/map/Map.tsx b/apps/dispatch/app/(dispatch)/_components/map/Map.tsx
index 49f43b7b..2552837d 100644
--- a/apps/dispatch/app/(dispatch)/_components/map/Map.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/map/Map.tsx
@@ -1,25 +1,15 @@
 "use client";
-import { useEffect, useRef } from "react";
-
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
-import ToastCard from "../toast/ToastCard";
-import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";
 import { useMapStore } from "_store/mapStore";
 import { MapContainer } from "react-leaflet";
 import { BaseMaps } from "(dispatch)/_components/map/BaseMaps";
 import { ContextMenu } from "(dispatch)/_components/map/ContextMenu";
 
-export default () => {
+export default ({}) => {
 	const { map } = useMapStore();
 
 	return (
-		<MapContainer
-			className="h-full w-full"
-			center={map.center}
-			zoom={map.zoom}
-			scrollWheelZoom={true}
-		>
+		<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
 			<BaseMaps />
 			<ContextMenu />
 		</MapContainer>
diff --git a/apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx b/apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx
new file mode 100644
index 00000000..be01bcf5
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx
@@ -0,0 +1,15 @@
+import { usePannelStore } from "_store/pannelStore";
+
+export const OpenButton = () => {
+	const { setOpen } = usePannelStore();
+	return (
+		<button
+			onClick={() => {
+				setOpen(true);
+			}}
+			className="btn absolute inset-y-0 right-0 z-9999"
+		>
+			Open
+		</button>
+	);
+};
diff --git a/apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx b/apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
new file mode 100644
index 00000000..f68b1f3e
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
@@ -0,0 +1,16 @@
+import { usePannelStore } from "_store/pannelStore";
+import { cn } from "helpers/cn";
+
+export const Pannel = () => {
+	const { isOpen, setOpen } = usePannelStore();
+	return (
+		<div className={cn("flex-1 max-w-[200px] z-9999999")}>
+			<div className="bg-base-100 h-full w-full">
+				<div className="flex justify-between items-center p-4">
+					<h1 className="text-xl font-bold">Pannel</h1>
+					<button onClick={() => setOpen(false)}>Close</button>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/apps/dispatch/app/(dispatch)/page.tsx b/apps/dispatch/app/(dispatch)/page.tsx
index e411885f..41b5b97d 100644
--- a/apps/dispatch/app/(dispatch)/page.tsx
+++ b/apps/dispatch/app/(dispatch)/page.tsx
@@ -1,12 +1,27 @@
 "use client";
 
+import { OpenButton } from "(dispatch)/_components/pannel/OpenButton";
+import { Pannel } from "(dispatch)/_components/pannel/Pannel";
+import { usePannelStore } from "_store/pannelStore";
+import { cn } from "helpers/cn";
 import dynamic from "next/dynamic";
 const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
 
 export default () => {
+	const { isOpen } = usePannelStore();
 	return (
-		<div className="relative flex-1">
-			<Map />
+		<div
+			className={cn(
+				"relative flex-1 flex transition-all duration-500 ease",
+				!isOpen && "w-[calc(100%+200px)]",
+				isOpen && "w-[100%]",
+			)}
+		>
+			{/* <MapToastCard2 /> */}
+			<Map>
+				<OpenButton />
+			</Map>
+			<Pannel />
 		</div>
 	);
 };
diff --git a/apps/dispatch/app/_store/missionsStore.ts b/apps/dispatch/app/_store/missionsStore.ts
new file mode 100644
index 00000000..c5f1586f
--- /dev/null
+++ b/apps/dispatch/app/_store/missionsStore.ts
@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+interface Mission {
+	id: string;
+	name: string;
+}
+
+interface MissionStore {
+	missions: Mission[];
+	setMissions: (missions: Mission[]) => void;
+}
+
+export const missionsStore = create<MissionStore>((set) => ({
+	missions: [],
+	setMissions: (missions) => set({ missions }),
+}));
diff --git a/apps/dispatch/app/_store/pannelStore.ts b/apps/dispatch/app/_store/pannelStore.ts
new file mode 100644
index 00000000..3022b37e
--- /dev/null
+++ b/apps/dispatch/app/_store/pannelStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface PannelStore {
+	isOpen: boolean;
+	setOpen: (isOpen: boolean) => void;
+}
+
+export const usePannelStore = create<PannelStore>((set) => ({
+	isOpen: true,
+	setOpen: (isOpen) => set({ isOpen }),
+}));
diff --git a/apps/dispatch/app/layout.tsx b/apps/dispatch/app/layout.tsx
index 65ee4d64..aba881cd 100644
--- a/apps/dispatch/app/layout.tsx
+++ b/apps/dispatch/app/layout.tsx
@@ -27,7 +27,7 @@ export default async function RootLayout({
 	return (
 		<html lang="de" data-theme="dark">
 			<body
-				className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col`}
+				className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col overflow-hidden`}
 			>
 				<NextAuthSessionProvider session={session}>
 					{children}
diff --git a/apps/dispatch/tailwind.config.ts b/apps/dispatch/tailwind.config.ts
index d8f4ec22..b800ba5d 100644
--- a/apps/dispatch/tailwind.config.ts
+++ b/apps/dispatch/tailwind.config.ts
@@ -13,6 +13,9 @@ export default {
 				background: "var(--background)",
 				foreground: "var(--foreground)",
 			},
+			transitionProperty: {
+				width: "width",
+			},
 		},
 	},
 } satisfies Config;
diff --git a/grafana/grafana.db b/grafana/grafana.db
index 982230a2..8d2cbe89 100644
Binary files a/grafana/grafana.db and b/grafana/grafana.db differ