diff --git a/package.json b/package.json
index e652c44..f35df11 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "publisher": "zhangmo8",
   "name": "git-panel",
   "displayName": "Git Panel",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "packageManager": "pnpm@9.7.1",
   "description": "",
diff --git a/src/constant.ts b/src/constant.ts
index 4b779d4..8e14a8f 100644
--- a/src/constant.ts
+++ b/src/constant.ts
@@ -2,6 +2,7 @@
 export const WEBVIEW_CHANNEL = {
   GET_HISTORY: 'get-history',
   SHOW_COMMIT_DETAILS: 'show-commit-details',
+  SHOW_CHANGES_PANEL: 'show-changes-panel',
 } as const
 
 // vscode to webview channel
diff --git a/src/git/index.ts b/src/git/index.ts
index 6d6ef25..710eecc 100644
--- a/src/git/index.ts
+++ b/src/git/index.ts
@@ -36,7 +36,6 @@ export class GitService {
     try {
       const logResult = await this.git.log([
         '--all',
-        '--max-count=100',
         '--decorate=full',
       ]) as ExtendedLogResult
 
diff --git a/src/views/diff/DiffTreeView.ts b/src/views/diff/DiffTreeView.ts
index aa5a01a..ca172f5 100644
--- a/src/views/diff/DiffTreeView.ts
+++ b/src/views/diff/DiffTreeView.ts
@@ -85,7 +85,7 @@ export class DiffTreeView implements TreeDataProvider<CommitNode> {
 
       this.fileTreeProvider.refresh(commitDetails.hash)
 
-      const changedFiles = await this.fileTreeProvider.getChildren()
+      const { files, total } = await this.fileTreeProvider.getChildren()
 
       return [
         new CommitNode(
@@ -108,10 +108,10 @@ export class DiffTreeView implements TreeDataProvider<CommitNode> {
         ),
         new CommitNode(
           'Changed Files',
-          `${changedFiles.length} Files Changed`,
-          changedFiles.length > 0 ? TreeItemCollapsibleState.Expanded : TreeItemCollapsibleState.None,
+          `${total} Files Changed`,
+          total > 0 ? TreeItemCollapsibleState.Expanded : TreeItemCollapsibleState.None,
           'files',
-          changedFiles,
+          files,
         ),
       ]
     }
diff --git a/src/views/diff/FileTreeView.ts b/src/views/diff/FileTreeView.ts
index bc9e4cd..95d8a2f 100644
--- a/src/views/diff/FileTreeView.ts
+++ b/src/views/diff/FileTreeView.ts
@@ -93,15 +93,18 @@ export class FileTreeView {
     return Array.from(root.values())
   }
 
-  async getChildren(): Promise<Array<FileNode | FolderNode>> {
+  async getChildren(): Promise<{ files: Array<FileNode | FolderNode>, total: number }> {
     if (!this.commitHash)
-      return []
+      return { files: [], total: 0 }
 
     try {
       const commit = this.storageService.getCommit(this.commitHash)
 
       if (commit?.files) {
-        return this.buildFileTree(commit.files)
+        return {
+          files: this.buildFileTree(commit.files),
+          total: commit.files.length,
+        }
       }
 
       const showResult = await this.gitService.git.show([
@@ -138,11 +141,14 @@ export class FileTreeView {
 
       this.storageService.updateCommitFiles(this.commitHash, fileChanges)
 
-      return this.buildFileTree(fileChanges)
+      return {
+        files: this.buildFileTree(fileChanges),
+        total: fileChanges.length,
+      }
     }
     catch (error) {
       console.error('Error getting commit files:', error)
-      return []
+      return { files: [], total: 0 }
     }
   }
 }
diff --git a/src/views/history/App.vue b/src/views/history/App.vue
index c591db1..76bf1e2 100644
--- a/src/views/history/App.vue
+++ b/src/views/history/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 
-import CommitTable from './components/CommitTable.vue'
+import CommitTable from './components/CommitTable/index.vue'
 
 import { CHANNEL, WEBVIEW_CHANNEL } from '@/constant'
 
diff --git a/src/views/history/components/CommitTable.vue b/src/views/history/components/CommitTable.vue
deleted file mode 100644
index 88d299d..0000000
--- a/src/views/history/components/CommitTable.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import dayjs from 'dayjs'
-
-import type { Commit } from '@/git'
-import { WEBVIEW_CHANNEL } from '@/constant'
-
-const props = defineProps<{
-  commits: Commit[]
-}>()
-
-// interface CommitNode {
-//   commit: Commit
-//   column: number
-//   parents: { hash: string, fromColumn: number, toColumn: number }[]
-//   color: string
-//   branchName?: string
-//   isHead?: boolean
-//   isBranch?: boolean
-//   isMerge?: boolean
-// }
-
-const ITEMS_PER_PAGE = 45
-const currentPage = ref(1)
-const observer = ref<IntersectionObserver | null>(null)
-const loadingTriggerRef = ref<HTMLElement | null>(null)
-
-function handleCommitClick(commit: Commit & { date: string }) {
-  try {
-    if (window.vscode) {
-      window.vscode.postMessage({
-        command: WEBVIEW_CHANNEL.SHOW_COMMIT_DETAILS,
-        commitHash: commit.hash,
-      })
-    }
-  }
-  catch (error) {
-    console.error('Error sending commit details:', error)
-  }
-}
-
-// Calculate branch positions and paths
-// const COLUMN_WIDTH = 14
-// const DOT_SIZE = 6
-// const BRANCH_COLORS = [
-//   'var(--vscode-charts-blue)',
-//   'var(--vscode-charts-red)',
-//   'var(--vscode-charts-yellow)',
-//   'var(--vscode-charts-orange)',
-//   'var(--vscode-charts-purple)',
-//   'var(--vscode-charts-green)',
-// ]
-
-const graphData = computed(() => {
-  return (props.commits || []).map(commit => ({
-    ...commit,
-    date: dayjs(commit.date).format('YYYY-MM-DD HH:mm'),
-  }))
-})
-
-const visibleCommits = computed(() => {
-  const end = currentPage.value * ITEMS_PER_PAGE
-  return graphData.value.slice(0, end)
-})
-
-onMounted(() => {
-  observer.value = new IntersectionObserver((entries) => {
-    const target = entries[0]
-    if (target.isIntersecting && currentPage.value * ITEMS_PER_PAGE < graphData.value.length) {
-      currentPage.value++
-    }
-  })
-
-  if (loadingTriggerRef.value) {
-    observer.value.observe(loadingTriggerRef.value)
-  }
-})
-
-onUnmounted(() => {
-  if (observer.value) {
-    observer.value.disconnect()
-  }
-})
-</script>
-
-<template>
-  <div class="git-graph">
-    <table>
-      <thead>
-        <tr>
-          <th class="hash-col">
-            CommitId
-          </th>
-          <th class="message-col">
-            Message
-          </th>
-          <th class="stats-col">
-            Changes
-          </th>
-          <th>Author</th>
-          <th>Date</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="commit in visibleCommits"
-          :key="commit.hash"
-          class="commit-row"
-          @click="handleCommitClick(commit)"
-        >
-          <td class="hash-col">
-            {{ commit.hash.substring(0, 7) }}
-          </td>
-          <td class="message-col">
-            {{ commit.message }}
-          </td>
-          <td class="stats-col">
-            <span v-if="commit.stats" class="commit-stats">
-              <span class="files">{{ commit.stats.files }} files</span>
-              <span v-if="commit.stats.additions" class="additions">+{{ commit.stats.additions }}</span>
-              <span v-if="commit.stats.deletions" class="deletions">-{{ commit.stats.deletions }}</span>
-            </span>
-          </td>
-          <td class="author">
-            {{ commit.authorName }}
-          </td>
-          <td class="date">
-            {{ commit.date }}
-          </td>
-        </tr>
-        <tr ref="loadingTriggerRef" class="loading-trigger">
-          <td colspan="5" class="loading-cell">
-            <div v-if="visibleCommits.length < graphData.length" class="loading-text">
-              Loading more commits...
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style scoped>
-.git-graph {
-  width: 100%;
-  overflow: auto;
-  font-family: var(--vscode-editor-font-family);
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--vscode-font-size);
-  color: var(--vscode-foreground);
-}
-
-th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  text-align: left;
-  border-bottom: 1px solid var(--vscode-panel-border);
-  background-color: var(--vscode-sideBar-background);
-}
-
-td {
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--vscode-panel-border);
-  vertical-align: middle;
-}
-
-.graph-col {
-  padding: 0;
-}
-
-.hash-col {
-  width: 80px;
-  padding: 4px 8px;
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--vscode-gitDecoration-addedResourceForeground);
-}
-
-td.hash-col:hover {
-  text-decoration: underline;
-}
-
-.message-col {
-  min-width: 200px;
-  max-width: 400px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.author-col {
-  width: 120px;
-}
-
-.date-col {
-  width: 150px;
-}
-
-.commit-stats {
-  display: flex;
-  gap: 8px;
-  font-size: 12px;
-}
-
-.additions {
-  color: var(--vscode-gitDecoration-addedResourceForeground);
-}
-
-.deletions {
-  color: var(--vscode-gitDecoration-deletedResourceForeground);
-}
-
-.author {
-  white-space: nowrap;
-}
-
-.date {
-  white-space: nowrap;
-  color: var(--vscode-descriptionForeground);
-}
-
-tr:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.loading-cell {
-  text-align: center;
-  padding: 8px;
-  color: var(--vscode-descriptionForeground);
-}
-
-.loading-text {
-  font-size: 12px;
-}
-
-/* Ensure the graph lines remain visible when hovering */
-tr:hover .commit-line {
-  opacity: 0.8;
-}
-</style>
diff --git a/src/views/history/components/CommitTable/ColumnHeader.vue b/src/views/history/components/CommitTable/ColumnHeader.vue
new file mode 100644
index 0000000..956a292
--- /dev/null
+++ b/src/views/history/components/CommitTable/ColumnHeader.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { defineModel, ref } from 'vue'
+import ResizeHandle from './ResizeHandle.vue'
+
+interface ColumnWidths {
+  hash: number
+  message: number
+  stats: number
+  author: number
+  date: number
+}
+
+const modelValue = defineModel<ColumnWidths>()
+const isDragging = ref(false)
+const currentColumn = ref('')
+const startX = ref(0)
+const startWidth = ref(0)
+
+function handleDragStart(e: MouseEvent, column: string) {
+  e.preventDefault()
+  e.stopPropagation()
+
+  isDragging.value = true
+  currentColumn.value = column
+  startX.value = e.clientX
+  startWidth.value = modelValue.value[column]
+
+  document.addEventListener('mousemove', handleDragging, { passive: false })
+  document.addEventListener('mouseup', handleDragEnd, { once: true })
+  document.addEventListener('mouseleave', handleDragEnd, { once: true })
+
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = 'col-resize'
+}
+
+function handleDragging(e: MouseEvent) {
+  if (!isDragging.value) {
+    handleDragEnd()
+    return
+  }
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  const diff = e.clientX - startX.value
+  const newWidth = Math.max(100, startWidth.value + diff)
+
+  modelValue.value[currentColumn.value] = newWidth
+}
+
+function handleDragEnd() {
+  if (!isDragging.value)
+    return
+
+  isDragging.value = false
+  currentColumn.value = ''
+
+  document.removeEventListener('mousemove', handleDragging)
+  document.removeEventListener('mouseup', handleDragEnd)
+  document.removeEventListener('mouseleave', handleDragEnd)
+
+  document.body.style.userSelect = ''
+  document.body.style.cursor = ''
+}
+</script>
+
+<template>
+  <li class="commit-header">
+    <span class="hash-col column-header" :style="{ width: `${modelValue.hash}px` }">
+      CommitId
+      <ResizeHandle :is-active="currentColumn === 'hash'" @mousedown="handleDragStart($event, 'hash')" />
+    </span>
+    <span class="column-header" :style="{ width: `${modelValue.message}px` }">
+      Message
+      <ResizeHandle :is-active="currentColumn === 'message'" @mousedown="handleDragStart($event, 'message')" />
+    </span>
+    <span class="column-header" :style="{ width: `${modelValue.stats}px` }">
+      Changes
+      <ResizeHandle :is-active="currentColumn === 'stats'" @mousedown="handleDragStart($event, 'stats')" />
+    </span>
+    <span class="column-header" :style="{ width: `${modelValue.author}px` }">
+      Author
+      <ResizeHandle :is-active="currentColumn === 'author'" @mousedown="handleDragStart($event, 'author')" />
+    </span>
+    <span class="column-header">
+      Date
+    </span>
+  </li>
+</template>
+
+<style scoped>
+.commit-header {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  background-color: var(--vscode-sideBar-background);
+  border-bottom: 1px solid var(--vscode-panel-border);
+  font-weight: bold;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 0px;
+  z-index: 2;
+}
+
+.column-header {
+  user-select: none;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+}
+
+.hash-col {
+  color: var(--vscode-gitDecoration-addedResourceForeground);
+}
+</style>
diff --git a/src/views/history/components/CommitTable/ListItem.vue b/src/views/history/components/CommitTable/ListItem.vue
new file mode 100644
index 0000000..05c536f
--- /dev/null
+++ b/src/views/history/components/CommitTable/ListItem.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { WEBVIEW_CHANNEL } from '@/constant'
+import type { Commit } from '@/git'
+
+const props = defineProps<{
+  commit: Commit
+  columnWidths: Record<string, number>
+}>()
+
+function handleCommitClick() {
+  try {
+    if (window.vscode) {
+      window.vscode.postMessage({
+        command: WEBVIEW_CHANNEL.SHOW_COMMIT_DETAILS,
+        commitHash: props.commit.hash,
+      })
+    }
+  }
+  catch (error) {
+    console.error('Error sending commit details:', error)
+  }
+}
+
+function handleDoubleClick() {
+  try {
+    if (window.vscode) {
+      window.vscode.postMessage({
+        command: WEBVIEW_CHANNEL.SHOW_CHANGES_PANEL,
+      })
+    }
+  }
+  catch (error) {
+    console.error('Error sending commit details:', error)
+  }
+}
+</script>
+
+<template>
+  <li
+    class="commit-row" @click="handleCommitClick"
+    @dblclick="handleDoubleClick"
+  >
+    <span class="hash-col" :style="{ width: `${columnWidths.hash}px` }">{{ commit.hash.substring(0, 7) }}</span>
+    <span :style="{ width: `${columnWidths.message}px` }">{{ commit.message }}</span>
+    <span :style="{ width: `${columnWidths.stats}px` }">
+      <span v-if="commit.stats" class="commit-stats">
+        <span class="files">{{ commit.stats.files }} files</span>
+        <span v-if="commit.stats.additions" class="additions">+{{ commit.stats.additions }}</span>
+        <span v-if="commit.stats.deletions" class="deletions">-{{ commit.stats.deletions }}</span>
+      </span>
+    </span>
+    <span :style="{ width: `${columnWidths.author}px` }">{{ commit.authorName }}</span>
+    <span class="date" :style="{ width: `${columnWidths.date}px` }">{{ commit.date }}</span>
+  </li>
+</template>
+
+<style scoped>
+.commit-row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--vscode-panel-border);
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+
+}
+
+.commit-row:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.hash-col {
+  color: var(--vscode-gitDecoration-addedResourceForeground);
+}
+
+.date {
+  padding-right: 16px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.commit-stats {
+  display: inline-flex;
+  gap: 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.additions {
+  color: var(--vscode-gitDecoration-addedResourceForeground);
+}
+
+.deletions {
+  color: var(--vscode-gitDecoration-deletedResourceForeground);
+}
+</style>
diff --git a/src/views/history/components/CommitTable/ResizeHandle.vue b/src/views/history/components/CommitTable/ResizeHandle.vue
new file mode 100644
index 0000000..b2e4ac1
--- /dev/null
+++ b/src/views/history/components/CommitTable/ResizeHandle.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  isActive: boolean
+}>()
+</script>
+
+<template>
+  <div class="resize-handle" :class="{ active: props.isActive }" />
+</template>
+
+<style scoped>
+.resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  cursor: col-resize;
+  background: var(--vscode-scrollbarSlider-hoverBackground);
+  opacity: 0.6;
+  z-index: 1;
+  transition: background-color 0.1s ease;
+}
+
+.resize-handle:hover {
+  background: var(--vscode-activityBar-activeBorder);
+  opacity: 0.8;
+}
+
+.resize-handle.active {
+  background: var(--vscode-activityBar-activeBorder);
+  opacity: 1;
+}
+</style>
diff --git a/src/views/history/components/CommitTable/index.vue b/src/views/history/components/CommitTable/index.vue
new file mode 100644
index 0000000..88f01b6
--- /dev/null
+++ b/src/views/history/components/CommitTable/index.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import dayjs from 'dayjs'
+
+import ColumnHeader from './ColumnHeader.vue'
+import ListItem from './ListItem.vue'
+
+import type { Commit } from '@/git'
+
+const props = defineProps<{
+  commits: Commit[]
+}>()
+
+const ITEMS_PER_PAGE = 45
+const currentPage = ref(1)
+const observer = ref<IntersectionObserver | null>(null)
+const loadingTriggerRef = ref<HTMLElement | null>(null)
+
+const columnWidths = ref({
+  hash: 80,
+  message: 400,
+  stats: 140,
+  author: 120,
+  date: 160,
+})
+
+// Calculate branch positions and paths
+// const COLUMN_WIDTH = 14
+// const DOT_SIZE = 6
+// const BRANCH_COLORS = [
+//   'var(--vscode-charts-blue)',
+//   'var(--vscode-charts-red)',
+//   'var(--vscode-charts-yellow)',
+//   'var(--vscode-charts-orange)',
+//   'var(--vscode-charts-purple)',
+//   'var(--vscode-charts-green)',
+// ]
+
+const graphData = computed(() => {
+  return (props.commits || []).map(commit => ({
+    ...commit,
+    date: dayjs(commit.date).format('YYYY-MM-DD HH:mm'),
+  }))
+})
+
+const visibleCommits = computed(() => {
+  const end = currentPage.value * ITEMS_PER_PAGE
+  return graphData.value.slice(0, end)
+})
+
+onMounted(() => {
+  observer.value = new IntersectionObserver((entries) => {
+    const target = entries[0]
+    if (target.isIntersecting && currentPage.value * ITEMS_PER_PAGE < graphData.value.length) {
+      currentPage.value++
+    }
+  })
+
+  if (loadingTriggerRef.value) {
+    observer.value.observe(loadingTriggerRef.value)
+  }
+})
+
+onUnmounted(() => {
+  if (observer.value) {
+    observer.value.disconnect()
+  }
+})
+</script>
+
+<template>
+  <div class="git-graph">
+    <ul class="commit-list">
+      <ColumnHeader v-model="columnWidths" />
+      <ListItem v-for="commit in visibleCommits" :key="commit.hash" :commit="commit" :column-widths="columnWidths" />
+      <li ref="loadingTriggerRef" class="loading-trigger">
+        <div v-if="visibleCommits.length < graphData.length" class="loading-text">
+          Loading more commits...
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.git-graph {
+  width: 100%;
+  overflow: auto;
+  font-family: var(--vscode-editor-font-family);
+}
+
+.commit-list {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--vscode-font-size);
+  color: var(--vscode-foreground);
+  min-width: min-content;
+}
+
+.loading-trigger {
+  padding: 8px;
+  text-align: center;
+}
+
+.loading-text {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+}
+</style>
diff --git a/src/views/webview.ts b/src/views/webview.ts
index 48961fa..6e30f64 100644
--- a/src/views/webview.ts
+++ b/src/views/webview.ts
@@ -86,7 +86,6 @@ export class GitPanelViewProvider implements WebviewViewProvider {
         case WEBVIEW_CHANNEL.SHOW_COMMIT_DETAILS:
           try {
             this.gitChangesProvider.refresh(message.commitHash)
-            await commands.executeCommand('git.showCommitDetails', message.commitHash)
           }
           catch (error) {
             webviewView.webview.postMessage({
@@ -95,6 +94,9 @@ export class GitPanelViewProvider implements WebviewViewProvider {
             })
           }
           break
+        case WEBVIEW_CHANNEL.SHOW_CHANGES_PANEL:
+            await commands.executeCommand('git-panel.changes.focus')
+          break
 
         case 'clearHistory':
           this.storageService.clearCommits()