diff --git a/frontend/src/components/log/container/index.vue b/frontend/src/components/log/container/index.vue
index fa0d12e43..d589a1df5 100644
--- a/frontend/src/components/log/container/index.vue
+++ b/frontend/src/components/log/container/index.vue
@@ -25,7 +25,15 @@
         </el-button>
     </div>
     <div class="log-container" :style="styleVars" ref="logContainer">
-        <CodemirrorPro v-model="logInfo" :lineWrapping="true" :heightDiff="230" :disabled="true"></CodemirrorPro>
+        <div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
+        <div
+            v-for="(log, index) in visibleLogs"
+            :key="startIndex + index"
+            class="log-item"
+            :style="{ top: `${(startIndex + index) * logHeight}px` }"
+        >
+            <hightlight :log="log" type="container"></hightlight>
+        </div>
     </div>
 </template>
 
@@ -36,6 +44,7 @@ import { dateFormatForName } from '@/utils/util';
 import { onUnmounted, reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
+import hightlight from '@/components/log/custom-hightlight/index.vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
@@ -63,6 +72,8 @@ const styleVars = computed(() => ({
 }));
 
 const logVisible = ref(false);
+const logContainer = ref<HTMLElement | null>(null);
+const logs = ref<string[]>([]);
 let eventSource: EventSource | null = null;
 const logSearch = reactive({
     isWatch: true,
@@ -71,7 +82,17 @@ const logSearch = reactive({
     tail: 100,
     compose: '',
 });
-const logInfo = ref<string>('');
+const logHeight = 20;
+const logCount = computed(() => logs.value.length);
+const totalHeight = computed(() => logHeight * logCount.value);
+const startIndex = ref(0);
+const containerHeight = ref(500);
+const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight) + 2);
+const visibleLogs = computed(() => {
+    const start = Math.max(0, startIndex.value - 1);
+    const end = startIndex.value + visibleCount.value + 1;
+    return logs.value.slice(start, end);
+});
 
 const timeOptions = ref([
     { label: i18n.global.t('commons.table.all'), value: 'all' },
@@ -114,7 +135,7 @@ const searchLogs = async () => {
     if (!logSearch.isWatch) {
         return;
     }
-    logInfo.value = '';
+    logs.value = [];
     let currentNode = globalStore.currentNode;
     let url = `/api/v2/containers/search/log?container=${logSearch.container}&since=${logSearch.mode}&tail=${logSearch.tail}&follow=${logSearch.isWatch}&operateNode=${currentNode}`;
     if (logSearch.compose !== '') {
@@ -122,7 +143,13 @@ const searchLogs = async () => {
     }
     eventSource = new EventSource(url);
     eventSource.onmessage = (event: MessageEvent) => {
-        logInfo.value += event.data.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, '') + '\n';
+        const data = event.data;
+        logs.value.push(data);
+        nextTick(() => {
+            if (logContainer.value) {
+                logContainer.value.scrollTop = logContainer.value.scrollHeight;
+            }
+        });
     };
     eventSource.onerror = (event: MessageEvent) => {
         stopListening();
@@ -172,23 +199,49 @@ const onClean = async () => {
         cancelButtonText: i18n.global.t('commons.button.cancel'),
         type: 'info',
     }).then(async () => {
+        console.log(logSearch);
         await cleanContainerLog(logSearch.container);
-        await searchLogs();
+        searchLogs();
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
     });
 };
 
+const handleScroll = () => {
+    if (logContainer.value) {
+        const scrollTop = logContainer.value.scrollTop;
+        startIndex.value = Math.max(0, Math.floor(scrollTop / logHeight) - 1);
+    }
+};
+
 onUnmounted(() => {
     handleClose();
+    if (logContainer.value) {
+        logContainer.value.removeEventListener('scroll', handleScroll);
+    }
 });
 
+const resizeObserver = ref<ResizeObserver | null>(null);
+
 onMounted(() => {
     logSearch.container = props.container;
     logSearch.compose = props.compose;
+
     logVisible.value = true;
     logSearch.tail = 100;
     logSearch.mode = 'all';
     logSearch.isWatch = true;
+
+    nextTick(() => {
+        if (logContainer.value) {
+            containerHeight.value = logContainer.value.clientHeight;
+            logContainer.value.addEventListener('scroll', handleScroll);
+            resizeObserver.value = new ResizeObserver((entries) => {
+                containerHeight.value = entries[0].contentRect.height;
+            });
+            resizeObserver.value.observe(logContainer.value);
+        }
+    });
+
     searchLogs();
 });
 </script>
@@ -211,7 +264,8 @@ onMounted(() => {
 }
 
 .log-container {
-    overflow-y: hidden;
+    height: calc(100vh - var(--custom-height, 320px));
+    overflow-y: auto;
     overflow-x: auto;
     position: relative;
     background-color: #1e1e1e;
diff --git a/frontend/src/components/log/file/index.vue b/frontend/src/components/log/file/index.vue
index 7d730a1df..8679a09fa 100644
--- a/frontend/src/components/log/file/index.vue
+++ b/frontend/src/components/log/file/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-loading="firstLoading">
         <div v-if="defaultButton">
-            <el-checkbox border v-model="tailLog" class="float-left" @change="changeTail()" v-if="showTail">
+            <el-checkbox border v-model="tailLog" class="float-left" @change="changeTail(false)" v-if="showTail">
                 {{ $t('commons.button.watch') }}
             </el-checkbox>
             <el-button
@@ -17,23 +17,26 @@
                 <slot name="button"></slot>
             </span>
         </div>
-        <div class="log-container" ref="logContainer" :style="containerStyle">
-            <CodemirrorPro
-                v-if="true"
-                v-model="logInfo"
-                :lineWrapping="true"
-                :heightDiff="330"
-                :disabled="true"
-            ></CodemirrorPro>
+        <div class="log-container" ref="logContainer" @scroll="onScroll" :style="containerStyle">
+            <div class="log-spacer" :style="{ height: `${totalHeight}px` }"></div>
+            <div
+                v-for="(log, index) in visibleLogs"
+                :key="startIndex + index"
+                class="log-item"
+                :style="{ top: `${(startIndex + index) * logHeight}px` }"
+            >
+                <hightlight :log="log" :type="config.colorMode ?? 'nginx'"></hightlight>
+            </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { downloadFile } from '@/utils/util';
 import { readByLine } from '@/api/modules/files';
 import { GlobalStore } from '@/store';
 import bus from '@/global/bus';
+import hightlight from '@/components/log/custom-hightlight/index.vue';
 const globalStore = GlobalStore();
 
 interface LogProps {
@@ -126,10 +129,34 @@ const minPage = ref(0);
 let timer: NodeJS.Timer | null = null;
 const logPath = ref('');
 
-const logInfo = ref<string>('');
 const firstLoading = ref(false);
 const logs = ref<string[]>([]);
+const logContainer = ref<HTMLElement | null>(null);
+const logHeight = 20;
 const logCount = ref(0);
+const totalHeight = computed(() => logHeight * logCount.value);
+const containerHeight = ref(500);
+const visibleCount = computed(() => Math.ceil(containerHeight.value / logHeight));
+const startIndex = ref(0);
+
+const visibleLogs = computed(() => {
+    return logs.value.slice(startIndex.value, startIndex.value + visibleCount.value);
+});
+
+const onScroll = () => {
+    if (logContainer.value) {
+        const scrollTop = logContainer.value.scrollTop;
+        if (scrollTop == 0) {
+            readReq.page = minPage.value - 1;
+            if (readReq.page < 1) {
+                return;
+            }
+            minPage.value = readReq.page;
+            getContent(true);
+        }
+        startIndex.value = Math.floor(scrollTop / logHeight);
+    }
+};
 
 const changeLoading = () => {
     loading.value = !loading.value;
@@ -142,8 +169,10 @@ const onDownload = async () => {
     changeLoading();
 };
 
-const changeTail = () => {
-    tailLog.value = !tailLog.value;
+const changeTail = (fromOutSide: boolean) => {
+    if (fromOutSide) {
+        tailLog.value = !tailLog.value;
+    }
     if (tailLog.value) {
         timer = setInterval(() => {
             getContent(false);
@@ -183,7 +212,7 @@ const getContent = async (pre: boolean) => {
         isLoading.value = false;
         firstLoading.value = false;
     }
-    logInfo.value = res.data.content;
+
     logPath.value = res.data.path;
     firstLoading.value = false;
 
@@ -226,6 +255,15 @@ const getContent = async (pre: boolean) => {
                 logs.value = pre ? [...newLogs, ...logs.value] : [...logs.value, ...newLogs];
             }
         }
+
+        nextTick(() => {
+            if (pre) {
+                logContainer.value.scrollTop = 2000;
+            } else {
+                logContainer.value.scrollTop = totalHeight.value;
+                containerHeight.value = logContainer.value.getBoundingClientRect().height;
+            }
+        });
     }
 
     logCount.value = logs.value.length;
@@ -279,7 +317,7 @@ const init = async () => {
         tailLog.value = false;
     }
     if (tailLog.value) {
-        changeTail();
+        changeTail(false);
     }
     readReq.latest = true;
     await getContent(false);
@@ -293,6 +331,12 @@ onMounted(async () => {
     logs.value = [];
     firstLoading.value = true;
     await init();
+    nextTick(() => {
+        if (logContainer.value) {
+            logContainer.value.scrollTop = totalHeight.value;
+            containerHeight.value = logContainer.value.getBoundingClientRect().height;
+        }
+    });
 });
 
 onUnmounted(() => {
@@ -303,7 +347,7 @@ defineExpose({ changeTail, onDownload, clearLog });
 </script>
 <style lang="scss" scoped>
 .log-container {
-    overflow-y: hidden;
+    overflow-y: auto;
     overflow-x: auto;
     position: relative;
     background-color: var(--panel-logs-bg-color);
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index c8437beff..c87ce0cc3 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -351,7 +351,7 @@
         <PruneDialog @search="search" ref="dialogPruneRef" />
 
         <RenameDialog @search="search" ref="dialogRenameRef" />
-        <ContainerLogDialog ref="dialogContainerLogRef" :highlightDiff="210" />
+        <ContainerLogDialog ref="dialogContainerLogRef" :highlightDiff="235" />
         <UpgradeDialog @search="search" ref="dialogUpgradeRef" />
         <CommitDialog @search="search" ref="dialogCommitRef" />
         <MonitorDialog ref="dialogMonitorRef" />