diff --git a/src/routes/instances/+page.svelte b/src/routes/instances/+page.svelte
index 8f2f71e..5c23998 100644
--- a/src/routes/instances/+page.svelte
+++ b/src/routes/instances/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { CardInner, CardOuter, LinksOuter, Link } from "$lib/Card";
+	import { CardInner, CardOuter, LinksOuter } from "$lib/Card";
+    import InstanceLink from "./InstanceLink.svelte";
     import dayjs from "dayjs";
-	import type { PageData } from "../$types";
+	import type { PageData } from "./$types";
 	
     export let data: PageData;
 </script>
@@ -21,24 +22,19 @@
                     {#each group.data as item}
                         <CardInner
                             title={item.name}
-                            position={item.status === 200 ? "Up" : "Down"}
-                            positionStyles={item.status === 200 ? "color: #4ade80;" : "color: #f87171;"}
                             description={item.description}
                             icon={item.icon}
                         >
                             <LinksOuter>
-                                <Link url={item.link} class="web">
-                                    <div class="withText">
-                                        <div class="i-fa6-solid:globe" />
-                                        <span>Instance link</span>
-                                    </div>
-                                </Link>
-                                <Link url={item.project} class="link">
-                                    <div class="withText">
-                                        <div class="i-fa6-solid:circle-info" />
-                                        <span>Project website</span>
-                                    </div>
-                                </Link>
+                                <InstanceLink url={item.link} {item} type="main" />
+
+                                {#if item.us}
+                                    <InstanceLink url={item.us} {item} type="us" />
+                                {/if}
+
+                                {#if item.backup}
+                                    <InstanceLink url={item.backup} {item} type="backup" />
+                                {/if}
                             </LinksOuter>
                         </CardInner>
                     {/each}
@@ -65,11 +61,4 @@
 		flex-wrap: wrap;
 		gap: 2rem;
 	}
-
-	.withText {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		font-size: medium;
-	}
 </style>
diff --git a/src/routes/instances/InstanceLink.svelte b/src/routes/instances/InstanceLink.svelte
new file mode 100644
index 0000000..d983487
--- /dev/null
+++ b/src/routes/instances/InstanceLink.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Link } from "$lib/Card";
+
+    export let url: string;
+    export let item: any;
+    export let type: "main" | "us" | "backup";
+</script>
+
+<Link {url} class="web {item.status === 200 ? "" : "pointer-events-none cursor-default opacity-50"}">
+    <div class="withText">
+        <div class="{item.status === 200 ? "i-fa6-solid:arrow-up-right-from-square" : "i-fa6-solid:xmark"}" />
+        <span>
+            {#if type === "main"}
+                Visit
+            {:else if type === "us"}
+                US
+            {:else if type === "backup"}
+                Backup
+            {/if}
+        </span>
+    </div>
+</Link>
+
+<style>
+    .withText {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		font-size: medium;
+	}
+</style>
\ No newline at end of file