diff --git a/.gitignore b/.gitignore
index c78d9a4..29b6023 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,8 @@ node_modules
 /prisma/data.db-journal
 /postgres-data
 
+tailwind.css
+
 .DS_Store
 coverage
 build
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index dc6958f..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "singleQuote": false,
-  "semi": true
-}
diff --git a/app/components/Dialog/Dialog.tsx b/app/components/Dialog/Dialog.tsx
index 86c4652..bd5f6ab 100644
--- a/app/components/Dialog/Dialog.tsx
+++ b/app/components/Dialog/Dialog.tsx
@@ -25,17 +25,17 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
       data-testid="dialog"
     >
       <div className="fixed inset-0 bg-neutral-900 bg-opacity-25" />
-      <div className="fixed inset-0 overflow-y-auto min-h-screen md:min-h-min">
-        <div className="flex h-full justify-center pt-4 md:pb-4 md:px-4 text-center ">
-          <HeadlessDialog.Panel className="w-full h-full md:h-auto md:max-w-md transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all relative">
+      <div className="fixed inset-0 min-h-screen overflow-y-auto md:min-h-min">
+        <div className="flex h-full justify-center pt-4 text-center md:px-4 md:pb-4 ">
+          <HeadlessDialog.Panel className="relative h-full w-full transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all md:h-auto md:max-w-md">
             <Button
-              className="rounded-full absolute top-2 right-2 w-8 h-8 px-0 py-0"
+              className="absolute top-2 right-2 h-8 w-8 rounded-full px-0 py-0"
               variant="secondary"
               size="lg"
               aria-label="Close dialog"
               onClick={onClose}
             >
-              <div className="relative w-8 h-8">
+              <div className="relative h-8 w-8">
                 <span className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
diff --git a/app/components/Input/Input.tsx b/app/components/Input/Input.tsx
index 699c51e..b109f1a 100644
--- a/app/components/Input/Input.tsx
+++ b/app/components/Input/Input.tsx
@@ -8,7 +8,7 @@ export const Input: React.FC<InputHTMLAttributes<HTMLInputElement>> =
         data-testid="input"
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none placeholder-neutral-400",
+          "w-full bg-inherit placeholder-neutral-400 focus:outline-none",
           className,
         ].join(" ")}
         {...props}
diff --git a/app/components/MarkingInput/MarkingInput.tsx b/app/components/MarkingInput/MarkingInput.tsx
index db16b03..cad1e90 100644
--- a/app/components/MarkingInput/MarkingInput.tsx
+++ b/app/components/MarkingInput/MarkingInput.tsx
@@ -43,7 +43,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
 
   return (
     <div
-      className="absolute z-10 group/marking font-mono"
+      className="group/marking absolute z-10 font-mono"
       style={{
         left: `${indent}ch`,
       }}
@@ -67,7 +67,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
           style={{
             width: `${mark.length || 1}ch`,
           }}
-          className="font-mono rounded-sm !bg-neutral-200 w-auto"
+          className="w-auto rounded-sm !bg-neutral-200 font-mono"
         />
         <Button
           variant="text"
diff --git a/app/components/NavBar/NavBar.tsx b/app/components/NavBar/NavBar.tsx
index 54c26c1..a7ebf60 100644
--- a/app/components/NavBar/NavBar.tsx
+++ b/app/components/NavBar/NavBar.tsx
@@ -7,14 +7,14 @@ type Props = {};
 export const NavBar: React.FC<Props> = () => {
   return (
     <nav className="bg-neutral-200 py-4 px-2" data-testid="navbar">
-      <div className="flex container max-w-xl mx-auto bg-neutral-50 px-4 py-3 rounded-2xl items-center shadow-md">
+      <div className="container mx-auto flex max-w-xl items-center rounded-2xl bg-neutral-50 px-4 py-3 shadow-md">
         <div className="flex-1">
           <div className="flex items-center">
             <div>
               <img
                 src="/tune_binder_logo.svg"
                 alt="TuneBunder Logo"
-                className="object-contain w-7"
+                className="w-7 object-contain"
               />
             </div>
             {/* <div className="flex-1">TuneBinder</div> */}
@@ -26,9 +26,9 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "text-primary-600 border-primary-500 font-medium"
-                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
-              } uppercase text-sm transition-all border-b-2 border-transparent`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2  text-sm uppercase transition-all`
             }
           >
             Songs
@@ -38,15 +38,15 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "text-primary-600 border-primary-500 font-medium"
-                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
-              } uppercase text-sm transition-all border-b-2 border-transparent`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2 text-sm uppercase transition-all`
             }
           >
             Setlists
           </NavLink>
         </div>
-        <div className="flex-1 flex justify-end">
+        <div className="flex flex-1 justify-end">
           <LogoutButton />
         </div>
       </div>
