diff --git a/client/components/newDocumentForm.jsx b/client/components/newDocumentForm.jsx
index 94c323e4f..cd437a68d 100644
--- a/client/components/newDocumentForm.jsx
+++ b/client/components/newDocumentForm.jsx
@@ -1,11 +1,35 @@
 import React from "react";
-
+import './newDocumentForm.less';
 
 export function NewDocumentForm() {
 
-  return (
-    <div>
-      Hello
+  return <>
+    <nav>
+      <button>templates</button>
+      <button>import</button>
+      <button>clone</button>
+    </nav>
+    <div className="content">
+<div className="templates">
+      <div className="template a4"><div className="image"></div><span>A4</span></div>
+      <div className="template a5"><div className="image"></div><span>A5</span></div>
+      <div className="template a4"><div className="image"></div><span>A4</span></div>
+      <div className="template a5"><div className="image"></div><span>A5</span></div>
+      <div className="template a4"><div className="image"></div><span>A4</span></div>
+      <div className="template a5"><div className="image"></div><span>A5</span></div>
     </div>
-  );
+    <div className="metadataPanel">
+      <div className="fieldGroup">
+        <label>title</label>
+						<input type='text'
+							defaultValue=''
+							placeholder='title'
+							className='title'
+							onChange={(e)=>{}} />
+      </div>
+    </div>
+    </div>
+    
+  </>
+
 }
diff --git a/client/components/newDocumentForm.less b/client/components/newDocumentForm.less
new file mode 100644
index 000000000..9ac8200fe
--- /dev/null
+++ b/client/components/newDocumentForm.less
@@ -0,0 +1,80 @@
+.newBrewPopup {
+	position: relative;
+	background: #282828;
+	border: unset;
+	display: grid;
+	grid-template-rows: 50px 1fr;
+	padding: 0;
+	color: #ddd;
+	border-radius: 10px;
+	box-shadow: 1px 0 14px black;
+
+	nav {
+		padding: 10px;
+		padding-right:100px;
+		padding-left:50px;
+		background: #333;
+	}
+
+	.content {
+		display: grid;
+		grid-template-columns: 1fr 200px;
+		height:100% !important;
+
+		.templates {
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			padding: 50px;
+			gap:10px;
+			box-shadow: inset 0 0 20px rgba(0,0,0,0.62);
+
+			.template {
+				width: 100px;
+				height: 150px;
+				display: flex;
+				flex-direction: column;
+				text-align:center;
+				gap:10px;
+
+				.image {
+					width: 100px;
+					height: 100px;
+					background-color:#444;
+				}
+
+			}
+
+		}
+
+		.metadataPanel {
+			height:100%;
+			background-color: #555;
+			padding:25px;
+			
+			.fieldGroup {
+				display:grid;
+				grid-template-columns:50px 1fr;
+			}
+		}
+	}
+	.dismiss {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		width:50px;
+		height:50px;
+		z-index:10;
+		display:grid;
+		place-items:center;
+	}
+	
+	input {
+		color:white;
+		background-color:#333;
+		border-radius:5px;
+		outline:1px solid #777;
+		border:unset;
+		box-shadow: inset 0 0 5px rgba(0,0,0,0.62);
+		width:100%;
+	}
+}