diff --git a/templates/base.html b/templates/base.html
index 4a6f8b8..004a739 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -22,10 +22,60 @@
         integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+    <style>
+        @import url("https://rsms.me/inter/inter.css");
+
+        html {
+            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+                "Noto Color Emoji";
+        }
+
+        .gradient {
+            background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
+        }
+
+        button,
+        .gradient2 {
+            background-color: #f39f86;
+            background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
+        }
+
+        /* Browser mockup code
+         * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
+         * Live example: https://updown.io
+         */
+
+        .browser-mockup {
+            border-top: 2em solid rgba(230, 230, 230, 0.7);
+            position: relative;
+            height: 60vh;
+        }
+
+        .browser-mockup:before {
+            display: block;
+            position: absolute;
+            content: "";
+            top: -1.25em;
+            left: 1em;
+            width: 0.5em;
+            height: 0.5em;
+            border-radius: 50%;
+            background-color: #f44;
+            box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+        }
+
+        .browser-mockup>* {
+            display: block;
+        }
+
+        /* Custom code for the demo */
+    </style>
 </head>
 
-<body class="bg-gray-100 font-roboto">
-    <div class="container mx-auto p-4">
+<body class="gradient leading-relaxed tracking-wide flex flex-col">
+    <div class="container mx-auto p-4 min-h-screen h-full">
 
         {% block content %}
 
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 738e42e..10cf343 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -3,7 +3,7 @@
 {% block content %}
 
 <div class="grid min-h-screen w-full lg:grid-cols-[280px_1fr]" data-id="1">
-    <div class="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40" data-id="2">
+    <div class="hidden border-r lg:block" data-id="2">
         <div class="flex h-full max-h-screen flex-col gap-2" data-id="3">
             <div class="flex h-[60px] items-center border-b px-6" data-id="4"><a
                     class="flex items-center gap-2 font-semibold" data-id="5" href="#"><svg
@@ -65,10 +65,10 @@
         </div>
     </div>
     <div class="flex flex-col" data-id="28">
-        <header class="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 px-6 dark:bg-gray-800/40"
-            data-id="29"><a class="lg:hidden" data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24"
-                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                    stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" data-id="31">
+        <header class="flex h-14 lg:h-[60px] items-center gap-4 border-b px-6" data-id="29"><a class="lg:hidden"
+                data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="h-6 w-6" data-id="31">
                     <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
                 </svg><span class="sr-only" data-id="32">Home</span></a>
             <div class="w-full flex-1" data-id="33">
diff --git a/templates/function_editor.html b/templates/function_editor.html
index 9c13dbc..99d29bd 100644
--- a/templates/function_editor.html
+++ b/templates/function_editor.html
@@ -108,7 +108,7 @@
                     </svg>
                 </span>
             </label>
-            <label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="is_public">
+            <label class="mt-px font-light text-gray-200 cursor-pointer select-none" htmlFor="is_public">
                 Public
             </label>
         </div>
@@ -128,7 +128,7 @@
                     </svg>
                 </span>
             </label>
-            <label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="log_request">
+            <label class="mt-px font-light text-gray-200 cursor-pointer select-none" htmlFor="log_request">
                 Log Request
             </label>
         </div>
@@ -148,7 +148,7 @@
                     </svg>
                 </span>
             </label>
-            <label class="mt-px font-light text-gray-700 cursor-pointer select-none" htmlFor="log_response">
+            <label class="mt-px font-light text-gray-200 cursor-pointer select-none" htmlFor="log_response">
                 Log Response
             </label>
         </div>
diff --git a/templates/home.html b/templates/home.html
index 5d1817c..0cc9c70 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -2,36 +2,117 @@
 
 {% block content %}
 
-<header class="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 dark:bg-gray-800/40" data-id="29"><a
-        class="lg:hidden" data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-            stroke-linejoin="round" class="h-6 w-6" data-id="31" data-darkreader-inline-stroke=""
-            style="--darkreader-inline-stroke: currentColor;">
-            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
-        </svg><span class="sr-only" data-id="32">Home</span></a>
-    <div class="w-full flex-1" data-id="33">
-        <h1 class="text-4xl font-bold text-gray-800 mb-2">Function</h1>
-    </div><a
-        class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-full border border-gray-200 w-8 h-8 dark:border-gray-800"
-        data-id="40" type="button" id="radix-:r1u:" aria-haspopup="menu" aria-expanded="false" data-state="closed"
-        href="{{ url_for('dashboard') }}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-            stroke-width="1.5" stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
-            style="--darkreader-inline-stroke: currentColor;">
-            <path stroke-linecap="round" stroke-linejoin="round"
-                d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
-        </svg>
-        <span class="sr-only" data-id="42">Toggle user menu</span></a>
-</header>
-<h5 class="text-xl md:text-2xl lg:text-3xl font-semibold text-gray-700 mb-4">Create your own JavaScript HTTP & Timer
-    handlers</h5>
+<nav id="header" class="w-full z-30 top-0 text-white py-1 lg:py-1">
+    <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-2 lg:py-6">
+        <div class="pl-4 flex items-center">
+            <a class="text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
+                <svg class="h-10 w-10 inline-block fill-current text-yellow-700" xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20">
+                    <path d="M13 8V0L8.11 5.87 3 12h4v8L17 8h-4z"></path>
+                </svg></a>
+        </div>
 
