diff --git a/app/components/MainFooter.vue b/app/components/MainFooter.vue
index 6253bd7..55a8ec8 100644
--- a/app/components/MainFooter.vue
+++ b/app/components/MainFooter.vue
@@ -1,14 +1,4 @@
-<script setup>
-const footerLinks = [{
-  label: 'Socials',
-  children: [
-    { label: 'Twitter', to: 'https://x.com/Splatfestival_' },
-    { label: 'Discord', to: 'https://discord.gg/grMSxZf' },
-    { label: 'Forgejo', to: 'https://git.spbr.net/spacebar' },
-    { label: 'Patreon', to: 'https://www.patreon.com/splatfestival' }
-  ]
-}]
-</script>
+<script lang="ts" src="../composables/MainFooter.ts"></script>
 
 <template>
   <UFooter>
diff --git a/app/components/ServiceCard.vue b/app/components/ServiceCard.vue
index 920d7e1..e5e477d 100644
--- a/app/components/ServiceCard.vue
+++ b/app/components/ServiceCard.vue
@@ -38,18 +38,7 @@
   </div>
 </template>
 
-<script setup>
-defineProps({
-  name: { type: String, required: true },
-  status: { type: String, default: 'Normal' },
-  uptimePercentage: { type: Number, default: 100.00 },
-  uptimeHistory: { type: Array, required: true }
-})
-
-const formatTooltip = (day) => {
-  return `${day.date}: ${day.status.toUpperCase()} (${day.incident || 'No incidents'})`
-}
-</script>
+<script lang="ts" src="../composables/ServiceCard.ts"></script>
 
 <style scoped>
 .service-card {
diff --git a/app/composables/MainFooter.ts b/app/composables/MainFooter.ts
new file mode 100644
index 0000000..cf2dbea
--- /dev/null
+++ b/app/composables/MainFooter.ts
@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const footerLinks = [
+      {
+        label: 'Socials',
+        children: [
+          { label: 'Twitter', to: 'https://x.com/Splatfestival_' },
+          { label: 'Discord', to: 'https://discord.gg/grMSxZf' },
+          { label: 'Forgejo', to: 'https://git.spbr.net/spacebar' },
+          { label: 'Patreon', to: 'https://www.patreon.com/splatfestival' }
+        ]
+      }
+    ]
+
+    return {
+      footerLinks
+    }
+  }
+})
\ No newline at end of file
diff --git a/app/composables/ServiceCard.ts b/app/composables/ServiceCard.ts
new file mode 100644
index 0000000..68c18c5
--- /dev/null
+++ b/app/composables/ServiceCard.ts
@@ -0,0 +1,24 @@
+interface ServiceCardProps {
+  name: string;
+  status: string;
+  uptimePercentage: number;
+  uptimeHistory: Array<{ date: string; status: string; incident?: string }>;
+}
+
+export default {
+  props: {
+    name: { type: String, required: true },
+    status: { type: String, default: 'Normal' },
+    uptimePercentage: { type: Number, default: 100.00 },
+    uptimeHistory: { type: Array, required: true }
+  },
+  setup(props: ServiceCardProps) {
+    const formatTooltip = (day: any) => {
+      return `${day.date}: ${day.status.toUpperCase()} (${day.incident || 'No incidents'})`
+    }
+
+    return {
+      formatTooltip
+    }
+  }
+}
\ No newline at end of file