diff --git a/components/App.tsx b/components/App.tsx
index 0f5e3da..b3b305f 100644
--- a/components/App.tsx
+++ b/components/App.tsx
@@ -79,17 +79,19 @@ export default function App() {
   }
 
   return (
-    <div className="flex flex-col space-x-5 max-w-7xl mx-auto py-3 sm:px-2 lg:px-3 bg-gray-100">
-      <div className="flex flex-col space-y-5 shadow sm:rounded-md sm:overflow-hidden">
-        <LetterOptions onChange={_onChange} {...options} />
-        <div className="flex space-x-3">
-          <Button onClick={_onGenerate}>Backe PDF</Button>
-          <Button onClick={_onClear}>Alles Löschen</Button>
+    <div className="flex flex-col space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
+      <div className="flex space-x-5">
+        <div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
+          <LetterOptions onChange={_onChange} {...options} />
+          <div className="flex space-x-3 p-3">
+            <Button onClick={_onGenerate}>PDF Erstellen</Button>
+            <Button onClick={_onClear}>Alles Löschen</Button>
+          </div>
         </div>
+        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
       </div>
       <div className="flex flex-col space-y-5">
         <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
-        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
       </div>
     </div>
   )
diff --git a/components/Button.tsx b/components/Button.tsx
index 255b8e1..465bfff 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { PointerEvent } from 'react'
 
