diff --git a/components/CreateSecret/CustomExpireInForm.tsx b/components/CreateSecret/CustomExpireInForm.tsx
new file mode 100644
index 0000000..808bdc8
--- /dev/null
+++ b/components/CreateSecret/CustomExpireInForm.tsx
@@ -0,0 +1,65 @@
+import { signal } from "@preact/signals";
+import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
+const isCustomExpireIn = signal(false);
+
+export default function CustomExpireInForm() {
+  return (
+    <>
+      <input
+        type="checkbox"
+        name="customExpireIn"
+        id="customExpireIn"
+        checked={isCustomExpireIn.value}
+        onChange={() => {
+          isCustomExpireIn.value = !isCustomExpireIn.value;
+        }}
+      />
+      <label
+        for="customExpireIn"
+        class="flex flex-col min-[360px]:flex-row min-[360px]:gap-1"
+      >
+        <span>Eigene Ablaufzeit</span>
+        <span>(default: 1 Tag)</span>
+      </label>
+      {isCustomExpireIn.value && (
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <form
+            id="duration"
+            class="flex flex-row gap-4 justify-center-safe"
+          >
+            <label for="h">
+              <input
+                class="p-2 border-2 border-gray-500 rounded w-[6ch]"
+                id="h"
+                name="h"
+                type="number"
+                min="0"
+                max="999"
+                value={0}
+                onWheel={scrollNumberInputValue}
+              />
+              &nbsp;h
+            </label>
+
+            <label for="m">
+              <input
+                class="p-2 border-2 border-gray-500 rounded w-[6ch]"
+                id="m"
+                name="m"
+                type="number"
+                min="0"
+                max="59"
+                value={0}
+                onWheel={scrollNumberInputValue}
+              />
+              &nbsp;m
+            </label>
+          </form>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/components/CreateSecret/ExpireForm.tsx b/components/CreateSecret/ExpireForm.tsx
deleted file mode 100644
index 47f107c..0000000
--- a/components/CreateSecret/ExpireForm.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { signal } from "@preact/signals";
-import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
-const isCustomExpireIn = signal(false);
-
-export default function ExpireForm() {
-  return (
-    <>
-      <label class="mt-4">
-        <input
-          type="checkbox"
-          name="customExpireIn"
-          checked={isCustomExpireIn.value}
-          onChange={() => {
-            isCustomExpireIn.value = !isCustomExpireIn.value;
-          }}
-        />
-        &nbsp;Eigene Ablaufzeit (default: 1 Tag)
-      </label>
-      {isCustomExpireIn.value && (
-        <form id="duration">
-          <input
-            class="p-2 border-2 border-gray-500 rounded"
-            id="h"
-            name="h"
-            type="number"
-            min="0"
-            max="999"
-            value={0}
-            onWheel={scrollNumberInputValue}
-          />
-          <label for="h">h</label>
-          &nbsp;
-          <input
-            class="p-2 border-2 border-gray-500 rounded"
-            id="m"
-            name="m"
-            type="number"
-            min="0"
-            max="59"
-            value={0}
-            onWheel={scrollNumberInputValue}
-          />
-          <label for="m">m</label>
-        </form>
-      )}
-    </>
-  );
-}
diff --git a/components/CreateSecret/PassphraseInput.tsx b/components/CreateSecret/PassphraseInput.tsx
index 4754d72..3b0430a 100644
--- a/components/CreateSecret/PassphraseInput.tsx
+++ b/components/CreateSecret/PassphraseInput.tsx
@@ -5,30 +5,35 @@ const usePassphrase = signal(false);
 export default function PassphraseInput() {
   return (
     <>
-      <label>
-        <input
-          type="checkbox"
-          name="usePassphrase"
-          checked={usePassphrase.value}
-          onChange={() => {
-            usePassphrase.value = !usePassphrase.value;
-          }}
-        />
-        &nbsp;Eigene Passphrase verwenden um das Secret zu verschlüsseln
-        (optional)
+      <input
+        type="checkbox"
+        name="usePassphrase"
+        id="usePassphrase"
+        checked={usePassphrase.value}
+        onChange={() => {
+          usePassphrase.value = !usePassphrase.value;
+        }}
+      />
+      <label for="usePassphrase">
+        <span>Eigene Passphrase für Verschlüsselung verwenden (optional)</span>
       </label>
       {usePassphrase.value && (
-        <label>
-          Passphrase:&nbsp;
-          <input
-            type="password"
-            name="passphrase"
-            class="p-2 border-2 border-gray-500 rounded"
-            placeholder="Optional"
-            required
-            autocomplete="off"
-          />
-        </label>
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <label class="flex flex-col gap-2">
+            Passphrase:&nbsp;
+            <input
+              type="password"
+              name="passphrase"
+              class="p-2 border-2 border-gray-500 rounded"
+              placeholder="Optional"
+              required
+              autocomplete="off"
+            />
+          </label>
+        </>
       )}
     </>
   );
diff --git a/components/CreateSecret/ViewCount.tsx b/components/CreateSecret/ViewCount.tsx
deleted file mode 100644
index 1a853f5..0000000
--- a/components/CreateSecret/ViewCount.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { signal } from "@preact/signals";
-import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
-
-const useViewCount = signal(false);
-
-export default function ViewCountInput() {
-  return (
-    <>
-      <label>
-        <input
-          type="checkbox"
-          name="useViewCount"
-          checked={useViewCount.value}
-          onChange={() => {
-            useViewCount.value = !useViewCount.value;
-          }}
-        />
-        &nbsp;Anzeigelimit ändern (default: 1)
-      </label>
-      {useViewCount.value && (
-        <label>
-          Anzeigelimit:&nbsp;
-          <input
-            type="number"
-            name="viewCount"
-            class="p-2 border-2 border-gray-500 rounded"
-            placeholder="1"
-            min={1}
-            value={1}
-            autocomplete="off"
-            onWheel={scrollNumberInputValue}
-          />
-        </label>
-      )}
-    </>
-  );
-}
diff --git a/components/CreateSecret/ViewCountLimitInput.tsx b/components/CreateSecret/ViewCountLimitInput.tsx
new file mode 100644
index 0000000..1ddf998
--- /dev/null
+++ b/components/CreateSecret/ViewCountLimitInput.tsx
@@ -0,0 +1,47 @@
+import { signal } from "@preact/signals";
+import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
+
+const useViewCount = signal(false);
+
+export default function ViewCountLimitInput() {
+  return (
+    <>
+      <input
+        type="checkbox"
+        name="useViewCount"
+        id="useViewCount"
+        checked={useViewCount.value}
+        onChange={() => {
+          useViewCount.value = !useViewCount.value;
+        }}
+      />
+      <label
+        for="useViewCount"
+        class="flex flex-col min-[360px]:flex-row min-[360px]:gap-1"
+      >
+        <span>Anzeigelimit ändern</span>
+        <span>(default: 1)</span>
+      </label>
+      {useViewCount.value && (
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <label class="flex flex-col gap-2">
+            Anzeigelimit:&nbsp;
+            <input
+              type="number"
+              name="viewCount"
+              class="p-2 border-2 border-gray-500 rounded"
+              placeholder="1"
+              min={1}
+              value={1}
+              autocomplete="off"
+              onWheel={scrollNumberInputValue}
+            />
+          </label>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/components/Header.tsx b/components/Header.tsx
index 7a4e671..49cf98f 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -3,8 +3,8 @@ export default function Header() {
     <div class="px-2 py-4 mx-auto bg-primary ">
       <a href="/">
         <header class="md:max-w-screen mx-auto flex flex-col items-center justify-center">
-          <h1 class="text-4xl font-bold">SecretShare</h1>
-          <p class="text-3xl">
+          <h1 class="text-4xl font-bold mb-4">SecretShare</h1>
+          <p class="text-2xl text-balance text-center">
             Teile Passwörter und Tokens sicher über Einmal-View URL
           </p>
         </header>
diff --git a/deno.json b/deno.json
index 6125978..c4aadff 100644
--- a/deno.json
+++ b/deno.json
@@ -32,7 +32,8 @@
     "preact": "https://esm.sh/preact@10.22.0",
     "preact/": "https://esm.sh/preact@10.22.0/",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1"
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "tailwind-merge": "npm:tailwind-merge@^3.3.1"
   },
   "compilerOptions": {
     "jsx": "react-jsx",
diff --git a/fresh.gen.ts b/fresh.gen.ts
index e628f9e..146be9f 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -4,6 +4,7 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.tsx";
 import * as $api_create from "./routes/api/create.ts";
 import * as $api_res_tailwind_css from "./routes/api/res/tailwind.css.ts";
 import * as $api_secret_uuid_ from "./routes/api/secret/[uuid].ts";
@@ -15,12 +16,14 @@ import * as $FetchSecret from "./islands/FetchSecret.tsx";
 import * as $Log from "./islands/Log.tsx";
 import * as $messages_CardMsg from "./islands/messages/CardMsg.tsx";
 import * as $messages_ErrorCardMsg from "./islands/messages/ErrorCardMsg.tsx";
+import * as $ui_Card from "./islands/ui/Card.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/api/create.ts": $api_create,
     "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css,
     "./routes/api/secret/[uuid].ts": $api_secret_uuid_,
@@ -34,6 +37,7 @@ const manifest = {
     "./islands/Log.tsx": $Log,
     "./islands/messages/CardMsg.tsx": $messages_CardMsg,
     "./islands/messages/ErrorCardMsg.tsx": $messages_ErrorCardMsg,
+    "./islands/ui/Card.tsx": $ui_Card,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index 937d46d..8383ae2 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -1,18 +1,18 @@
 import onSubmit from "@/src/formHandler/create.ts";
-import ExpireForm from "@/components/CreateSecret/ExpireForm.tsx";
+import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx";
 import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx";
-import ViewCount from "@/components/CreateSecret/ViewCount.tsx";
+import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.tsx";
 
 export default function CreateSecret() {
   return (
-    <section>
-      <h2 class="my-8 text-2xl font-bold items-center flex flex-col">
+    <section class="w-full max-w-[90%] md:max-w-2xl">
+      <h2 class="my-4 text-2xl font-bold items-center flex flex-col">
         Erstelle ein neues Secret
       </h2>
       <form
         name="createSecret"
         method="post"
-        class="flex flex-col items-center"
+        class="flex flex-col items-stretch gap-4"
         onSubmit={onSubmit}
         autocomplete="off"
       >
@@ -23,18 +23,20 @@ export default function CreateSecret() {
           style="display:none;"
         />
         <textarea
-          rows={10}
-          cols={60}
           name="secret"
-          class="w-full p-2 border-2 border-gray-500 rounded"
+          class="min-h-40 md:min-h-60 p-2 border-2 border-gray-500 rounded"
           placeholder="Passwort, Token oder andere Information..."
         />
 
-        <ExpireForm />
-        <PassphraseInput />
-        <ViewCount />
+        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center">
+          <CustomExpireInForm />
+          <PassphraseInput />
+          <ViewCountLimitInput />
+        </div>
 
-        <button class="p-2" type="submit">Anlegen</button>
+        <button class="p-2" type="submit">
+          Anlegen
+        </button>
       </form>
     </section>
   );
diff --git a/islands/Log.tsx b/islands/Log.tsx
index 12c5017..32d2513 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -1,6 +1,7 @@
 import { lastMessage, RichMessage } from "@/src/utils/log.ts";
 import CardMsg from "./messages/CardMsg.tsx";
 import ErrorCardMsg from "./messages/ErrorCardMsg.tsx";
+import { twJoin } from "tailwind-merge";
 
 function renderMessage(message: RichMessage | undefined) {
   if (!message) {
@@ -23,7 +24,7 @@ function renderMessage(message: RichMessage | undefined) {
     case "secretFetch":
       return (
         <CardMsg header="Secret Data" extraInfo={message.extraInfo}>
-          <pre class="monospace whitespace-pre-wrap wrap-anywhere bg-gray-100 p-2 rounded-md overflow-auto max-w-[90dvw] min-w-md">
+          <pre class="monospace whitespace-pre-wrap wrap-anywhere bg-gray-100 p-2 rounded-md overflow-auto max-w-[90dvw] w-full">
             {message.secret}
           </pre>
         </CardMsg>
@@ -32,7 +33,7 @@ function renderMessage(message: RichMessage | undefined) {
       return (
         <CardMsg header={message.header} extraInfo={message.extraInfo}>
           <a
-            class="text-primary-dark text-lg"
+            class="text-primary-dark text-lg wrap-anywhere"
             href={message.secretLink}
             target="_blank"
           >
@@ -43,6 +44,12 @@ function renderMessage(message: RichMessage | undefined) {
   }
 }
 
-export default function Log() {
-  return <div>{renderMessage(lastMessage.value)}</div>;
+export default function Log(props: { class?: string }) {
+  const classes = twJoin("w-full max-w-[90%] md:max-w-2xl", props.class);
+
+  return (
+    <div class={classes}>
+      {renderMessage(lastMessage.value)}
+    </div>
+  );
 }
diff --git a/islands/messages/CardMsg.tsx b/islands/messages/CardMsg.tsx
index 3a99b58..4b6e246 100644
--- a/islands/messages/CardMsg.tsx
+++ b/islands/messages/CardMsg.tsx
@@ -8,7 +8,7 @@ export default function CardMsg(
   },
 ) {
   return (
-    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-gray-200">
+    <div class="flex flex-col items-start justify-center gap-2 rounded-lg p-4 border-2 border-gray-300">
       {props.header && <h3 class="text-lg font-bold">{props.header}</h3>}
       {props.extraInfo && <p>{props.extraInfo}</p>}
       {props.children}
diff --git a/islands/messages/ErrorCardMsg.tsx b/islands/messages/ErrorCardMsg.tsx
index 63ddc17..8df7db8 100644
--- a/islands/messages/ErrorCardMsg.tsx
+++ b/islands/messages/ErrorCardMsg.tsx
@@ -8,9 +8,9 @@ export default function CardMsg(
   },
 ) {
   return (
-    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-red-200 shadow-red-500/50">
+    <div class="flex flex-col items-start justify-center gap-2 rounded-lg p-4 max-w-2xl border-2 border-red-400 ">
       {props.header && (
-        <h3 class="text-lg font-bold text-red-600">{props.header}</h3>
+        <h3 class="text-lg font-bold text-red-500">{props.header}</h3>
       )}
       {props.extraInfo && <p>{props.extraInfo}</p>}
       {props.children}
diff --git a/islands/ui/Card.tsx b/islands/ui/Card.tsx
new file mode 100644
index 0000000..72586bf
--- /dev/null
+++ b/islands/ui/Card.tsx
@@ -0,0 +1,19 @@
+import { JSX } from "preact/jsx-runtime";
+import { twJoin } from "tailwind-merge";
+
+export default function Card(
+  props: {
+    class?: string;
+    children: JSX.Element | undefined;
+  },
+) {
+  const classes = twJoin(
+    "shadow-lg rounded-lg  max-w-2xl border-[1px] border-gray-200",
+    props.class,
+  );
+  return (
+    <div class={classes}>
+      {props.children}
+    </div>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 6e03839..28465a9 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -1,5 +1,4 @@
 import { type PageProps } from "$fresh/server.ts";
-import Header from "@/components/Header.tsx";
 export default function App({ Component }: PageProps) {
   return (
     <html lang="de">
@@ -10,8 +9,7 @@ export default function App({ Component }: PageProps) {
         <link rel="stylesheet" href="/styles.css" />
         <link rel="stylesheet" href="/api/res/tailwind.css" />
       </head>
-      <body>
-        <Header />
+      <body class="min-w-[220px] mb-8">
         <Component />
       </body>
     </html>
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
new file mode 100644
index 0000000..1519e53
--- /dev/null
+++ b/routes/_layout.tsx
@@ -0,0 +1,11 @@
+import { PageProps } from "$fresh/server.ts";
+import Header from "../components/Header.tsx";
+
+export default function Layout({ Component, state }: PageProps) {
+  return (
+    <div>
+      <Header />
+      <Component />
+    </div>
+  );
+}
diff --git a/routes/create.tsx b/routes/create.tsx
index 9bafa2c..b69c3b3 100644
--- a/routes/create.tsx
+++ b/routes/create.tsx
@@ -4,8 +4,8 @@ import Log from "@/islands/Log.tsx";
 export default function CreateSecretPage() {
   return (
     <main class="flex flex-col items-center justify-center">
+      <Log class="mt-4" />
       <CreateSecret />
-      <Log />
     </main>
   );
 }
diff --git a/routes/secret/[uuid].tsx b/routes/secret/[uuid].tsx
index 0e4de26..19376c6 100644
--- a/routes/secret/[uuid].tsx
+++ b/routes/secret/[uuid].tsx
@@ -6,12 +6,16 @@ export default function UUID(props: PageProps) {
   const { uuid } = props.params;
   const encryptionKey = atob(props.url.searchParams.get("encryptionKey") || "");
   return (
-    <main class="flex flex-col items-center justify-center">
-      <h2>Secret abrufen</h2>
-      <p>UUID: {uuid}</p>
-      <p>
+    <main class="flex flex-col items-center justify-center w-full max-w-[90%] md:max-w-2xl gap-4 mx-auto">
+      <h2 class="mt-6 text-2xl font-bold items-center flex flex-col">
+        Secret abrufen
+      </h2>
+      <p class="font-bold wrap-anywhere text-center">UUID: {uuid}</p>
+      <p class="text-balance text-center">
         Mit dem Klick auf den nachfolgenden Button wird das Secret abgerufen.
-        Danach ist dieses <strong>nicht</strong> mehr abrufbar.
+        Danach ist dieses{" "}
+        <strong class="underline underline-offset-2">nicht</strong>{" "}
+        mehr abrufbar!
       </p>
       <FetchSecret uuid={uuid} encryptionKey={encryptionKey} />
       <Log />
diff --git a/static/styles.css b/static/styles.css
index c6a4ad6..65beac6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -4,19 +4,14 @@
 *::after {
   box-sizing: border-box;
 }
-* {
-  margin: 0;
-}
-button {
-  color: inherit;
-}
+
 button, [role="button"] {
   cursor: pointer;
 }
+
 button {
   background-color: transparent;
-  padding: 4;
-  margin: 1em;
+  padding: 0.5rem;
   border: 1px solid black;
   border-radius: 4px;
   font-size: 1em;
@@ -62,12 +57,3 @@ html {
 .tabular-nums {
   font-variant-numeric: tabular-nums;
 }
-
-#duration {
-  display: flex;
-  justify-content: space-between;
-}
-
-#duration input {
-  width: 6ch;
-}
\ No newline at end of file