diff --git a/package.json b/package.json
index 54e1926..ed8ddce 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev --port 3003",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/public/rh-logo-2024.svg b/public/rh-logo-2024.svg
new file mode 100644
index 0000000..dcd8a20
--- /dev/null
+++ b/public/rh-logo-2024.svg
@@ -0,0 +1,37 @@
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 219 249"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M104.586 8.32431C107.627 6.55857 111.373 6.55856 114.414 8.32431L207.086 62.1319C210.127 63.8977 212 67.1609 212 70.6924V178.308C212 181.839 210.127 185.102 207.086 186.868L114.414 240.676C111.373 242.441 107.627 242.441 104.586 240.676L11.9145 186.868C8.87339 185.102 7 181.839 7 178.308V70.6924C7 67.1609 8.87339 63.8977 11.9145 62.1319L104.586 8.32431Z"
+      stroke="currentColor"
+      stroke-width="13"></path>
+    <path
+      d="M108.5 13.5C154.5 52.3333 218.9 151.3 108.5 236.5"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"></path>
+    <path
+      d="M12.5 68L105.5 233"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"></path>
+    <path
+      d="M12 183L105 18"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"></path>
+    <style>
+    svg {
+        color: black;
+    }
+    @media (prefers-color-scheme: dark) {
+        svg {
+        color: white;
+        }
+    }
+    </style>
+  </svg>
\ No newline at end of file
diff --git a/public/tinte.png b/public/tinte.png
new file mode 100644
index 0000000..04c48ec
Binary files /dev/null and b/public/tinte.png differ
diff --git a/src/app/header.tsx b/src/app/header.tsx
index 4a30bcb..2cf8aa6 100644
--- a/src/app/header.tsx
+++ b/src/app/header.tsx
@@ -14,8 +14,10 @@ export default function Header() {
       <div className="container flex h-14 max-w-screen-2xl items-center">
         <div className="mr-4 hidden md:flex">
           <a className="mr-6 flex items-center space-x-2" href="/">
-            <img src="/rh-logo.svg" className="w-7 h-7" />
-            <span className="hidden font-bold sm:inline-block">railly.dev</span>
+            <img src="/rh-logo-2024.svg" className="w-7 h-7" />
+            <span className="hidden font-semibold sm:inline-block">
+              railly.dev
+            </span>
           </a>
           <nav className="flex items-center gap-4 text-sm lg:gap-6">
             <Link
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8b10466..835d388 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -39,7 +39,7 @@ export default function ThemesPage() {
         {/* Hero Section */}
         <ThemeWrapper
           defaultTheme="zinc"
-          className="relative flex flex-col items-center justify-center !text-center pt-8 pb-16"
+          className="relative flex flex-col items-center justify-center pt-4 md:pt-0 !text-center pb-16"
         >
           <PageHeader className="!text-center flex flex-col gap-2 py-2">
             <PageHeaderHeading>
@@ -48,7 +48,7 @@ export default function ThemesPage() {
             <PageHeaderDescription className="w-full !text-center flex justify-center">
               Choose colors, adjust themes, and copy the generated CSS.
             </PageHeaderDescription>
-            <div className="flex flex-col items-center w-full justify-center mt-8 gap-6">
+            <div className="flex flex-col items-center w-full justify-center mt-3 gap-6">
               <div className="flex w-full max-w-sm gap-4">
                 <Link
                   href="https://github.com/Railly/shadcn-ui-customizer"
diff --git a/src/components/email-subscribe.tsx b/src/components/email-subscribe.tsx
index e7df4a8..8ca441b 100644
--- a/src/components/email-subscribe.tsx
+++ b/src/components/email-subscribe.tsx
@@ -38,11 +38,30 @@ const EmailSubscribe = () => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col w-full max-w-sm gap-6"
+      className="flex flex-col w-full max-w-2xl gap-6"
     >
-      <legend className="font-mono border border-amber-400 dark:border-yellow-400 border-dashed px-2 py-1.5 rounded-lg text-xs bg-accent text-accent-foreground">
-        A PG Database Assistant is comming... Stay tuned
-      </legend>
+      <div className="flex flex-col items-center md:flex-row gap-4 border border-amber-400 dark:border-yellow-400 border-dashed px-2 py-1.5 rounded-lg">
+        <a href="https://tinte.railly.dev" target="_blank" rel="noreferrer">
+          <img
+            src="/tinte.png"
+            alt="tinte screenshot"
+            height={606}
+            width={318}
+          />
+        </a>
+        <div className="flex flex-col gap-4">
+          <legend className="font-mono font-bold text-accent-foreground">
+            Generate your own VS Code Themes
+          </legend>
+          <ol className="list-decimal flex flex-col gap-2 text-left list-inside text-xs">
+            <li>
+              Provide a 13 color palette or <b> generate one with AI</b>
+            </li>
+            <li>Adjust the theme settings to your liking</li>
+            <li>Download the vsix file and install it in VS Code</li>
+          </ol>
+        </div>
+      </div>
       <div className="flex w-full gap-4">
         <Input
           type="email"