-export default function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+export default function Button({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode
+  onClick: (event: PointerEvent<HTMLButtonElement>) => void
+}) {
   return (
     <button
       type="button"
       onClick={onClick}
-      className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
     >
       {children}
     </button>
diff --git a/components/Header.tsx b/components/Header.tsx
index 7934264..a8f7f38 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 export default function Header() {
   return (
-    <header className="my-3">
-      <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">PDFer</h1>
+    <header>
+      <h1 className="pl-3 py-3 text-3xl font-extrabold text-gray-900 bg-gray-200 tracking-tight">PDFer</h1>
     </header>
   )
 }
diff --git a/components/Input.tsx b/components/Input.tsx
index 0a1632e..fb6c0e9 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -14,7 +14,7 @@ export default function Input({
   onchange: (name: string, event: ChangeEvent<{ value: string }>) => void
 }) {
   return (
-    <div>
+    <>
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {text}
       </label>
@@ -28,6 +28,6 @@ export default function Input({
           onChange={onchange.bind(null, name)}
         />
       </div>
-    </div>
+    </>
   )
 }
diff --git a/components/Layout.tsx b/components/Layout.tsx
index a3dca81..2ae43b7 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -4,9 +4,9 @@ import Header from './Header'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div>
+    <>
       <Header />
       <main>{children}</main>
-    </div>
+    </>
   )
 }
diff --git a/components/LetterOptions.tsx b/components/LetterOptions.tsx
index c7b6a63..be01f9e 100644
--- a/components/LetterOptions.tsx
+++ b/components/LetterOptions.tsx
@@ -35,56 +35,73 @@ export default function LetterOptions(props: IProps) {
   ]
 
   return (
-    <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
-      <Select
-        name="template"
-        text="Vorlage"
-        onchange={props.onChange}
-        value={props.template}
-        options={templateTypeOptions}
-      />
-
-      <TextAreaInput
-        name="address"
-        text="Adresse"
-        placeholder={EXAMPLE_ADDRESS}
-        onchange={props.onChange}
-        value={props.address}
-        styles="h-20"
-      />
-      <Input name="subject" text="Betreff" placeholder="Betreffzeile" onchange={props.onChange} value={props.subject} />
-      <TextAreaInput
-        name="body"
-        text="Brieftext"
-        onchange={props.onChange}
-        placeholder="Inhalt des Briefes"
-        value={props.body}
-      />
-      <Collapsible trigger="Bezugszeichenzeile">
-        <Input name="yourRef" text="Ihr Zeichen" onchange={props.onChange} value={props.yourRef} />
-        <Input name="yourMail" text="Ihr Schreiben vom" onchange={props.onChange} value={props.yourMail} />
-        <Input name="myRef" text="Unser Zeichen" onchange={props.onChange} value={props.myRef} />
-        <Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
-        <Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
-      </Collapsible>
-      <Collapsible trigger="Sonstige Einstellungen">
-        <Input name="date" text="Datum" placeholder="Heute" onchange={props.onChange} value={props.date} />
-        <Input
-          name="opening"
-          text="Eröffnung"
-          placeholder="Sehr geehrte Damen und Herren"
+    <div className="grid grid-cols-6 gap-6 px-4 py-5 bg-white sm:p-6">
+      <div className="col-span-3">
+        <Select
+          name="template"
+          text="Vorlage"
           onchange={props.onChange}
-          value={props.opening}
+          value={props.template}
+          options={templateTypeOptions}
         />
-        <Input
-          name="closing"
-          text="Grußform"
-          placeholder="Mit freundlichen Grüßen"
+      </div>
+      <div className="col-span-3">
+        <TextAreaInput
+          name="address"
+          text="Adresse"
+          placeholder={EXAMPLE_ADDRESS}
           onchange={props.onChange}
-          value={props.closing}
+          value={props.address}
+          styles="h-20 col-span-2"
         />
-        <Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
-      </Collapsible>
+      </div>
+      <div className="col-span-3">
+        <Input
+          name="subject"
+          text="Betreff"
+          placeholder="Betreffzeile"
+          onchange={props.onChange}
+          value={props.subject}
+        />
+      </div>
+      <div className="col-span-6">
+        <TextAreaInput
+          name="body"
+          text="Brieftext"
+          onchange={props.onChange}
+          placeholder="Inhalt des Briefes"
+          value={props.body}
+        />
+      </div>
+      <div className="col-span-3">
+        <Collapsible trigger="Bezugszeichenzeile">
+          <Input name="yourRef" text="Ihr Zeichen" onchange={props.onChange} value={props.yourRef} />
+          <Input name="yourMail" text="Ihr Schreiben vom" onchange={props.onChange} value={props.yourMail} />
+          <Input name="myRef" text="Unser Zeichen" onchange={props.onChange} value={props.myRef} />
+          <Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
+          <Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
+        </Collapsible>
+      </div>
+      <div className="col-span-3">
+        <Collapsible trigger="Sonstige Einstellungen">
+          <Input name="date" text="Datum" placeholder="Heute" onchange={props.onChange} value={props.date} />
+          <Input
+            name="opening"
+            text="Eröffnung"
+            placeholder="Sehr geehrte Damen und Herren"
+            onchange={props.onChange}
+            value={props.opening}
+          />
+          <Input
+            name="closing"
+            text="Grußform"
+            placeholder="Mit freundlichen Grüßen"
+            onchange={props.onChange}
+            value={props.closing}
+          />
+          <Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
+        </Collapsible>
+      </div>
     </div>
   )
 }
diff --git a/components/Preview.tsx b/components/Preview.tsx
index 681a755..a99c22d 100644
--- a/components/Preview.tsx
+++ b/components/Preview.tsx
@@ -6,16 +6,9 @@ export default function Preview({ pdfIsLoading, pdfError, pdfUrl }: IPdfProps) {
     return <div>Lade&hellip;</div>
   }
 
-  const errorStyles = {
-    padding: '6px 12px',
-    color: 'white',
-    backgroundColor: '#d81e1e',
-    borderRadius: '3px',
-  }
-
   if (pdfError) {
     return (
-      <div style={errorStyles}>
+      <div className="flex items-center bg-red-100 border-solid border border-red-700 rounded text-red-700 py-2 px-3">
         <span role="img" aria-label="Crying Man">
           😢
         </span>{' '}
@@ -25,13 +18,8 @@ export default function Preview({ pdfIsLoading, pdfError, pdfUrl }: IPdfProps) {
   }
 
   if (!pdfUrl) {
-    return <div>Knopf drücken dann gibts hier was zu sehen!</div>
+    return null
   }
 
-  const styles = {
-    width: '700px',
-    height: '1050px',
-  }
-
-  return <embed src={pdfUrl} style={styles} type="application/pdf" />
+  return <embed src={pdfUrl} className="h-screen w-auto" type="application/pdf" />
 }
diff --git a/components/Select.tsx b/components/Select.tsx
index 48b0ea4..8b4f8db 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -14,7 +14,7 @@ export default function Select({
   options: { name: string; value: string }[]
 }) {
   return (
-    <div className="">
+    <>
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {text}
       </label>
@@ -30,6 +30,6 @@ export default function Select({
           </option>
         ))}
       </select>
-    </div>
+    </>
   )
 }
diff --git a/components/TextAreaInput.tsx b/components/TextAreaInput.tsx
index 448082d..ae1bd72 100644
--- a/components/TextAreaInput.tsx
+++ b/components/TextAreaInput.tsx
@@ -16,7 +16,7 @@ export default function TextAreaInput({
   styles?: string
 }) {
   return (
-    <div>
+    <>
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {text}
       </label>
@@ -31,6 +31,6 @@ export default function TextAreaInput({
           value={value}
         ></textarea>
       </div>
-    </div>
+    </>
   )
 }