diff --git a/pkgs/@scope/better-auth/mod.server.ts b/pkgs/@scope/better-auth/mod.server.ts
index b859ba3..3ffb9c1 100644
--- a/pkgs/@scope/better-auth/mod.server.ts
+++ b/pkgs/@scope/better-auth/mod.server.ts
@@ -2,6 +2,7 @@ import { passkey } from "@better-auth/passkey";
 import { useDatabaseForBetterAuth } from "@scope/database/server";
 import { betterAuth } from "better-auth";
 import { admin, magicLink } from "better-auth/plugins";
+import { sendWelcomeEmail } from "./templates.tsx";
 
 export const serverAuth = betterAuth({
   database: useDatabaseForBetterAuth(),
@@ -13,9 +14,8 @@ export const serverAuth = betterAuth({
   plugins: [
     admin(),
     magicLink({
-      sendMagicLink({ email, token, url }) {
-        // await sendWelcomeEmail();
-        console.log("sendMagicLink", email, token, url);
+      async sendMagicLink({ email, url }) {
+        await sendWelcomeEmail({ data: { email, templateData: { url } } });
       },
     }),
     passkey(),
diff --git a/pkgs/@scope/better-auth/templates.tsx b/pkgs/@scope/better-auth/templates.tsx
index 988a0aa..0e64acc 100644
--- a/pkgs/@scope/better-auth/templates.tsx
+++ b/pkgs/@scope/better-auth/templates.tsx
@@ -1,22 +1,41 @@
 import { createServerFn } from "@tanstack/solid-start";
 import { createTransport } from "nodemailer";
 import { renderToStringAsync } from "solid-js/web";
+import * as v from "valibot";
+import { env } from "../../../src/data.functions/env.service.ts";
 
-const WelcomeEmailTemplate = () => {
-  return <p class="bg-red">this is some JSX email template</p>;
+const WelcomeEmailTemplate = (props: { url: string }) => {
+  return (
+    <>
+      <h1>Welcome to doetlater</h1>
+      <a href={props.url} target="_blank">{props.url}</a>
+    </>
+  );
 };
 
-const mailer = createTransport({
-  host: "127.0.0.1",
-  secure: false,
-  port: 2525,
-});
-
-export const sendWelcomeEmail = createServerFn().handler(async () => {
-  await mailer.sendMail({
-    from: "no-reply.later@strooware.nl",
-    to: "bas+testing@strootje.com",
-    subject: "Welcome to the waitinglist",
-    html: await renderToStringAsync(WelcomeEmailTemplate),
+const mailer = (opts: ReturnType<typeof env>["smtp"]) => {
+  return createTransport({
+    host: opts.host,
+    port: opts.port,
+    secure: false,
   });
+};
+
+export const sendWelcomeEmail = createServerFn().inputValidator(v.object({
+  templateData: v.object({ url: v.string() }),
+  email: v.string(),
+})).handler(async ({ data }) => {
+  const html = await renderToStringAsync(() => <WelcomeEmailTemplate {...data.templateData} />);
+
+  if (!env().smtp.host) {
+    console.log("***NO SMTP HOST***");
+    console.log(html);
+  } else {
+    await mailer(env().smtp).sendMail({
+      from: "no-reply.later@strooware.nl",
+      subject: "Welcome to the waitinglist",
+      to: data.email,
+      html,
+    });
+  }
 });
diff --git a/src/comps.ui.cards/todo-item.card.tsx b/src/comps.ui.cards/todo-item.card.tsx
index 4d0cb0f..94a038e 100644
--- a/src/comps.ui.cards/todo-item.card.tsx
+++ b/src/comps.ui.cards/todo-item.card.tsx
@@ -2,6 +2,7 @@ import type { clientModels } from "@scope/database/client";
 import { cva, cx, type VariantProps } from "class-variance-authority";
 import { addDays, formatISOWithOptions } from "date-fns/fp";
 import { type ComponentProps, splitProps } from "solid-js";
+import { Icon } from "../comps.ui/icon.tsx";
 import { Swiper } from "../comps.ui/swiper.tsx";
 import { todoItemCollection } from "../data.collections/todo-item.collection.ts";
 
@@ -25,7 +26,7 @@ export const TodoItemCard = (props: TodoItemCardProps) => {
       actions={{
         left: [
           {
-            comp: <i class="i-solar:check-square-bold-duotone" />,
+            comp: <Icon.Solar class="i-solar:check-square-bold-duotone" />,
             action: async () => {
               todoItemCollection.update(loProps.todoItem.id, (p) => {
                 if (p.completedAt) {
@@ -39,7 +40,7 @@ export const TodoItemCard = (props: TodoItemCardProps) => {
         ],
         right: [
           {
-            comp: <i class="i-solar:alarm-bold-duotone" />,
+            comp: <Icon.Solar class="i-solar:alarm-bold-duotone" />,
             action: async () => {
               todoItemCollection.update(loProps.todoItem.id, (p) => {
                 p.dueAt = formatISOWithOptions({ representation: "date" }, addDays(3, p.dueAt));
diff --git a/src/data.functions/env.service.ts b/src/data.functions/env.service.ts
index f7488f3..7ba6dd3 100644
--- a/src/data.functions/env.service.ts
+++ b/src/data.functions/env.service.ts
@@ -3,7 +3,7 @@ import { createServerOnlyFn } from "@tanstack/solid-start";
 const load = <T = string>(key: string, defval?: T) => {
   const val = Deno.env.get(key);
 
-  if (!val && !defval) {
+  if (!val && !defval && val !== defval) {
     throw `missing env '${key}'`;
   }
 
@@ -15,6 +15,9 @@ const load = <T = string>(key: string, defval?: T) => {
 };
 
 export const env = createServerOnlyFn(() => ({
+  database: {
+    path: load("DATABASE_PATH", "."),
+  },
   fider: {
     token: load("FIDER_API_TOKEN"),
   },
@@ -22,7 +25,8 @@ export const env = createServerOnlyFn(() => ({
     login: load("LISTMONK_API_LOGIN", "later"),
     token: load("LISTMONK_API_TOKEN"),
   },
-  database: {
-    path: load("DATABASE_PATH", "."),
+  smtp: {
+    host: load<string | undefined>("SMTP_HOST", undefined),
+    port: load("SMTP_PORT", 2525),
   },
 }));
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 10c2a8d..95b9747 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -69,17 +69,16 @@ export const Route = createFileRoute("/")({
         <Section>
           <form class="mt-1 flex justify-center gap-2">
             <Button class="b-1 b-stone-500 rounded bg-white p-2" onclick={() => setDueAt(subDays(1, dueAt()))}>
-              <Icon.Solar class="i-solar:alt-arrow-left-bold" />
+              <Icon.Solar class="i-solar:alt-arrow-left-bold text-xl" />
             </Button>
 
             <switchDate.Field name="date">
               {(field) => (
-                <button
-                  type="button"
-                  class="b-1 b-stone-500 inline-flex min-w-1/3 items-center justify-center rounded bg-white px-2 py-1"
+                <Button
+                  class="b-1 b-stone-500 flex inline-flex min-w-1/3 items-center justify-center gap-2 rounded bg-white px-2 py-1"
                   onclick={() => setDueAt(new Date())}
                 >
-                  <Icon.Solar class="i-solar:calendar-date-bold-duotone" />
+                  <Icon.Solar class="i-solar:calendar-date-bold-duotone p-2 text-xl" />
                   <span>
                     {intlFormatDistanceWithOptions(
                       { unit: "day" },
@@ -87,12 +86,12 @@ export const Route = createFileRoute("/")({
                       formatISOWithOptions({ representation: "date" }, field().state.value),
                     )}
                   </span>
-                </button>
+                </Button>
               )}
             </switchDate.Field>
 
             <Button class="b-1 b-stone-500 rounded bg-white p-2" onclick={() => setDueAt(addDays(1, dueAt()))}>
-              <Icon.Solar class="i-solar:alt-arrow-right-bold" />
+              <Icon.Solar class="i-solar:alt-arrow-right-bold text-xl" />
             </Button>
           </form>