diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte
index 8fa51bd..3fa73fe 100644
--- a/fclauncher/frontend/src/App.svelte
+++ b/fclauncher/frontend/src/App.svelte
@@ -5,6 +5,7 @@
   import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
 	import { onMount } from 'svelte'
 	import { loading } from './global.ts'
+	import { slide } from 'svelte/transition'
 
 	let width: int = 10
 	 	
@@ -18,9 +19,13 @@
 <main>
   <img alt="Wails logo" id="logo" src="{logo}">
 	{#if $loading}
-		<Loading />
+		<div transition:slide="{{duration:100}}">
+			<Loading />
+		</div>
 	{:else}
-  	<Instances />
+		<div transition:slide="{{duration:100}}">
+  		<Instances />
+		</div>
 	{/if}
 </main>
 
diff --git a/fclauncher/frontend/src/Instances.svelte b/fclauncher/frontend/src/Instances.svelte
index 309d8b4..4f75c5e 100644
--- a/fclauncher/frontend/src/Instances.svelte
+++ b/fclauncher/frontend/src/Instances.svelte
@@ -4,6 +4,7 @@
 	import {LaunchInstance} from '../wailsjs/go/main/Prism.js'
 	import {onMount} from 'svelte'
 	import {loading} from './global.ts'
+	import {slide} from 'svelte/transition'
 
   let modpacks: Modpack[] = []
 	let pack: string
@@ -67,16 +68,18 @@
 	<button on:click={onclick}>Launch</button>
 	<br/>
 	{#if addingInstance}
-		<select id="pack" on:change={onchange} bind:value={pack} name="pack">Select a Modpack: 
-			{#each modpacks as pack}
-				<option value={pack.Id}>{pack.Name}</option>
-			{/each}
-  	</select>
-		<br/>
-		<input bind:value={name} />
-		<br/>
-		<button on:click={install}>Install</button>
-		<button on:click={() => {addingInstance = false}}>Cancel</button>
+		<div transition:slide="{{duration:300}}">
+			<select id="pack" on:change={onchange} bind:value={pack} name="pack">Select a Modpack: 
+				{#each modpacks as pack}
+					<option value={pack.Id}>{pack.Name}</option>
+				{/each}
+			</select>
+			<br/>
+			<input bind:value={name} />
+			<br/>
+			<button on:click={install}>Install</button>
+			<button on:click={() => {addingInstance = false}}>Cancel</button>
+		</div>
 	{:else}
 		<button on:click={() => {addingInstance = true}}>Add Instance</button>
 	{/if}