diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..d9a0984
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+#SIGNING_KEY=
+
+#APP_TITLE="TempestPHP"
+#APP_LOGO="/img/TempestPHP-256.png"
+APP_LOGO="/img/TempestPHP-1024.png"
diff --git a/.gitignore b/.gitignore
index dd5c56e..3978cf3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ vendor/
 log/
 *.local.config.php
 *.dev.config.php
+composer.lock
diff --git a/app/home.view.php b/app/home.view.php
index bfa3931..e9b24eb 100644
--- a/app/home.view.php
+++ b/app/home.view.php
@@ -1,27 +1,28 @@
-<x-base :title="Tempest\env('APP_TITLE', default: 'Tempest Scaffold')">
-  <main class="bg-sky-100/20 w-screen h-screen overflow-hidden">
+<x-base :title="Tempest\env('APP_TITLE', default: 'Tempest Scaffold')" :logo="Tempest\env('APP_LOGO')">
+  <main class="bg-[#F5F9FC] w-screen h-screen overflow-hidden">
     <div class="isolate relative flex flex-col justify-center items-center px-6 lg:px-8 h-full">
       <!-- Background gradient -->
       <div class="-top-40 sm:-top-80 -z-10 absolute inset-x-0 blur-3xl overflow-hidden transform-gpu pointer-events-none" aria-hidden="true">
         <div
-            class="left-[calc(50%-11rem)] sm:left-[calc(50%-30rem)] relative bg-gradient-to-tr from-[#7fbdea] to-[#9980fc] opacity-20 w-[36.125rem] sm:w-[72.1875rem] aspect-[1155/678] rotate-[30deg] -translate-x-1/2"
+            class="left-[calc(50%-11rem)] sm:left-[calc(50%-30rem)] relative bg-gradient-to-tr from-[#00A8F0] to-[#80F0F0] opacity-20 w-[36.125rem] sm:w-[72.1875rem] aspect-[1155/678] rotate-[30deg] -translate-x-1/2"
             style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
         ></div>
       </div>
       <!-- Bottom gradient -->
       <div class="top-[calc(100%-13rem)] sm:top-[calc(100%-30rem)] -z-10 absolute inset-x-0 blur-3xl overflow-hidden transform-gpu pointer-events-none" aria-hidden="true">
-        <div class="left-[calc(50%+3rem)] sm:left-[calc(50%+36rem)] relative bg-gradient-to-tr from-[#7fbdea] to-[#9980fc] opacity-20 w-[36.125rem] sm:w-[72.1875rem] aspect-[1155/678] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
+        <div class="left-[calc(50%+3rem)] sm:left-[calc(50%+36rem)] relative bg-gradient-to-tr from-[#0078D0] to-[#80F0F0] opacity-20 w-[36.125rem] sm:w-[72.1875rem] aspect-[1155/678] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
       </div>
       <!-- Hero section -->
       <div class="mx-auto py-32 sm:py-48 lg:py-56 max-w-2xl">
         <div class="text-center">
+          <img :if="$logo" src="{{ $logo }}" alt="{{ $title }}" class="mx-auto mb-0 w-48 sm:w-56 h-48 sm:h-56 object-contain">
           <!-- Text -->
-          <h1 class="font-semibold text-gray-800 text-5xl sm:text-7xl text-balance tracking-tight">Tempest</h1>
-          <p class="mt-8 font-medium text-gray-500 text-lg sm:text-xl/8 text-pretty">The PHP framework that gets out of your way.</p>
+          <h1 class="font-semibold text-[#002A60] text-5xl sm:text-7xl text-balance tracking-tight">Tempest</h1>
+          <p class="mt-8 font-medium text-[#54708F] text-lg sm:text-xl/8 text-pretty">The PHP framework that gets out of your way.</p>
           <!-- CTAs -->
           <div class="flex sm:flex-row flex-col justify-center items-center gap-x-6 gap-y-4 mt-10">
-            <a href="https://tempestphp.com/docs" target="_blank" class="bg-sky-600 hover:bg-sky-500 shadow-sm px-3.5 py-2.5 rounded-md focus-visible:outline-2 focus-visible:outline-sky-600 focus-visible:outline-offset-2 font-semibold text-white text-sm">Documentation</a>
-            <a href="https://tempestphp.com/discord" class="focus-visible:outline-none font-semibold text-gray-900 text-sm/6 focus-visible:decoration-gray-300 focus-visible:underline focus-visible:underline-offset-4">
+            <a href="https://tempestphp.com/docs" target="_blank" class="bg-[#0078D0] hover:bg-[#00A8F0] shadow-sm px-3.5 py-2.5 rounded-md focus-visible:outline-2 focus-visible:outline-[#0078D0] focus-visible:outline-offset-2 font-semibold text-white text-sm transition-colors">Documentation</a>
+            <a href="https://tempestphp.com/discord" class="focus-visible:outline-none font-semibold text-[#002A60] text-sm/6 focus-visible:decoration-[#0078D0] focus-visible:underline focus-visible:underline-offset-4 hover:text-[#0078D0] transition-colors">
               Join our Discord
               <span aria-hidden="true">→</span>
             </a>
diff --git a/public/img/TempestPHP-1024.png b/public/img/TempestPHP-1024.png
new file mode 100644
index 0000000..89dc3e9
Binary files /dev/null and b/public/img/TempestPHP-1024.png differ
diff --git a/public/img/TempestPHP-256.png b/public/img/TempestPHP-256.png
new file mode 100644
index 0000000..30bb23a
Binary files /dev/null and b/public/img/TempestPHP-256.png differ