diff --git a/frontend/src/views/chat/component/SQLComponent.vue b/frontend/src/views/chat/component/SQLComponent.vue
new file mode 100644
index 0000000..02b1c4e
--- /dev/null
+++ b/frontend/src/views/chat/component/SQLComponent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import 'highlight.js/styles/github.min.css'
+import 'github-markdown-css/github-markdown-light.css'
+import hljs from 'highlight.js'
+
+defineProps<{
+  sql: string
+}>()
+</script>
+
+<template>
+  <pre class="hljs">
+    <div
+      v-dompurify-html="hljs.highlight(sql, { language: 'sql', ignoreIllegals: true }).value"
+    ></div>
+  </pre>
+</template>
+
+<style lang="less">
+.hljs {
+  overflow: auto;
+  padding: 1rem;
+  display: block;
+
+  background: rgba(245, 246, 247, 1);
+  border: 1px solid rgba(222, 224, 227, 1);
+  border-radius: 6px;
+}
+</style>