diff --git a/controllers/note-create.php b/controllers/note-create.php
new file mode 100644
index 0000000..f869b9a
--- /dev/null
+++ b/controllers/note-create.php
@@ -0,0 +1,6 @@
+<?php
+$heading = 'Create Note';
+if($_SERVER['REQUEST_METHOD'] === 'POST'){
+    dd($_POST);
+}
+require 'views/note-create.view.php';
\ No newline at end of file
diff --git a/router.php b/router.php
index 2fec23e..e06ba4c 100644
--- a/router.php
+++ b/router.php
@@ -1,16 +1,6 @@
 <?php
 $uri = parse_url($_SERVER['REQUEST_URI'])['path'];
-
-$routes = [
-    '/' => 'controllers/index.php',
-    '/about' => 'controllers/about.php',
-    '/contact' => 'controllers/contact.php',
-    '/learn' => 'controllers/learn.php',
-    '/mathe' => 'controllers/mathe.php',
-    '/note' => 'controllers/note.php',
-    '/notes' => 'controllers/notes.php',
-    '/addition' => 'controllers/addition.php'
-];
+$routes = require ('routes.php');
 
 function routeToController($uri, $routes) {
     if (array_key_exists($uri, $routes)) {
diff --git a/routes.php b/routes.php
new file mode 100644
index 0000000..45a5de4
--- /dev/null
+++ b/routes.php
@@ -0,0 +1,12 @@
+<?php
+return[
+    '/' => 'controllers/index.php',
+    '/about' => 'controllers/about.php',
+    '/contact' => 'controllers/contact.php',
+    '/learn' => 'controllers/learn.php',
+    '/mathe' => 'controllers/mathe.php',
+    '/note' => 'controllers/note.php',
+    '/notes' => 'controllers/notes.php',
+    '/addition' => 'controllers/addition.php',
+    '/notes/create' => 'controllers/note-create.php'
+];
\ No newline at end of file
diff --git a/views/note-create.view.php b/views/note-create.view.php
new file mode 100644
index 0000000..075abf7
--- /dev/null
+++ b/views/note-create.view.php
@@ -0,0 +1,29 @@
+<?php require('partials/head.php') ?>
+<?php require('partials/nav.php') ?>
+<?php require('partials/banner.php') ?>
+<main>
+  <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+    <div>
+      <div class="md:grid md:grid-cols-3 md:gap-6">
+        <div class="mt-5 md:col-span-2 md:mt-0">
+          <form method="POST">
+            <div class="shadow sm:overflow-hidden sm:rounded-md">
+              <div class="space-y-6 bg-white px-4 py-5 sm:p-6">
+
+                <div>
+                  <label for="body" class="block text-sm font-medium text-gray-700">Body</label>
+                  <div class="mt-1">
+                    <textarea id="body" name="body" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
+                  </div>
+                </div>
+              </div>
+              <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+                <button type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+</main>
+<?php require('partials/footer.php') ?>
\ No newline at end of file
diff --git a/views/notes.view.php b/views/notes.view.php
index 42cce6e..13ac33f 100644
--- a/views/notes.view.php
+++ b/views/notes.view.php
@@ -3,6 +3,7 @@
 <?php require ('partials/banner.php') ?>
   <main>
     <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+      <ul>
       <?php foreach ($notes as $note) : ?>
         <li>
           <a href="/note?id=<?= $note['id'] ?>" class="text-blue-500 hover:underline">
@@ -10,6 +11,10 @@
           </a>
         </li>
       <?php endforeach; ?>
+      </ul>
+      <p class="mt-6">
+        <a href="/notes/create" class="text-blue-500 hover:underline">Create Note</a>
+      </p>
     </div>
   </main>
 <?php require ('partials/footer.php') ?>
\ No newline at end of file
diff --git a/views/partials/head.php b/views/partials/head.php
index 1f4ad04..3692e6b 100644
--- a/views/partials/head.php
+++ b/views/partials/head.php
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
     <title>Demo</title>
 </head>
 <body class="h-full">