diff --git a/engine/template/layout/layout.html b/engine/template/layout/layout.html
new file mode 100644
index 0000000..69ab212
--- /dev/null
+++ b/engine/template/layout/layout.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <title>Resposive Layout</title>
+ </head>
+ <body>
+  <div class="w-full flex h-svh max-h-svh">
+   <div class="h-full flex-[0.3]">
+    <!-- Left Sidebar -->
+    <div class="grid h-full place-content-center bg-green-600">
+     <h1 class="text-xl">Left</h1>
+     <h1 class="text-xl">Sidebar</h1>
+    </div>
+   </div>
+
+   <div class="h-full flex-1">
+    <!-- Main Content Area-->
+    <div class="flex h-full flex-col justify-between overflow-y-scroll">
+     <div class="sticky top-0 w-full">
+      <!-- Header -->
+      <div class="bg-orange-500 py-5">
+       <h1 class="text-center text-xl">Header</h1>
+      </div>
+     </div>
+
+     <div>
+      <!-- Content -->
+      <h1 class="text-center text-xl">Content</h1>
+     </div>
+
+     <div class="w-full">
+      <!-- Footer -->
+      <div class="bg-yellow-600 py-12">
+       <h1 class="text-center text-xl">Footer</h1>
+      </div>
+     </div>
+    </div>
+   </div>
+
+   <div class="h-full flex-[0.3]">
+    <!-- Right Sidebar -->
+    <div class="grid h-full place-content-center bg-blue-600">
+     <h1 class="text-xl">Right</h1>
+     <h1 class="text-xl">Sidebar</h1>
+    </div>
+   </div>
+  </div>
+ </body>
+</html>