diff --git a/app/components/Search/Search.tsx b/app/components/Search/Search.tsx
index 1629adf..713e350 100644
--- a/app/components/Search/Search.tsx
+++ b/app/components/Search/Search.tsx
@@ -8,17 +8,17 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Search: React.FC<Props> = ({ onSearch, ...props }) => {
   return (
     <div
-      className="border-neutral-400 border rounded-md px-3 py-2 flex items-center focus-within:border-neutral-800 flex-row-reverse transition-colors"
+      className="flex flex-row-reverse items-center rounded-md border border-neutral-400 px-3 py-2 transition-colors focus-within:border-neutral-800"
       data-testid="search"
     >
       <input
         type={"search"}
-        className="peer bg-inherit placeholder-neutral-500 w-full outline-none"
+        className="peer w-full bg-inherit placeholder-neutral-500 outline-none"
         placeholder="Search"
         onChange={onSearch}
         {...props}
       />
-      <div className="pr-3 text-neutral-500 peer-focus:text-neutral-700 transition-colors">
+      <div className="pr-3 text-neutral-500 transition-colors peer-focus:text-neutral-700">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
diff --git a/app/components/Select/Select.tsx b/app/components/Select/Select.tsx
index 5c7be70..1053765 100644
--- a/app/components/Select/Select.tsx
+++ b/app/components/Select/Select.tsx
@@ -75,7 +75,7 @@ export function Select({
               </>
             )}
           </Listbox.Button>
-          <Listbox.Options className="absolute z-30 bg-inherit mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-full">
+          <Listbox.Options className="absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded-md bg-inherit bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             {options.map((option) => (
               <Listbox.Option
                 key={option.value}
@@ -96,7 +96,7 @@ export function Select({
                       {option.name}
                     </span>
                     {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-600 text-sm">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-neutral-600">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="none"
diff --git a/app/components/Stanza/Stanza.tsx b/app/components/Stanza/Stanza.tsx
index 051f48f..8648fb3 100644
--- a/app/components/Stanza/Stanza.tsx
+++ b/app/components/Stanza/Stanza.tsx
@@ -8,19 +8,19 @@ type Props = {
 export const Stanza: React.FC<Props> = ({ stanza }) => {
   return (
     <div className="space-y-1" data-testid="stanza">
-      <p className="font-bold uppercase w-auto text-sm">{stanza.type}</p>
+      <p className="w-auto text-sm font-bold uppercase">{stanza.type}</p>
       <div className="space-y-3">
         {stanza.lines.map((line) => {
           return (
             <div key={line.id}>
-              <div className="font-mono relative">
-                <div className="opacity-0 cursor-default" aria-hidden>
+              <div className="relative font-mono">
+                <div className="cursor-default opacity-0" aria-hidden>
                   Hidden Spacer
                 </div>
                 {line.markings?.map((mark) => (
                   <div
                     key={mark.id}
-                    className="inline-block text-center bg-neutral-200 text-neutral-800 font-mono outline-none rounded-sm absolute top-0"
+                    className="absolute top-0 inline-block rounded-sm bg-neutral-200 text-center font-mono text-neutral-800 outline-none"
                     style={{ left: `${mark.indent}ch` }}
                   >
                     {mark.mark}
diff --git a/app/components/Textarea/Textarea.tsx b/app/components/Textarea/Textarea.tsx
index 5d3d2e7..5706a33 100644
--- a/app/components/Textarea/Textarea.tsx
+++ b/app/components/Textarea/Textarea.tsx
@@ -30,7 +30,7 @@ export const Textarea: React.FC<InputHTMLAttributes<HTMLTextAreaElement>> =
         wrap={"soft"}
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none resize-none overflow-hidden placeholder-neutral-400",
+          "w-full resize-none overflow-hidden bg-inherit placeholder-neutral-400 focus:outline-none",
           className,
         ].join(" ")}
       />
diff --git a/app/components/dialogs/AddSongs/AddSongs.tsx b/app/components/dialogs/AddSongs/AddSongs.tsx
index 30c3f9c..ab37086 100644
--- a/app/components/dialogs/AddSongs/AddSongs.tsx
+++ b/app/components/dialogs/AddSongs/AddSongs.tsx
@@ -46,7 +46,7 @@ export function AddSongs() {
           <div key={song.id} className="flex items-center">
             <div className="flex-1">
               <h3 className="text-xl">{song.title}</h3>
-              <p className="text-neutral-500 text-xs uppercase font-bold">
+              <p className="text-xs font-bold uppercase text-neutral-500">
                 {song.attribution}
               </p>
             </div>
diff --git a/app/components/forms/logout/index.tsx b/app/components/forms/logout/index.tsx
index 23cf74d..9545456 100644
--- a/app/components/forms/logout/index.tsx
+++ b/app/components/forms/logout/index.tsx
@@ -4,7 +4,7 @@ import { Button } from "~/components/Button";
 export const LogoutButton = () => {
   return (
     <Form action="/logout" method="post">
-      <Button variant="text" size="sm" className="opacity-50 uppercase text-xs">
+      <Button variant="text" size="sm" className="text-xs uppercase opacity-50">
         Logout
       </Button>
     </Form>
diff --git a/app/components/forms/setlist/SetlistForm.tsx b/app/components/forms/setlist/SetlistForm.tsx
index 782315c..3e6cf56 100644
--- a/app/components/forms/setlist/SetlistForm.tsx
+++ b/app/components/forms/setlist/SetlistForm.tsx
@@ -19,7 +19,7 @@ const SetlistForm = forwardRef<
       className="space-y-3"
     >
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-neutral-400">
+        <label className="text-xs font-medium uppercase text-neutral-400">
           Name
         </label>
         <Input
@@ -27,22 +27,22 @@ const SetlistForm = forwardRef<
           defaultValue={setlist?.name}
           placeholder="Rapunzels 10/9/23"
           autoFocus
-          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
+          className="rounded-md border border-neutral-200 px-4 py-3 focus:border-neutral-400"
         />
       </div>
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-neutral-400">
+        <label className="text-xs font-medium uppercase text-neutral-400">
           Description <span className="font-normal">(optional)</span>
         </label>
         <Textarea
           name="description"
           defaultValue={setlist?.description}
           placeholder="An all sea shanty show in honor of Lief Erickson Day."
-          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
+          className="rounded-md border border-neutral-200 px-4 py-3 focus:border-neutral-400"
         />
       </div>
       <div>
-        <div className="flex items-center mt-6">
+        <div className="mt-6 flex items-center">
           <div className="flex-1">
             <Button onClick={close} size="lg" variant="text">
               Cancel
diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index 3373605..2527b70 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -1,6 +1,6 @@
 import type { ILine, IMarking } from "@/types/song";
 import { Menu } from "@headlessui/react";
-import type { KeyboardEvent } from "react";
+import type { ClipboardEvent, KeyboardEvent } from "react";
 import { useState } from "react";
 import { usePopper } from "react-popper";
 import { Input } from "~/components/Input";
@@ -9,10 +9,12 @@ import { Fieldset, useNamespace } from "~/lib/fieldset";
 import { useArray } from "~/lib/useArray";
 import { useFocus } from "~/lib/useFocus";
 import uniqid from "uniqid";
+import { convertPlainTextToLines } from "~/helpers/convertPlainTextToLines";
 
 type Props = {
   line: ILine;
-  insertLine?: () => void;
+  insertLine?: (lyric?: string) => void;
+  updateLine?: (lyric: string) => void;
   deleteLine?: () => void;
 };
 
@@ -20,6 +22,7 @@ export const LineFields: React.FC<Props> = ({
   line,
   insertLine,
   deleteLine,
+  updateLine,
 }) => {
   const {
     items: markingsFieldArray,
@@ -44,28 +47,56 @@ export const LineFields: React.FC<Props> = ({
     placement: "left",
   });
 
-  const insertMark = (index: number) => {
+  function insertMark(index: number) {
     return () => {
       const length = markingsFieldArray.length;
       push({ indent: index, id: uniqid(), mark: "" } as IMarking);
       focus(`input[name="${namespace}markings[${length}].mark"]`);
     };
-  };
+  }
 
-  const removeMark = (index: number) => {
+  function removeMark(index: number) {
     return () => {
       remove(index);
     };
-  };
+  }
 
-  const newLineOnEnterKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  function newLineOnEnterKey(e: KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Enter") {
       e.preventDefault();
-      if (insertLine) insertLine();
+      const target = e.target as HTMLInputElement;
+      // Get text after the current cursor position
+      const afterCursorText = target.value.slice(
+        target.selectionStart ?? undefined
+      );
+      // Remove the text after the cursor from current lyrics input
+      target.value = target.value.slice(0, target.selectionStart ?? undefined);
+      // Insert line with text after the cursor
+      if (insertLine) insertLine(afterCursorText);
     }
-  };
+  }
 
-  const confirmAndDelete = () => {
+  async function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+    const pastedText = e.clipboardData.getData("text/plain");
+    const target = e.target as HTMLInputElement;
+    // If input is blank and pasted text includes an end return
+    if (!target.value && pastedText.includes("\n")) {
+      // Prevent default paste
+      e.preventDefault();
+      const linesToAdd = convertPlainTextToLines(pastedText);
+      // Reverse the array for adding it to the lyrics linearly
+      linesToAdd.reverse();
+      if (updateLine) updateLine(linesToAdd.pop()?.lyrics || "");
+      // Insert the new lyrics in reverse order
+      linesToAdd.forEach((line) => {
+        if (insertLine) insertLine(line.lyrics);
+      });
+    }
+
+    // Trigger handlePaste from StanzaContext
+  }
+
+  function confirmAndDelete() {
     if (
       confirm(
         "Are you sure you want to delete this line?\nYou can't undo this action."
@@ -73,21 +104,20 @@ export const LineFields: React.FC<Props> = ({
     ) {
       if (deleteLine) deleteLine();
     }
-  };
+  }
 
   return (
     <div className="w-full whitespace-nowrap" data-testid="line-fields">
       <Input name="id" hidden readOnly defaultValue={line.id} />
-
       <div className="group relative" ref={setReferenceElement}>
         <Menu>
           <div
-            className="opacity-0 h-full transition-opacity group-hover:opacity-100 z-20 flex items-center pr-5"
+            className="z-20 flex h-full items-center pr-5 opacity-0 transition-opacity group-hover:opacity-100"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <Menu.Button className="bg-neutral-200 h-full rounded-sm text-neutral-600 text-sm px-0.5">
+            <Menu.Button className="h-full rounded-sm bg-neutral-200 px-0.5 text-sm text-neutral-600">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -105,7 +135,7 @@ export const LineFields: React.FC<Props> = ({
               </svg>
             </Menu.Button>
           </div>
-          <Menu.Items className="absolute -translate-x-9 w-28 origin-top-left divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10 sm:text-sm">
+          <Menu.Items className="absolute z-20 w-28 origin-top-left -translate-x-9 divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             <Menu.Item>
               {({ active }) => (
                 <button
@@ -153,7 +183,7 @@ export const LineFields: React.FC<Props> = ({
               <button
                 key={index}
                 onClick={insertMark(index)}
-                className="bg-neutral-200 text-neutral-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
+                className="rounded-sm bg-neutral-200 font-mono text-neutral-500 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 active:opacity-60"
               >
                 +
               </button>
@@ -166,11 +196,12 @@ export const LineFields: React.FC<Props> = ({
           className="font-mono"
           defaultValue={line.lyrics}
           onKeyDown={newLineOnEnterKey}
+          onPaste={onPasteLyrics}
         />
         <Input
           name="notes"
           placeholder="Stylistic notes"
-          className="opacity-75 text-sm"
+          className="text-sm opacity-75"
           hidden={!showNotes}
           defaultValue={line.notes}
           onKeyDown={newLineOnEnterKey}
diff --git a/app/components/forms/song/SongForm.tsx b/app/components/forms/song/SongForm.tsx
index 7d20391..4ba016b 100644
--- a/app/components/forms/song/SongForm.tsx
+++ b/app/components/forms/song/SongForm.tsx
@@ -37,14 +37,14 @@ const SongForm = forwardRef<
       <Textarea
         name="title"
         defaultValue={song.title}
-        className="text-4xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none"
+        className="w-full resize-none bg-inherit py-1 text-4xl outline-none hover:cursor-text"
         placeholder="Title"
       />
       <Textarea
         name="attribution"
         placeholder="Attribution"
         defaultValue={song.attribution}
-        className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none"
+        className="w-full resize-none bg-inherit py-1 text-xl outline-none hover:cursor-text"
       />
       <Input name="id" hidden readOnly defaultValue={song.id} />
       <div>
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index a37b9a7..5bfcc0f 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/app/components/forms/song/StanzaFields/StanzaFields.tsx
@@ -13,14 +13,16 @@ export const StanzaFields: React.FC<{
   insertStanza?: () => void;
   deleteStanza?: () => void;
 }> = ({ stanza, insertStanza, deleteStanza }) => {
-  const { items: lines, insert, remove } = useArray(stanza.lines);
+  const { items: lines, insert, remove, update } = useArray(stanza.lines);
 
   const focus = useFocus();
   const namespace = useNamespace("");
 
   const insertLine = (index: number) => {
-    return () => {
-      insert(index + 1, createMockStanza({}).lines[0]);
+    return (lyrics?: string) => {
+      const lineToInsert = createMockStanza({}).lines[0];
+      lineToInsert.lyrics = lyrics || "";
+      insert(index + 1, lineToInsert);
       focus(`input[name="${namespace}lines[${index + 1}].lyrics"]`);
     };
   };
@@ -31,6 +33,12 @@ export const StanzaFields: React.FC<{
     };
   };
 
+  const updateLine = (index: number) => {
+    return (lyrics: string) => {
+      update(index, { lyrics });
+    };
+  };
+
   const confirmAndDelete = () => {
     if (
       confirm(
@@ -43,7 +51,7 @@ export const StanzaFields: React.FC<{
 
   return (
     <>
-      <div className="group/stanza py-2 border-y-2 focus-within:border-neutral-200 hover:border-neutral-200 border-transparent transition-all">
+      <div className="group/stanza border-y-2 border-transparent py-2 transition-all focus-within:border-neutral-200 hover:border-neutral-200">
         <div className="flex">
           <div className="flex-1">
             <Select
@@ -53,20 +61,20 @@ export const StanzaFields: React.FC<{
                 { name: "Bridge", value: "bridge" },
               ]}
               name="type"
-              className="font-bold uppercase w-auto"
+              className="w-auto font-bold uppercase"
               defaultValue={stanza.type}
             />
           </div>
           <div>
             <button
               type="button"
-              className="hover:bg-neutral-200 rounded-sm text-neutral-600 text-sm p-2 group-hover/stanza:opacity-100 opacity-0 transition-colors whitespace-nowrap inline-flex items-center"
+              className="inline-flex items-center whitespace-nowrap rounded-sm p-2 text-sm text-neutral-600 opacity-0 transition-colors hover:bg-neutral-200 group-hover/stanza:opacity-100"
               onClick={confirmAndDelete}
             >
               <span className="mr-1">
                 <TrashIcon width={"1em"} />
               </span>
-              <span className="uppercase text-xs">Delete</span>
+              <span className="text-xs uppercase">Delete</span>
             </button>
           </div>
         </div>
@@ -76,6 +84,7 @@ export const StanzaFields: React.FC<{
             <Fieldset.Headless namespace={`lines[${index}]`}>
               <LineFields
                 line={line}
+                updateLine={updateLine(index)}
                 deleteLine={deleteLine(index)}
                 insertLine={insertLine(index)}
               />
@@ -83,8 +92,8 @@ export const StanzaFields: React.FC<{
             <button
               type="button"
               aria-label="Add Line"
-              onClick={insertLine(index)}
-              className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+              onClick={() => insertLine(index)()}
+              className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
             >
               + Add Line
             </button>
@@ -94,8 +103,8 @@ export const StanzaFields: React.FC<{
           <button
             type="button"
             aria-label="Add Line"
-            onClick={insertLine(0)}
-            className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+            onClick={() => insertLine(0)()}
+            className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
           >
             + Add Line
           </button>
@@ -105,7 +114,7 @@ export const StanzaFields: React.FC<{
         type="button"
         aria-label="Add Line"
         onClick={insertStanza}
-        className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+        className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
       >
         + New Stanza
       </button>
diff --git a/app/db/setlist.db.ts b/app/db/setlist.db.ts
index 3daf806..beeb7ac 100644
--- a/app/db/setlist.db.ts
+++ b/app/db/setlist.db.ts
@@ -45,15 +45,13 @@ export async function setQRCode(
         light: "#FFFFFF",
         dark: "#000000",
       },
+      margin: 0,
     }
   );
   qrcode = qrcode
     .replace("#000000", "currentColor")
     .replace("#FFFFFF", "none")
-    .replace(
-      'viewBox="0 0 45 45"',
-      "width='1em' height='1em' viewBox='2 2 41 41'"
-    );
+    .replace("<svg", "<svg width='1em' height='1em' ");
 
   return await prisma.setlist.update({
     where: {
diff --git a/app/helpers/convertPlainTextToLines.test.ts b/app/helpers/convertPlainTextToLines.test.ts
new file mode 100644
index 0000000..ad04099
--- /dev/null
+++ b/app/helpers/convertPlainTextToLines.test.ts
@@ -0,0 +1,32 @@
+import type { ILine } from "@/types/song";
+import { convertPlainTextToLines } from "./convertPlainTextToLines";
+
+const samplePastedText =
+  "This is a song\nWith an single stanza\nThis is a song";
+
+const singleStanzaConverted: ILine[] = [
+  {
+    id: expect.any(String),
+    lyrics: "This is a song",
+    markings: [],
+    notes: "",
+  },
+  {
+    id: expect.any(String),
+    lyrics: "With an single stanza",
+    markings: [],
+    notes: "",
+  },
+  {
+    id: expect.any(String),
+    lyrics: "This is a song",
+    markings: [],
+    notes: "",
+  },
+];
+
+test("Should convert to list with single stanza", () => {
+  expect(convertPlainTextToLines(samplePastedText)).toMatchObject(
+    singleStanzaConverted
+  );
+});
diff --git a/app/helpers/convertPlainTextToLines.ts b/app/helpers/convertPlainTextToLines.ts
new file mode 100644
index 0000000..4f6c012
--- /dev/null
+++ b/app/helpers/convertPlainTextToLines.ts
@@ -0,0 +1,14 @@
+import { createMockLine } from "@/test/factories/song.factory";
+import type { ILine } from "@/types/song";
+
+export function convertPlainTextToLines(text: string) {
+  // Split text into Lines
+
+  const textSplitIntoLyrics = text.split("\n");
+  const lines = [] as ILine[];
+  textSplitIntoLyrics.forEach((lyrics) => {
+    lines.push(createMockLine({ lyrics }));
+  });
+
+  return lines;
+}
diff --git a/app/lib/useArray.test.ts b/app/lib/useArray.test.ts
index b7c7f4e..172a51c 100644
--- a/app/lib/useArray.test.ts
+++ b/app/lib/useArray.test.ts
@@ -54,3 +54,31 @@ test("can delete items", () => {
   expect(result.current.items[0]).toBe(1);
   expect(result.current.items.length).toBe(1);
 });
+
+test("can findIndex", () => {
+  const { result } = renderHook(() => useArray([{ id: 0 }, { id: 1 }]));
+
+  expect(result.current.findIndex((value) => value.id === 0)).toBe(0);
+  expect(result.current.findIndex((value) => value.id === 1)).toBe(1);
+
+  act(() => {
+    result.current.insert(1, { id: 3 });
+  });
+
+  expect(result.current.findIndex((value) => value.id === 3)).toBe(1);
+});
+
+test("can update object", () => {
+  const { result } = renderHook(() =>
+    useArray([
+      { id: 0, value: 0 },
+      { id: 1, value: 1 },
+    ])
+  );
+
+  act(() => {
+    result.current.update(1, { value: 2 });
+  });
+
+  expect(result.current.items[1]).toMatchObject({ id: 1, value: 2 });
+});
diff --git a/app/lib/useArray.ts b/app/lib/useArray.ts
index 97477c6..3b76a86 100644
--- a/app/lib/useArray.ts
+++ b/app/lib/useArray.ts
@@ -27,6 +27,14 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
+  const update = (index: number, item: Partial<T>) => {
+    setItems((oldItems) => {
+      const items = [...oldItems];
+      items.splice(index, 1, { ...items[index], ...item });
+      return items;
+    });
+  };
+
   const push = (item: T) => {
     setItems((oldItems) => {
       const items = [...oldItems];
@@ -35,6 +43,10 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
+  const findIndex = (predicate: (value: T) => unknown) => {
+    return items.findIndex(predicate);
+  };
+
   const swap = (indexA: number, indexB: number) => {
     setItems((oldItems) => {
       const items = [...oldItems];
@@ -43,5 +55,5 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
-  return { items, remove, push, replace, insert, swap };
+  return { items, remove, push, replace, insert, swap, findIndex, update };
 }
diff --git a/app/routes/__app.tsx b/app/routes/__app.tsx
index de5eb5d..25f4755 100644
--- a/app/routes/__app.tsx
+++ b/app/routes/__app.tsx
@@ -9,7 +9,7 @@ export default function App() {
   return (
     <>
       <NavBar />
-      <main className="bg-neutral-200 min-h-screen py-4 px-2 md:px-0">
+      <main className="min-h-screen bg-neutral-200 py-4 px-2 md:px-0">
         <Outlet />
       </main>
       <ModalRouter>
diff --git a/app/routes/__app/setlists/$id/edit.tsx b/app/routes/__app/setlists/$id/edit.tsx
index 54ef05b..42a906b 100644
--- a/app/routes/__app/setlists/$id/edit.tsx
+++ b/app/routes/__app/setlists/$id/edit.tsx
@@ -1,7 +1,7 @@
 import type { Setlist } from "@prisma/client";
 import type { ActionArgs } from "@remix-run/node";
 import { redirect } from "remix-typedjson";
-import { updateSetlist } from "~/db/setlist.db";
+import { setQRCode, updateSetlist } from "~/db/setlist.db";
 import { formDataToJson } from "~/helpers/formDataToJson";
 
 export async function action({ request, params }: ActionArgs) {
@@ -21,6 +21,7 @@ export async function action({ request, params }: ActionArgs) {
         description,
       },
     });
+    await setQRCode(updatedSetlist, request);
     return redirect(`/setlists/${updatedSetlist.id}`);
   } catch (e) {
     throw new Response("Internal error", { status: 500 });
diff --git a/app/routes/__app/setlists/$id/index.tsx b/app/routes/__app/setlists/$id/index.tsx
index 94e4777..c9c8c17 100644
--- a/app/routes/__app/setlists/$id/index.tsx
+++ b/app/routes/__app/setlists/$id/index.tsx
@@ -3,6 +3,8 @@ import { Disclosure, Menu } from "@headlessui/react";
 import {
   EllipsisVerticalIcon,
   PencilIcon,
+  PencilSquareIcon,
+  PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { PlayIcon } from "@heroicons/react/24/solid";
@@ -30,7 +32,7 @@ export default function ViewSetlist() {
   const { setlist } = useTypedLoaderData<typeof loader>();
   const { submit } = useFetcher();
   return (
-    <div className="space-y-4 max-w-xl mx-auto">
+    <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
         <div className="flex-1">
           <Button.Link
@@ -60,71 +62,62 @@ export default function ViewSetlist() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-neutral-50  rounded-lg shadow-lg p-8 flex relative">
+      <div className="relative  flex rounded-lg bg-neutral-50 p-8 shadow-lg">
         <Button.Link
           to={`/setlists/${setlist.id}?modal=edit-setlist`}
-          className="absolute top-2 right-4 text-xs flex items-center"
+          className="absolute top-2 right-4 flex items-center text-xs"
           size="sm"
-          variant="outlined"
+          variant="text"
         >
           <span className="mr-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              width={"1em"}
-              height={"1em"}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-              />
-            </svg>
+            <PencilSquareIcon width={"1em"} />
           </span>
           Edit Details
         </Button.Link>
-        <div className="text-9xl mr-4">
+        <div className="mr-5 text-9xl">
           <span dangerouslySetInnerHTML={{ __html: setlist.qrcode }}></span>
         </div>
         <div className="flex-1">
           <h1 className="text-4xl">{setlist.name}</h1>
           <p className="mb-2">{setlist.description}</p>
-          <p className="text-neutral-500 text-xs">
+          <p className="text-xs text-neutral-500">
             {setlist.songs.length} Songs
           </p>
         </div>
       </div>
       <div className="flex">
-        <h2 className="text-2xl flex-1">Songs</h2>
-        <Button.Link
-          to="?modal=add-songs"
-          variant="secondary"
-          className="inline-flex items-center"
-        >
-          <span className="mr-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              width={"1em"}
-              height={"1em"}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 4.5v15m7.5-7.5h-15"
-              />
-            </svg>
-          </span>
-          Add Songs
-        </Button.Link>
+        <h2 className="flex-1 text-2xl">Songs</h2>
+        {!!setlist.songs.length && (
+          <Button.Link
+            to="?modal=add-songs"
+            variant="primary"
+            className="inline-flex items-center"
+          >
+            <span className="mr-2">
+              <PlusIcon width={"1em"} />
+            </span>
+            Add Songs
+          </Button.Link>
+        )}
       </div>
       <div className="space-y-4">
+        {!setlist.songs.length && (
+          <div className=" rounded-md bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-2xl font-medium text-neutral-700">
+              Start adding songs to this setlist.
+            </h2>
+            <Button.Link
+              to="?modal=add-songs"
+              variant="primary"
+              className="inline-flex items-center"
+            >
+              <span className="mr-2">
+                <PlusIcon width={"1em"} />
+              </span>
+              Add Songs
+            </Button.Link>
+          </div>
+        )}
         {setlist.songs.map((song, index) => {
           function removeSong() {
             submit(
@@ -159,17 +152,17 @@ const SetlistSong: React.FC<{
   return (
     <Disclosure key={song.id}>
       {({ open }) => (
-        <div className="shadow-md transition-all relative">
+        <div className="relative shadow-md transition-all">
           <div
-            className={`bg-white sticky top-0 bg-inherit w-full outline-none  ${
+            className={`sticky top-0 w-full bg-white bg-inherit outline-none  ${
               open && "border-b border-neutral-300"
             } ${open ? "rounded-t-md" : "rounded-md"} flex items-center`}
             style={{ zIndex: order }}
           >
             <Disclosure.Button
-              className={"flex-1 pl-4 py-5 flex items-center group"}
+              className={"group flex flex-1 items-center py-5 pl-4"}
             >
-              <div className="mr-3 p-2 group-hover:bg-neutral-200 transition-all rounded-full">
+              <div className="mr-3 rounded-full p-2 transition-all group-hover:bg-neutral-200">
                 <PlayIcon
                   className={`${open && "rotate-90"} text-neutral-600`}
                   width="1em"
@@ -179,18 +172,18 @@ const SetlistSong: React.FC<{
                 <h2 className="text-lg">
                   {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
                 </h2>
-                <p className="text-xs font-bold text-neutral-500 uppercase">
+                <p className="text-xs font-bold uppercase text-neutral-500">
                   {song.attribution || "Unknown Artist"}
                 </p>
               </div>
             </Disclosure.Button>
-            <Menu as="div" className="relative inline-block text-left pr-3">
+            <Menu as="div" className="relative inline-block pr-3 text-left">
               <Menu.Button as="div">
                 <Button icon variant="text" size="sm" type="button">
                   <EllipsisVerticalIcon width={"1.25em"} />
                 </Button>
               </Menu.Button>
-              <Menu.Items className="absolute right-2 top-0 w-44 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20">
+              <Menu.Items className="divide-gray-100 absolute right-2 top-0 z-20 w-44 divide-y rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div className="px-1 py-1 ">
                   <Menu.Item>
                     {({ active }) => (
@@ -233,7 +226,7 @@ const SetlistSong: React.FC<{
 
           <Disclosure.Panel
             as="div"
-            className={"px-7 py-5 bg-white rounded-b-md"}
+            className={"rounded-b-md bg-white px-7 py-5"}
           >
             <div className="space-y-7">
               {stanzas.map((stanza) => (
diff --git a/app/routes/__app/setlists/index.tsx b/app/routes/__app/setlists/index.tsx
index 266b987..8fd4795 100644
--- a/app/routes/__app/setlists/index.tsx
+++ b/app/routes/__app/setlists/index.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/24/solid";
+import { PlusIcon, QueueListIcon } from "@heroicons/react/24/solid";
 import type { Setlist } from "@prisma/client";
 import { Form, Link } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -20,9 +20,14 @@ export default function SetlistsIndex() {
     keys: ["name", "venue"],
   });
   return (
-    <div className="space-y-4 max-w-xl mx-auto">
+    <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
-        <h1 className="text-3xl flex-1">Setlists</h1>
+        <h1 className="flex flex-1 items-center text-3xl">
+          <span className="mr-2 inline-block">
+            <QueueListIcon width={"1em"} />
+          </span>{" "}
+          Setlists
+        </h1>
 
         <Button.Link
           to={"?modal=new-setlist"}
@@ -51,27 +56,29 @@ export default function SetlistsIndex() {
       <Search onSearch={onSearch} />
       <div className="space-y-2">
         {!setlists.length && (
-          <div className="border-2 border-primary-500 rounded-md p-8">
-            <h2 className="text-2xl font-medium mb-4 text-primary-700">
+          <div className=" rounded-md bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-2xl font-medium text-neutral-700">
               Easily share a group of songs with friends and bandmates.
             </h2>
-            <Form method="post" action="/setlists/new">
-              <Button type="submit" className="inline-flex items-center">
-                <span className="mr-2">
-                  <PlusIcon width={"1em"} />
-                </span>
-                Create A Setlist
-              </Button>
-            </Form>
+
+            <Button.Link
+              to={"?modal=new-setlist"}
+              className="inline-flex items-center"
+            >
+              <span className="mr-2">
+                <PlusIcon width={"1em"} />
+              </span>
+              Create A Setlist
+            </Button.Link>
           </div>
         )}
         {results.map((setlist) => (
           <Link
             to={`/setlists/${setlist.id}`}
             key={setlist.id}
-            className="bg-neutralal-100 px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all flex items-start"
+            className="flex items-start rounded-md bg-white px-7 py-5 shadow-md transition-all  hover:shadow-xl"
           >
-            <div className="mr-2">
+            <div className="mr-4">
               <span
                 className="text-7xl"
                 dangerouslySetInnerHTML={{ __html: setlist.qrcode }}
@@ -82,10 +89,10 @@ export default function SetlistsIndex() {
                 {setlist.name ||
                   `Untitled ${setlist.createdAt.toLocaleString()}`}
               </h2>
-              <p className="text-sm text-neutralal-500 mb-2">
+              <p className="text-neutralal-500 mb-2 text-sm">
                 {setlist.description}
               </p>
-              <p className="text-xs text-neutralal-500">
+              <p className="text-neutralal-500 text-xs">
                 {setlist.songs.length} Songs
               </p>
             </div>
diff --git a/app/routes/__app/songs/$id/edit.tsx b/app/routes/__app/songs/$id/edit.tsx
index d21cddf..a509334 100644
--- a/app/routes/__app/songs/$id/edit.tsx
+++ b/app/routes/__app/songs/$id/edit.tsx
@@ -31,7 +31,7 @@ export default function EditSong() {
   const fetcher = useFetcher();
   const { formRef, hasUnsavedChanges } = useAutoSave(fetcher.submit);
   return (
-    <div className="max-w-xl mx-auto space-y-2">
+    <div className="mx-auto max-w-xl space-y-2">
       <div className="flex items-center">
         <div className="flex-1">
           <Button.Link
@@ -74,7 +74,7 @@ export default function EditSong() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-neutral-50  rounded-lg shadow-lg relative">
+      <div className="relative  rounded-lg bg-neutral-50 shadow-lg">
         <ClientOnly>
           {() => (
             <div className="absolute top-4 right-4 text-xs text-neutral-400">
diff --git a/app/routes/__app/songs/$id/index.tsx b/app/routes/__app/songs/$id/index.tsx
index 6781ed7..cfb8957 100644
--- a/app/routes/__app/songs/$id/index.tsx
+++ b/app/routes/__app/songs/$id/index.tsx
@@ -21,7 +21,7 @@ export default function () {
   const { song } = useTypedLoaderData<typeof loader>();
 
   return (
-    <div className="max-w-xl mx-auto space-y-2">
+    <div className="mx-auto max-w-xl space-y-2">
       <div className="flex items-center">
         <div className="flex-1">
           <Button.Link
@@ -78,13 +78,13 @@ export default function () {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-neutral-50  rounded-lg shadow-lg relative">
+      <div className="relative  rounded-lg bg-neutral-50 shadow-lg">
         <div className="px-10 py-8">
           <div className="mb-4">
-            <h1 className="text-4xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none">
+            <h1 className="w-full resize-none bg-inherit py-1 text-4xl outline-none hover:cursor-text">
               {song.title}
             </h1>
-            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-neutral-500">
+            <p className="w-full resize-none bg-inherit py-1 text-xl text-neutral-500 outline-none hover:cursor-text">
               {song.attribution}
             </p>
           </div>
diff --git a/app/routes/__app/songs/index.tsx b/app/routes/__app/songs/index.tsx
index 427d78d..86d038c 100644
--- a/app/routes/__app/songs/index.tsx
+++ b/app/routes/__app/songs/index.tsx
@@ -1,4 +1,4 @@
-import { PlusIcon } from "@heroicons/react/24/solid";
+import { MusicalNoteIcon, PlusIcon } from "@heroicons/react/24/solid";
 import type { Song } from "@prisma/client";
 import type { LoaderArgs } from "@remix-run/node";
 import { Form, Link } from "@remix-run/react";
@@ -20,9 +20,14 @@ export default function SongsIndex() {
     keys: ["title", "attribution"],
   });
   return (
-    <div className="space-y-4 max-w-xl mx-auto">
+    <div className="mx-auto max-w-xl space-y-4">
       <div className="flex items-center">
-        <h1 className="text-3xl flex-1">Songs</h1>
+        <h1 className="flex flex-1 items-center text-3xl">
+          <span className="mr-2 inline-block">
+            <MusicalNoteIcon width={"1em"} />
+          </span>{" "}
+          Songs
+        </h1>
         <Form method="post" action="/songs/new">
           <Button type="submit" className="inline-flex items-center">
             <span className="mr-2">
@@ -35,8 +40,8 @@ export default function SongsIndex() {
       <Search onSearch={onSearch} />
       <div className="space-y-2">
         {!songs.length && (
-          <div className="border-2 border-primary-500 rounded-md p-8">
-            <h2 className="text-2xl font-medium mb-4 text-primary-700">
+          <div className=" rounded-md bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-2xl font-medium text-neutral-700">
               Add a song and start jamming!
             </h2>
             <Form method="post" action="/songs/new">
@@ -53,12 +58,12 @@ export default function SongsIndex() {
           <Link
             to={`/songs/${song.id}`}
             key={song.id}
-            className="block bg-white px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all"
+            className="block rounded-md bg-white px-7 py-5 shadow-md transition-all hover:bg-white hover:shadow-xl"
           >
             <h2 className="text-lg">
               {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
             </h2>
-            <p className="text-xs font-bold text-neutral-500 uppercase">
+            <p className="text-xs font-bold uppercase text-neutral-500">
               {song.attribution || "Unknown Artist"}
             </p>
           </Link>
diff --git a/app/routes/__app/songs/new.tsx b/app/routes/__app/songs/new.tsx
index 3e5f1ed..95e66f8 100644
--- a/app/routes/__app/songs/new.tsx
+++ b/app/routes/__app/songs/new.tsx
@@ -1,4 +1,4 @@
-import type { LoaderArgs} from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { createSong } from "~/db/song.db";
 import { currentAuthedUser } from "~/utils/auth.server";
diff --git a/app/routes/auth/auth0.tsx b/app/routes/auth/auth0.tsx
index 57c3530..3a9ac41 100644
--- a/app/routes/auth/auth0.tsx
+++ b/app/routes/auth/auth0.tsx
@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction} from "@remix-run/node";
+import type { ActionFunction, LoaderFunction } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 
 import { processAuthentication } from "~/utils/auth.server";
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index cb590e4..18d0286 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -12,9 +12,9 @@ export const loader = async ({ request }: LoaderArgs) => {
 
 export default function Landing() {
   return (
-    <div className="h-screen flex items-center flex-col justify-center bg-neutral-300">
-      <h1 className="text-center text-3xl mb-4">👋 Welcome to TuneBinder</h1>
-      <div className="flex flex-col md:flex-row md:space-y-0 space-y-3 items-center justify-center md:space-x-3">
+    <div className="flex h-screen flex-col items-center justify-center bg-neutral-300">
+      <h1 className="mb-4 text-center text-3xl">👋 Welcome to TuneBinder</h1>
+      <div className="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-3">
         <SignupButton />
         <LoginButton />
       </div>
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index a93dcab..0f580de 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -639,6 +639,10 @@ video {
   z-index: 20;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -684,6 +688,10 @@ video {
   margin-right: 0.75rem;
 }
 
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -696,6 +704,10 @@ video {
   display: inline-block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -824,6 +836,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
diff --git a/package-lock.json b/package-lock.json
index 00440e3..8c09790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
         "npm-run-all": "^4.1.5",
         "plop": "^3.1.1",
         "postcss": "^8.4.19",
+        "prettier-plugin-tailwindcss": "^0.2.2",
         "start-server-and-test": "^1.14.0",
         "tailwindcss": "^3.2.4",
         "ts-node": "^10.9.1",
@@ -14800,6 +14801,76 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.2.tgz",
+      "integrity": "sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@prettier/plugin-php": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": ">=2.2.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@prettier/plugin-php": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -30014,6 +30085,12 @@
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.2.tgz",
+      "integrity": "sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 9269636..0de6413 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "npm-run-all": "^4.1.5",
     "plop": "^3.1.1",
     "postcss": "^8.4.19",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..e44a717
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,6 @@
+// prettier.config.js
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+  singleQuote: false,
+  semi: true,
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index ce877dd..e91404c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
       neutral: colors.stone,
       primary: colors.orange,
       secondary: colors.cyan,
+      red: colors.red,
     },
   },
   plugins: [],
diff --git a/test/factories/song.factory.ts b/test/factories/song.factory.ts
index e8e75b2..765360c 100644
--- a/test/factories/song.factory.ts
+++ b/test/factories/song.factory.ts
@@ -1,4 +1,4 @@
-import type { IMarking, IStanza } from "@/types/song";
+import type { ILine, IMarking, IStanza } from "@/types/song";
 import type { Song } from "@prisma/client";
 import uniqid from "uniqid";
 
@@ -99,14 +99,17 @@ export function createMockStanza(p: Partial<IStanza>): IStanza {
   return {
     id: uniqid(),
     type: "verse",
-    lines: [
-      {
-        id: uniqid(),
-        lyrics: "",
-        markings: [],
-        notes: "",
-      },
-    ],
+    lines: [createMockLine()],
+    ...p,
+  };
+}
+
+export function createMockLine(p?: Partial<ILine>): ILine {
+  return {
+    id: uniqid(),
+    lyrics: "",
+    markings: [],
+    notes: "",
     ...p,
   };
 }