diff --git a/components/Item.vue b/components/Item.vue
index 308ff26..2d02bc3 100644
--- a/components/Item.vue
+++ b/components/Item.vue
@@ -8,6 +8,7 @@ import type { BaseService } from '~/types'
 
 const props = defineProps<BaseService>()
 
-const type = capitalize(props.type || 'base')
-const component = defineAsyncComponent(() => import(`~/components/service/${type}.vue`))
+const component = props.type
+  ? defineAsyncComponent(() => import(`~/components/service/${capitalize(props.type!)}.vue`))
+  : resolveComponent('ServiceBase')
 </script>
diff --git a/components/service/Base.vue b/components/service/Base.vue
deleted file mode 100644
index 4adbef2..0000000
--- a/components/service/Base.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="p-4 flex gap-4">
-    <div class="flex-shrink-0 flex">
-      <a :href="link" class="self-center w-16 h-16 overflow-hidden rounded-2xl border border-fg/10 dark:border-fg/15">
-        <slot name="icon">
-          <div :class="iconWrapClasses" :style="iconWrapStyles">
-            <Icon v-if="icon?.name" :name="icon.name" :class="iconClasses" />
-            <img v-else-if="icon?.url" :src="icon.url" alt="" :class="iconClasses">
-          </div>
-        </slot>
-      </a>
-    </div>
-    <div>
-      <h3 class="text-lg mt-1 font-semibold line-clamp-1">
-        <a :href="link">{{ title }}</a>
-      </h3>
-      <p class="text-sm text-fg-dimmed line-clamp-1">
-        <slot name="description" :description="description">
-          {{ description }}
-        </slot>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { BaseService } from '~/types'
-
-const props = defineProps<BaseService>()
-
-const iconsExist = computed(() => props.icon && (props.icon?.name || props.icon?.url))
-const iconClasses = 'block h-full w-full'
-const iconWrapClasses = computed(() => ({
-  'bg-fg/5 dark:bg-fg/10': !iconsExist.value || (props.icon?.wrap && !props.icon?.background),
-  'p-2': props.icon?.wrap,
-  'h-full w-full': true,
-}))
-const iconWrapStyles = computed(() => ({
-  background: props.icon?.background,
-  color: props.icon?.color,
-}))
-</script>
diff --git a/components/service/Ping.vue b/components/service/Ping.vue
deleted file mode 100644
index 443f613..0000000
--- a/components/service/Ping.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <ServiceBase v-bind="props">
-    <template #description>
-      <template v-if="data && data.time >= 0">
-        {{ $t('service.ping.description') }} <span class="border-b border-dashed">{{ data.time }} {{ $t('service.ping.units') }}</span>
-      </template>
-      <template v-else>
-        {{ $t('service.ping.error') }}
-      </template>
-    </template>
-  </ServiceBase>
-</template>
-
-<script setup lang="ts">
-import type { PingService } from '~/types/services'
-
-const props = defineProps<PingService>()
-
-const { data, refresh } = useFetch('/api/services/ping', { query: { id: props.id } })
-const { pause } = useIntervalFn(refresh, props?.options?.interval || 60000, { immediate: true })
-
-onBeforeUnmount(pause)
-</script>
diff --git a/components/service/base/Icon.vue b/components/service/base/Icon.vue
new file mode 100644
index 0000000..1d95113
--- /dev/null
+++ b/components/service/base/Icon.vue
@@ -0,0 +1,25 @@
+<template>
+  <div :class="wrapClasses" :style="wrapStyles">
+    <Icon v-if="props?.name" :name="props.name" :class="iconClasses" />
+    <img v-else-if="props?.url" :src="props.url" alt="" :class="iconClasses">
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ServiceIcon } from '~/types'
+
+const props = defineProps<ServiceIcon>()
+
+const iconClasses = 'block h-full w-full'
+
+const wrapClasses = computed(() => ({
+  'bg-fg/5 dark:bg-fg/10': props?.wrap && !props?.background,
+  'p-2': props?.wrap,
+  [iconClasses]: true,
+}))
+
+const wrapStyles = computed(() => ({
+  background: props?.background,
+  color: props?.color,
+}))
+</script>
diff --git a/components/service/base/Index.vue b/components/service/base/Index.vue
new file mode 100644
index 0000000..70edf52
--- /dev/null
+++ b/components/service/base/Index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="p-4 flex gap-4">
+    <div class="flex-shrink-0 flex">
+      <a :href="link" class="self-center w-16 h-16 overflow-hidden rounded-2xl border border-fg/10 dark:border-fg/15">
+        <slot name="icon">
+          <ServiceBaseIcon v-if="icon" v-bind="icon" />
+        </slot>
+      </a>
+    </div>
+    <div>
+      <h3 class="text-lg mt-1 font-semibold line-clamp-1 flex gap-2 items-center">
+        <slot name="title">
+          <a :href="link">{{ title }}</a>
+        </slot>
+        <slot v-if="props?.status" name="status">
+          <ServiceBaseStatus :ping="data?.ping" />
+        </slot>
+      </h3>
+
+      <p class="text-sm text-fg-dimmed line-clamp-1">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BaseService } from '~/types'
+import { useServiceData } from '~/composables/services'
+
+const props = defineProps<BaseService>()
+const { data, pauseUpdate } = useServiceData<BaseService, { ping: { time: number, status: boolean } }>(props)
+
+onBeforeUnmount(pauseUpdate)
+</script>
diff --git a/components/service/base/Status.vue b/components/service/base/Status.vue
new file mode 100644
index 0000000..530c901
--- /dev/null
+++ b/components/service/base/Status.vue
@@ -0,0 +1,23 @@
+<template>
+  <span class="relative inline-flex z-1 h-2.5 w-2.5 rounded-full bg-green-400" :class="color">
+    <span class="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" :class="color" />
+  </span>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  ping?: {
+    status: boolean
+    time: number
+  }
+}
+
+const props = defineProps<Props>()
+const color = computed(() => {
+  if (!props.ping) {
+    return 'bg-neutral-400'
+  }
+
+  return props.ping.status ? 'bg-green-400' : 'bg-red-400'
+})
+</script>
diff --git a/composables/services.ts b/composables/services.ts
new file mode 100644
index 0000000..2d32ed9
--- /dev/null
+++ b/composables/services.ts
@@ -0,0 +1,29 @@
+import type { BaseService } from '~/types'
+
+export interface ServiceDataOptions {
+  immediate?: boolean
+  updateInterval?: number
+}
+
+export function useServiceData<T extends BaseService, R>(service: T, options?: ServiceDataOptions) {
+  const immediate = options?.immediate || true
+  const updateInterval = (options?.updateInterval || 60) * 1000
+  const type = service.type || 'base'
+
+  const { data, pending, status, refresh, execute } = useFetch<R>(`/api/services/${type}`, {
+    immediate,
+    query: { id: service.id },
+    timeout: 15000,
+  })
+
+  const { pause, resume } = useIntervalFn(refresh, updateInterval, { immediate })
+
+  return {
+    data,
+    pending,
+    status,
+    execute,
+    pauseUpdate: pause,
+    resumeUpdate: resume,
+  }
+}
diff --git a/server/api/services/base.ts b/server/api/services/base.ts
new file mode 100644
index 0000000..9521ad6
--- /dev/null
+++ b/server/api/services/base.ts
@@ -0,0 +1,35 @@
+import type { BaseService } from '~/types'
+
+export interface State {
+  ping: {
+    status: boolean
+    time: number
+  }
+}
+
+export default defineEventHandler(async (event): Promise<State> => {
+  const service = await getService<BaseService>(event)
+  const state: State = {
+    ping: {
+      status: false,
+      time: -1,
+    },
+  }
+
+  if (service?.status?.enabled) {
+    try {
+      const startTime = new Date().getTime()
+      await $fetch(service.link, { timeout: 15000 })
+      const endTime = new Date().getTime()
+
+      state.ping = {
+        status: true,
+        time: endTime - startTime,
+      }
+    } catch (e) {
+      logger.error(e)
+    }
+  }
+
+  return state
+})
diff --git a/server/api/services/ping.ts b/server/api/services/ping.ts
deleted file mode 100644
index 1e075eb..0000000
--- a/server/api/services/ping.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { PingService } from '~/types'
-
-export default defineEventHandler(async (event) => {
-  const service = await getService<PingService>(event)
-
-  try {
-    const startTime = new Date().getTime()
-    await $fetch(service.link)
-    const endTime = new Date().getTime()
-    const time = endTime - startTime
-
-    return { time }
-  } catch (e) {
-    logger.error(e)
-  }
-
-  return { time: -1 }
-})
diff --git a/types/services.d.ts b/types/services.d.ts
index e4e24d9..33678d7 100644
--- a/types/services.d.ts
+++ b/types/services.d.ts
@@ -1,22 +1,24 @@
+export interface ServiceStatus {
+  enabled?: boolean
+  interval?: number
+}
+
+export interface ServiceIcon {
+  url?: string
+  name?: string
+  wrap?: boolean
+  background?: string
+  color?: string
+}
+
 export interface BaseService {
   id: string
   type?: string
   title: string
   description?: string
   link: string
-  icon?: {
-    url?: string
-    name?: string
-    wrap?: boolean
-    background?: string
-    color?: string
-  }
+  icon?: ServiceIcon
+  status?: ServiceStatus
   options?: Record<string, string | number | boolean>
   secrets?: Record<string, string | number | boolean>
 }
-
-export interface PingService extends BaseService {
-  options?: {
-    interval?: number
-  }
-}