diff --git a/src/components/ExploreContainer.vue b/src/components/ExploreContainer.vue
deleted file mode 100644
index a1e9058..0000000
--- a/src/components/ExploreContainer.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  name: String,
-});
-</script>
-
-<template>
-  <div id="container">
-    <strong>{{ name }}</strong>
-    <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-  </div>
-</template>
-
-<style scoped>
-#container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-</style>
diff --git a/src/components/divider/index.vue b/src/components/divider/index.vue
new file mode 100644
index 0000000..47bdd41
--- /dev/null
+++ b/src/components/divider/index.vue
@@ -0,0 +1,31 @@
+<script lang='ts' setup>
+defineProps<{ text?: string }>();
+</script>
+
+<template>
+  <div class="divider ion-margin-vertical" v-bind="$attrs">
+    <span>{{ text }}</span>
+  </div>
+</template>
+
+<style scoped>
+.divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.divider::before,
+.divider::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid var(--ion-color-medium);
+}
+
+.divider span {
+  padding: 0 10px;
+  color: var(--ion-color-medium);
+  font-size: 14px;
+}
+</style>