diff --git a/src/app.html b/src/app.html
index 76ede76..5ac3c87 100644
--- a/src/app.html
+++ b/src/app.html
@@ -28,6 +28,7 @@
             background-color: #1f1f36;
             padding: 0.5em 0.5em 0.5em;
             margin: 0 0 16px 0px;
+            user-select: none;
         }
 
         #list-item > input[type="checkbox"] {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4bece9a..072b9f9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,10 +2,24 @@
     import { member, intros } from '../store.ts';
 
     let selectedIntros = [];
+    let selectedToRemoveIntros = [];
+
+    const login = () => {
+        intros.fetchIntros()
+        member._fakeLogin("DayOldRice")
+    }
 
     const addIntros = () => {
         $member.intros = $member.intros.concat(selectedIntros)
+        selectedIntros = [];
     }
+    const removeIntros = () => {
+        $member.intros = $member.intros.filter((intro) => !selectedToRemoveIntros.includes(intro))
+
+        selectedToRemoveIntros = [];
+    }
+
+    $: console.log(selectedToRemoveIntros)
 </script>
 
 <h1>MemeJoin - A bot for user intros</h1>
@@ -14,12 +28,16 @@
     <p>{$member.username}</p>
 
     {#if $member.intros.length > 0}
-    <h3>Current Set Intros</h3>
-    <div id="list">
-        {#each $member.intros as intro}
-            <label id="list-item">{$intros[intro].name} ({$intros[intro].filename})</label>
-        {/each}
-    </div>
+        <h3>Current Set Intros</h3>
+        <div id="list">
+            {#each $member.intros as intro}
+                <label id="list-item">
+                    <input type="checkbox" bind:group={selectedToRemoveIntros} name="selectedToRemoveIntros" value={intro}>
+                    {$intros[intro].name} ({$intros[intro].filename})
+                </label>
+            {/each}
+        <button on:click={removeIntros}>Remove</button>
+        </div>
     {:else}
         <h3 style='color:yellow'>You don't have any intros, try adding one</h3>
     {/if}
@@ -38,6 +56,6 @@
     </div>
 {:else}
     <p style="color:red;">You need to login first</p>
-    <button on:click={member._fakeLogin}>Login</button>
+    <button on:click={login}>Login</button>
 {/if}
 
diff --git a/src/store.ts b/src/store.ts
index d6e25fc..562a100 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -20,24 +20,53 @@ function createMemberStore(): MemberStore {
         subscribe: subscribe,
         set: set,
         addIntro: (intro: IntroIndex) => { update((n) => n.intros.push(intro)); return intro },
-        _fakeLogin: () => set(
-            {
-                username: "TestUser",
-                intros: [0,1]
+        _fakeLogin: async (username) => {
+            const response = (await (await fetch(`http://localhost:7756/me/${username}`)).json())
+
+            if (response === "NoUserFound") {
+                return false;
+            } else {
+                set(
+                    {
+                        username: username,
+                        intros: response.Settings[0].intros.map((intro) => intro[0])
+                    }
+                ) 
+
+                return true;
             }
-        ),
+        },
     }
 }
 
+function createIntroStore(): IntroStore {
+    const { subscribe, set, update } = writable([])
+
+    return {
+        subscribe: subscribe,
+        set: set,
+        update: update,
+        fetchIntros: async () => {
+            const response = (await (await fetch("http://localhost:7756/intros/588149178912473103")).json())
+            if (response !== "NoGuildFound") {
+                console.log(response.Intros[0].File);
+                const intros = response.Intros.map((intro) => {
+                    if (!!intro.File) {
+                        return { name: intro.File.friendlyName, filename: intro.File.filename }
+                    } else if (!!intro.Online) {
+                        return { name: intro.Online.friendlyName, url: intro.Online.url }
+                    }
+                })
+                console.log(intros)
+
+                set(intros)
+            }
+        },
+    }
+
+
+}
+
+export const intros: IntroStore = createIntroStore()
 export const member: MemberStore = createMemberStore()
-export const intros: IntroStore = readable([], (set) => {
-        // TODO: actually grab intros from the API
-        set([
-            { name: "TestSound", filename: "testsound.mp3", length: 30 },
-            { name: "Huh?", filename: "tim allen.mp3", length: 2 },
-            { name: "This sound hasn't been selected yet", filename: "totally_real.mp3", length: 9 },
-        ])
-
-        return () => {}
-    })