diff --git a/src/App.js b/src/App.js
index e0ac6fe..0dd85b9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import BugReport from "./pages/BugReport";
 import SignUp from "./pages/Signup";
 import Shortcuts from "./pages/Shortcuts"
 import Login from "./pages/Login";
+import Templates from "./pages/Templates";
 
 function App() {
   return (
@@ -18,6 +19,7 @@ function App() {
         <Route path="/bug_report" element={<BugReport />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/templates" element={<Templates />} />
       </Routes>
     </Router>
   );
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index d889fed..7ff572a 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -9,7 +9,7 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="py-5 px-6 sm:px-4 flex justify-between items-center">
+      <div className="py-5 px-8 sm:px-4 flex justify-between items-center">
         <div className="flex items-center justify-start">
           <Link to="/">
             <img src={logo} alt="logo" className="me-2 sm:h-[32px]" />
@@ -24,7 +24,10 @@ export default function Navbar() {
             >
               Editor
             </Link>
-            <Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
+            <Link
+              to="/templates"
+              className="ms-4 text-lg font-semibold hover:text-indigo-700"
+            >
               Templates
             </Link>
             <Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
@@ -68,7 +71,10 @@ export default function Navbar() {
           Editor
         </Link>
         <hr />
-        <Link className="hover:bg-zinc-100 block p-3 text-lg font-semibold">
+        <Link
+          to="/templates"
+          className="hover:bg-zinc-100 block p-3 text-lg font-semibold"
+        >
           Templates
         </Link>
         <hr />
diff --git a/src/pages/Templates.jsx b/src/pages/Templates.jsx
new file mode 100644
index 0000000..a0709c6
--- /dev/null
+++ b/src/pages/Templates.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import logo_light from "../assets/logo_light_46.png";
+import { Link } from "react-router-dom";
+
+export default function Templates() {
+  return (
+    <div>
+      <div className="sm:py-3 py-5 px-6 flex justify-between items-center select-none">
+        <div className="flex items-center justify-start">
+          <Link to="/">
+            <img
+              src={logo_light}
+              alt="logo"
+              className="me-2 sm:h-[28px] md:h-[46px]"
+            />
+          </Link>
+          <div className="ms-4 sm:text-sm xl:text-xl font-semibold">
+            Templates
+          </div>
+        </div>
+      </div>
+      <hr className="border-zinc-300" />
+    </div>
+  );
+}