-<p class="text-base md:text-lg text-gray-600 leading-relaxed mb-6">
-    This tool allows you to write and execute JavaScript code for HTTP and timer-based functions. Utilize the on-page
-    code editor to develop and modify your scripts. Once executed, view the responses and logs immediately, providing
-    direct insight into the behavior and output of your handlers.
-</p>
+        <div class="block lg:hidden pr-4">
+            <button id="nav-toggle"
+                class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-green-500 appearance-none focus:outline-none">
+                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <title>Menu</title>
+                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+                </svg>
+            </button>
+        </div>
+
+        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 text-black p-4 lg:p-0 z-20"
+            id="nav-content">
+            <ul class="list-reset lg:flex justify-end flex-1 items-center">
+                <li class="mr-3">
+                    <a class="inline-block py-2 px-4 text-black font-bold no-underline" href="#">Home</a>
+                </li>
+                <li class="mr-3">
+                    <a class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4"
+                        href="#">Documentation</a>
+                </li>
+                <li class="mr-3">
+                    <a class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4"
+                        href="#">About</a>
+                </li>
+            </ul>
+            <a href="{{ url_for('dashboard') }}"
+                class="mx-auto lg:mx-0 hover:underline gradient2 text-gray-800 font-extrabold rounded my-6 py-4 px-8 shadow-lg cursor-pointer">Login</a>
+        </div>
+    </div>
+</nav>
+
+<div class="text-center px-3 lg:px-0">
+    <h1 class="my-4 text-2xl md:text-3xl lg:text-5xl font-black leading-tight">Build HTTP and Timer Functions with Ease
+
+    </h1>
+    <p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl">No DevOps, Git, or command-line - just your
+        browser.
+    </p>
+    <p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8">
+        Focus on coding; we handle the deployment seamlessly.
+    </p>
+
+    <a class="mx-auto lg:mx-0 hover:underline gradient2 text-gray-800 font-extrabold rounded my-6 py-4 px-8 shadow-lg cursor-pointer"
+        href="/signup">
+        Sign Up
+    </a>
+    <a href="#"
+        class="inline-block mx-auto lg:mx-0 hover:underline bg-transparent text-gray-600 font-extrabold my-2 md:my-6 py-2 lg:py-4 px-8">
+        View documentation</a>
+</div>
 
 
 {{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info) }}
 
+<section class="py-8">
+    <div class="container mx-auto flex flex-wrap pt-4 pb-12">
+        <h2 class="w-full my-2 text-5xl font-black leading-tight text-center text-gray-800">Features</h2>
+        <div class="w-full mb-4">
+            <div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
+        </div>
+
+        <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+            <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
+                <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+
+                    <div class="w-full font-bold text-xl text-gray-800 px-6 mt-6">HTTP Functions</div>
+                    <p class="text-gray-600 text-base px-6 mb-5">Seamlessly create and deploy HTTP functions that can
+                        serve as robust API endpoints. Access request methods, headers, form data, and JSON, while
+                        easily returning responses in various formats
+                    </p>
+                </a>
+            </div>
+
+        </div>
+
+        <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+            <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
+                <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+
+                    <div class="w-full font-bold text-xl text-gray-800 px-6 mt-6">Timer Functions</div>
+                    <p class="text-gray-600 text-base px-6 mb-5">Automate tasks with precision using timer functions.
+                        Schedule recurring jobs or one-time events without the need for external cron services. Manage
+                        timing with ease, whether for regular data processing, periodic updates, or timed notifications
+                    </p>
+                </a>
+            </div>
+
+        </div>
+
+        <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+            <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
+                <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+
+                    <div class="w-full font-bold text-xl text-gray-800 px-6 mt-6">Persistent JSON Storage</div>
+                    <p class=" text-gray-600 text-base px-6 mb-5">Leverage built-in mutable JSON storage, ensuring your
+                        data persists seamlessly within the environment. Store and modify your data in real-time, with
+                        the flexibility to access and update your stored information effortlessly</p>
+                </a>
+            </div>
+
+        </div>
+    </div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 4787719..5f09f13 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,8 +2,8 @@
 
 {% block content %}
 
-<div class="w-full h-screen flex items-center justify-center bg-gray-100" data-id="1">
-    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4" data-id="2"
+<div class="w-full h-screen flex items-center justify-center" data-id="1">
+    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
         data-v0-t="card">
         <div class="flex flex-col space-y-1.5 p-6" data-id="3">
             <h1 class="text-3xl font-bold text-center" data-id="4">
diff --git a/templates/signup.html b/templates/signup.html
index 319c069..1de5b6a 100644
--- a/templates/signup.html
+++ b/templates/signup.html
@@ -2,8 +2,8 @@
 
 {% block content %}
 
-<div class="w-full h-screen flex items-center justify-center bg-gray-100" data-id="1">
-    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4" data-id="2"
+<div class="w-full h-screen flex items-center justify-center" data-id="1">
+    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
         data-v0-t="card">
         <div class="flex flex-col space-y-1.5 p-6" data-id="3">
             <h1 class="text-3xl font-bold text-center" data-id="4">
