diff --git a/src/lib/components/AddForm.svelte b/src/lib/components/AddForm.svelte
index e74f51d..ff1404d 100644
--- a/src/lib/components/AddForm.svelte
+++ b/src/lib/components/AddForm.svelte
@@ -54,7 +54,7 @@
 
 
 <div class="space-y-4">
-    <div class='flex flex-col hidden'>
+    <div class='flex-col hidden'>
         <span class='text-text'>Form Type</span>
         <select bind:value={formType} class="rounded-md bg-background text-text border-2">
             {#each formTypes as formType}
@@ -77,7 +77,7 @@
                 <!-- Display the dropdown menu if manual is false -->
                 <select
                     bind:value={formType}
-                    class="flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
+                    class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
                 >
                     {#each formTypes as formType}
                         <option
@@ -127,7 +127,7 @@
                     {#if !manual}
                         <select
                             bind:value={match}
-                            class="flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
+                            class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
                         >
                             {#each Object.values($matches) as match}
                                 <option
@@ -183,7 +183,7 @@
                 {#if !manual}
                     <select
                         bind:value={team}
-                        class="flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
+                        class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
                     >
                         {#each matchTeams as team}
                             <option
@@ -229,7 +229,7 @@
                 <input
                     type="text"
                     bind:value={$scout}
-                    class="flex-auto sm:inline bg-primary w-80 md:w-96 rounded-xl px-4 py-2 text-white remove-arrow focus:drop-shadow-btn-hover min-w-9"
+                    class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 rounded-xl px-4 py-2 text-white remove-arrow focus:drop-shadow-btn-hover min-w-9"
                 />
             </span>
         </div>
diff --git a/src/lib/components/FormFlow/Checkbox.svelte b/src/lib/components/FormFlow/Checkbox.svelte
index 811a44d..1bfaa0c 100644
--- a/src/lib/components/FormFlow/Checkbox.svelte
+++ b/src/lib/components/FormFlow/Checkbox.svelte
@@ -19,7 +19,7 @@
     <!-- Using a button instead of an input field because styling regular checkboxes is a pain -->
     <button
         on:click={() => {$activeResponses[id].data[component.id] = checked ? 0 : 1}} 
-        class="button clickable !px-2 !py-1.5 border-box border-3"
+        class="button clickable transition-all !px-2 !py-1.5 border-box border-3"
         class:!bg-enabled={checked}
         class:border-enabled={!checked}
         class:border-primary={checked}
diff --git a/src/lib/components/FormFlow/Counter.svelte b/src/lib/components/FormFlow/Counter.svelte
index 70a1f2d..2649bb9 100644
--- a/src/lib/components/FormFlow/Counter.svelte
+++ b/src/lib/components/FormFlow/Counter.svelte
@@ -69,11 +69,11 @@
             <!-- Add and subtract buttons -->
             <button
                 on:click={() => incrementCount(-1)}
-                class="button clickable"
+                class="button clickable transition-all"
             >-</button>
             <button
                 on:click={() => incrementCount(1)}
-                class="button clickable"
+                class="button clickable transition-all"
             >+</button>
         </span>
     </div>
diff --git a/src/lib/components/FormFlow/index.svelte b/src/lib/components/FormFlow/index.svelte
index 4b80a00..d1c9879 100644
--- a/src/lib/components/FormFlow/index.svelte
+++ b/src/lib/components/FormFlow/index.svelte
@@ -8,7 +8,7 @@
 
     export let formType: Form | undefined;
 
-        export const deleteResponse = () => {
+    export const deleteResponse = () => {
         if (!$response) return;
         const res = $activeResponses;
         delete res[$response];
@@ -69,8 +69,9 @@
             >Delete</button> -->
             <div class="text-center">
                 <button
-                    class="button clickable text-xl !px-5 !py-2 !bg-enabled mr-3 !font-normal"
-                    on:click={() => deleteResponse()}>🗑️ Delete</button
+                    class="button clickable text-xl !px-5 !py-2 mr-3 !font-normal"
+                    class:!bg-enabled={!$errors[$response]}
+                    on:click={() => deleteResponse()} disabled={$errors[$response]}>🗑️ Delete</button
                 ><button
                     class="button clickable text-xl !px-5 !py-2 !bg-enabled ml-3 !font-normal"
                     on:click={() => submitResponse()}>✔ Done</button
diff --git a/src/lib/components/FormsList.svelte b/src/lib/components/FormsList.svelte
index 2e893fa..0536d59 100644
--- a/src/lib/components/FormsList.svelte
+++ b/src/lib/components/FormsList.svelte
@@ -19,7 +19,7 @@
     <hr class="text-text/50 mb-2" />
     <ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
         {#each responses as response (response.id)}
-            <li class="flex button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
+            <li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
                 <!-- Main button that takes you to the response -->
                 <button class="flex-auto text-white text-left flex flex-col sm:block"
                     on:click={() => setResponse(response.id)}
@@ -38,13 +38,18 @@
                 <!-- The submit and delete buttons -->
                 <span class="flex">
                     <button
-                        class="button clickable !px-2 !py-1 !bg-enabled mr-1 !font-normal"
+                        class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
                         on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
                     ><button
-                        class="button clickable !px-2 !py-1 !bg-enabled !font-normal"
+                        class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
                         disabled={$errors[response.id]}
-                        on:click={() => submitResponse(response.id)}>✔ Submit</button
-                    >
+                        on:click={() => submitResponse(response.id)}>
+                        {#if $errors[response.id]}
+                            🚫 Has Errors
+                        {:else}
+                            ✔ Submit
+                        {/if}
+                    </button>
                 </span>
             </li>
         {/each}
diff --git a/src/lib/components/ResponseList.svelte b/src/lib/components/ResponseList.svelte
index 7fc2781..444b788 100644
--- a/src/lib/components/ResponseList.svelte
+++ b/src/lib/components/ResponseList.svelte
@@ -8,33 +8,35 @@
   <div>
     <span>
         <hr class="mt-3"/>
-        <ul>
+        <ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
             {#each $responseQueue as response (response.id)}
-                <li>
-                    <span>
-                        <button class="flex-auto text-white text-left flex flex-col sm:block">
-                            <span class="font-normal text-gray-400">{response.type.name} Form</span>
-                            {#if response.type.name != "Pit Scouting"}
-                            <!-- These two are wrapped in span because on mobile we want to display them on separate lines -->  
-                                <span class="sm:ml-5"><span class="font-normal text-gray-400">Match: </span><span class="">{response.match}</span></span>
-                            {/if}
-                            <!-- Add a space between them on desktop -->
-                            <span class="sm:ml-5"><span class="font-normal text-gray-400">Team: </span><span class="">{response.team}</span></span>
+                <li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
+                    <!-- Main button that takes you to the response -->
+                    <!-- <button class="flex-auto text-white text-left flex flex-col sm:block"
+                        on:click={() => setResponse(response.id)}
+                    > -->
 
-                            <!-- The submit and delete buttons -->
-                            <span class="flex">
-                                <button
-                                class="button clickable !px-2 !py-1 !bg-enabled mr-1 !font-normal"
-                                on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
-                                ><button
-                                class="button clickable !px-2 !py-1 !bg-enabled !font-normal"
-                                on:click={() => unsubmitResponse(response.id)}>✔ Unsubmit</button
-                                >
-                            </span>
-                            {#if $errors[response.id]}
-                                <p>has errors</p>
-                            {/if}
-                        </button>
+                    <span class="flex-auto text-white text-left flex flex-col sm:block">
+                        <!-- These texts are wrapped in span because on mobile we want to display them on separate lines -->  
+                        <span class="block sm:inline font-normal text-gray-400">{response.type.name}</span>
+                        {#if response?.type?.name != "Pit Scouting"}
+                            <!-- Add a space between them on desktop -->
+                            <span class="block sm:inline "><span class="font-normal text-gray-400 sm:ml-5">Match: </span>{response.match}</span>
+                        {/if}
+                        <!-- Add a space between them on desktop -->
+                        <span class="block sm:inline sm:ml-5"><span class="font-normal text-gray-400">Team: </span>{response.team}</span>
+                    </span>
+                    <!-- </button> -->
+    
+                    <!-- The submit and delete buttons -->
+                    <span class="flex">
+                        <button
+                            class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
+                            on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
+                        ><button
+                            class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
+                            disabled={$errors[response.id]}
+                            on:click={() => unsubmitResponse(response.id)}>↩️ Unsubmit</button>
                     </span>
                 </li>
             {/each}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 9575204..2f5c3a0 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -14,7 +14,7 @@ import { page } from '$app/stores';
 
         <button
             on:click={() => goto("/")}
-            class="button clickable mt-5"
+            class="button clickable mt-5 transition-all"
         ><span
             class="font-normal"
             >Return to