diff --git a/.gitignore b/.gitignore
index 7e4dd63c..277d7b93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,6 @@
 .vscode/
 .DS_Store
 node_modules/
-logs/
 tmp/
 _book/
 *.lock
diff --git a/frontend/crawlab-ui/src/components/ui/logs/LogsView.vue b/frontend/crawlab-ui/src/components/ui/logs/LogsView.vue
new file mode 100644
index 00000000..8f19a0ea
--- /dev/null
+++ b/frontend/crawlab-ui/src/components/ui/logs/LogsView.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  logs?: string[];
+}>();
+
+const content = computed(() => {
+  const { logs } = props;
+  const data: string[] = [];
+  logs?.forEach(l => {
+    l.trim()
+      .split(/[\n\r]/)
+      .map(line => {
+        data.push(line.trim());
+      });
+  });
+  return data.join('\n');
+});
+
+const logsViewRef = ref<HTMLDivElement>();
+
+const scrollToBottom = () => {
+  logsViewRef.value?.scrollTo(0, logsViewRef.value?.scrollHeight);
+};
+
+defineExpose({
+  scrollToBottom,
+});
+defineOptions({ name: 'ClLogsView' });
+</script>
+
+<template>
+  <div class="logs-view" ref="logsViewRef">
+    <pre>{{ content }}</pre>
+  </div>
+</template>
+
+<style scoped>
+.logs-view {
+  border: 1px solid rgb(244, 244, 245);
+  padding: 10px;
+  overflow: auto;
+  min-height: 480px;
+  max-height: 560px;
+}
+</style>