diff --git a/components/i/search/title.vue b/components/i/search/title.vue
new file mode 100644
index 0000000000000000000000000000000000000000..201eb5153dc0d69fa4b265f2875358e2674e694a
--- /dev/null
+++ b/components/i/search/title.vue
@@ -0,0 +1,26 @@
+<template>
+    <component :is="titleTag" :class="{ 'text-3xl': titleTag !== 'div' }" :id="id">{{ title }}</component>
+</template>
+<script setup>
+const props = defineProps({
+    as: {
+        type: String,
+        default: 'h2'
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    id: {
+        type: [String, Number],
+        default: ''
+    }
+})
+const titleTag = computed(() => {
+    let tag = props.as
+    const title = props.title
+    if (title.indexOf('\n') > -1) tag = 'div'
+    else if (title.length > 50) tag = 'div'
+    return tag
+})
+</script>
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index ee13415952a67401209fc5aef184d9299103495e..04ee43b6dcc362c9701dc6c60fe8427f2f65abe1 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -5,7 +5,7 @@
             <iSearchHeader ref="refHeader" :query="state.title" :is-public="state.isPublic" @update-query="handleUpdateQuery" />
             <div class="container min-h-svh max-w-screen-lg flex flex-col space-y-6 p-6 mb-6 pb-0" id="scrollElement">
                 <div class="grid">
-                    <h1 class="text-3xl">{{ state.query }}</h1>
+                    <ISearchTitle as="h1" :title="state.query" />
                 </div>
                 <section class="flex items-center gap-2" v-if="state.repo">
                     <UIcon name="i-simple-icons-github" />
@@ -13,7 +13,7 @@
                 </section>
                 <template v-for="(item, index) in data" :key="index">
                     <div class="grid" v-if="index !== 0">
-                        <h2 class="text-3xl" :id="index + 1">{{ item.question }}</h2>
+                        <ISearchTitle as="h2" :title="item.question" :id="index + 1" />
                     </div>
                     <ISearchContent
                         :item="item"
@@ -26,7 +26,7 @@
                     <UDivider v-if="data.length !== index + 1 || askingData.question" class="pt-3 pb-2" />
                 </template>
                 <div class="grid" v-if="data.length > 0 && askingData.question">
-                    <h2 class="text-3xl" :id="data.length + 1">{{ askingData.question }}</h2>
+                    <ISearchTitle as="h2" :title="askingData.question" :id="data.length + 1" />
                 </div>
                 <ISearchContent
                     v-if="askingData.question"