diff --git a/src/lib/islands/result-island.svelte b/src/lib/islands/result-island.svelte
deleted file mode 100644
index 27e1786..0000000
--- a/src/lib/islands/result-island.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-    import Island from "$lib/islands/island.svelte";
-
-    interface resultObj {
-        results: boolean;
-        title: string;
-        resultLines: string[];
-    }
-
-    export let resultObject: resultObj = {
-        results: true,
-        title: "",
-        resultLines: [],
-    };
-
-    let variables = {
-        title: resultObject.title,
-    };
-</script>
-
-<Island {variables}>
-    {#each resultObject.resultLines as line}
-        <p>{line}</p>
-    {/each}
-</Island>
-
-<style>
-    p {
-        color: var(--island-text-color);
-    }
-</style>
diff --git a/src/routes/more/reasons/+page.svelte b/src/routes/more/reasons/+page.svelte
index 223cdac..00c4202 100644
--- a/src/routes/more/reasons/+page.svelte
+++ b/src/routes/more/reasons/+page.svelte
@@ -1,19 +1,33 @@
-<script>
+<script lang="ts">
     import { onMount } from "svelte";
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import Loading from "$lib/navigation/loading.svelte";
-    import ResultIsland from "$lib/islands/result-island.svelte";
-    import { getApiUrl } from "$lib/scripts/upstream";
+    import Card from "$lib/cards/Card.svelte";
+    import { CardConfig } from "$lib/cards/Card.types";
+    import { apiGet } from "$lib/scripts/apiFetch";
 
+    interface ApiResponse {
+        results: boolean;
+        title: string;
+        resultLines: string[];
+    }
     const title = "Reason Codes";
     let isLoading = false;
     let inputValue = "";
-    let resultObject = {
+    let resultObject: ApiResponse = {
         results: false,
         title: "",
         resultLines: [],
     };
+    let config: CardConfig = {
+        title: "",
+        showHelp: false,
+        showRefresh: false,
+        helpText: "",
+        onRefresh: () => {},
+        refreshing: false,
+    }
 
     function load() {
         isLoading = true;
@@ -26,9 +40,9 @@
 
     async function getData() {
         if (inputValue) {
-            const url = `${getApiUrl()}/api/v2/ref/reasonCode/${inputValue}`;
-            const res = await fetch(url);
-            return await res.json();
+            const apiPath = `/api/v2/ref/reasonCode/${inputValue}`;
+            const res = await apiGet(apiPath)
+            return res
         } else {
             return [];
         }
@@ -47,6 +61,7 @@
             };
         }
         resultObject.resultLines = resultLines;
+        config.title = resultObject.title;
         resultObject.results = true;
     }
 
@@ -79,7 +94,11 @@
 {/if}
 
 {#if resultObject.results}
-    <ResultIsland {resultObject} />
+    <Card {config}>
+        {#each resultObject.resultLines as line}
+            <p>{line}</p>
+        {/each}
+    </Card>
 {/if}
 
 <Nav />