diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 66cd29e4..8ba546a6 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -1,33 +1,4 @@
- <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      border: 1px solid #ccc;
-      cursor: crosshair;
-    }
-    .controls {
-      margin: 10px;
-    }
-    .controls button {
-      margin-right: 5px;
-    }
-    .log {
-      margin: 10px;
-      width: 800px;
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: #f9f9f9;
-    }
-  </style>
-
+ 
   <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
@@ -38,7 +9,7 @@
   </div>
 
   <script type="ts">
-    
+
     const canvas = document.getElementById('cadCanvas') as HTMLCanvasElement;
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
     const lineLog = document.getElementById('line-log') as HTMLUListElement;
diff --git a/src/layouts/cadLayout.astro b/src/layouts/cadLayout.astro
new file mode 100644
index 00000000..e897e2be
--- /dev/null
+++ b/src/layouts/cadLayout.astro
@@ -0,0 +1,83 @@
+---
+import "../style/global.css";
+import "../../svelte-dialogs.config"
+import Header from "#header/Header.astro";
+import Footer from "#footer/Footer.astro";
+import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
+import SidebarRight from "#sidebarRight/SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple CAD Program - Thick Black Lines</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+</head>
+
+<body>
+		<container class="w-full max-w-[1920px]">
+		
+		<Header />
+
+		<main
+			class="w-full p-0 grid
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
+			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
+		">
+
+		<SidebarLeft />
+		
+		<article class="box grow rounded-tl-none">
+		<slot />
+		</article>
+		
+		<SidebarRight />
+
+		</main>
+	
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index 3c26193d..a5b7607d 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -6,9 +6,9 @@ import CAD from "#components/CAD.svelte";
 ---
 
 
-<Layout title="Welcher Energieausweis">
+<Layout title="CAD">
 
-<h1 class="text-3xl">Welcher Energieausweis?</h1>
+<h1 class="text-3xl">CAD</h1>
 
 <div class="mt-12 m-auto w-[95%] relative">
 <CAD client:load />
