diff --git a/.gitignore b/.gitignore
index 049cd11..0e784d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,7 +16,6 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f302814
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{ "files.eol": "\n" }
diff --git a/docs/style.css b/docs/style.css
index aabaa70..3af5eab 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -641,6 +641,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
diff --git a/package.json b/package.json
index 5715b20..0e4a937 100644
--- a/package.json
+++ b/package.json
@@ -22,13 +22,17 @@
   "dependencies": {
     "@vueuse/core": "^7.5.3",
     "core-js": "^3.6.5",
-    "localforage": "^1.10.0",
     "electron-log": "^4.4.4",
     "electron-simple-updater": "^2.0.11",
     "electron-updater": "^4.6.1",
+    "gitdiff-parser": "^0.2.2",
+    "localforage": "^1.10.0",
+    "prismjs": "^1.27.0",
     "update-electron-app": "^2.0.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.12"
+    "vue-highlightjs": "^1.3.3",
+    "vue-router": "^4.0.12",
+    "vue3-highlightjs": "^1.0.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/composables/useGit.js b/src/composables/useGit.js
index 0febcb0..f6c1dcf 100644
--- a/src/composables/useGit.js
+++ b/src/composables/useGit.js
@@ -1,4 +1,5 @@
 import { ipcRenderer } from 'electron';
+import gitDiffParser from 'gitdiff-parser';
 import { computed, ref } from 'vue';
 
 import { useFolder } from './useFolder';
@@ -13,6 +14,7 @@ const offset = computed(() => limit.value * index.value);
 const currentBranchCommits = ref(0);
 const files = ref([]);
 const commitDetails = ref([]);
+const fileDetails = ref([]);
 
 const headCommitSha = computed({
   get: () => commits.value.find((commit) => commit.isHead)?.sha,
@@ -77,6 +79,18 @@ const getDiffCommit = async (commitSha, stat = true) => {
     stat
   );
 };
+const getFileDetails = async (commitSha, prevShaCommit, fileName) => {
+  const data = await ipcRenderer.invoke(
+    'getFileDetails-event',
+    folderPath.value,
+    commitSha,
+    prevShaCommit,
+    fileName
+  );
+  console.log(data);
+
+  fileDetails.value = gitDiffParser.parse(data);
+};
 
 export const useGit = () => ({
   getCommits,
@@ -85,6 +99,7 @@ export const useGit = () => ({
   checkoutCommit,
   getBranchsInfo,
   getDiffCommit,
+  getFileDetails,
   commits,
   branchs,
   headCommitSha,
@@ -92,5 +107,6 @@ export const useGit = () => ({
   currentBranchCommits,
   files,
   commitDetails,
+  fileDetails,
   resetState,
 });
diff --git a/src/events/GitReader.event.js b/src/events/GitReader.event.js
index 555b148..d624c1c 100644
--- a/src/events/GitReader.event.js
+++ b/src/events/GitReader.event.js
@@ -1,4 +1,5 @@
 import {
+  GET_FILE_DETAILS_EVENT,
   GET_GIT_BRANCHS_EVENT,
   GET_GIT_BRANCHS_INFO_EVENT,
   GET_GIT_DIFF_EVENT,
@@ -43,4 +44,16 @@ export default [
       return details;
     },
   },
+  {
+    name: GET_FILE_DETAILS_EVENT,
+    fct: async (event, folderPath, sha, prevSha, fileName) => {
+      const details = await gitReader.getFileDetails(
+        folderPath,
+        sha,
+        prevSha,
+        fileName
+      );
+      return details;
+    },
+  },
 ];
diff --git a/src/main.js b/src/main.js
index 556aa6b..f18e55c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,7 @@
+import 'highlight.js/styles/default.css';
+
 import { createApp } from 'vue';
+import VueHighlightJS from 'vue3-highlightjs';
 
 import DsButton from '@/components/DsButton.vue';
 
@@ -8,4 +11,5 @@ import router from './router';
 const app = createApp(App);
 app.component('DsButton', DsButton);
 app.use(router);
+app.use(VueHighlightJS);
 app.mount('#app');
diff --git a/src/modules/GitView/GitView.vue b/src/modules/GitView/GitView.vue
index be0b1ea..decf623 100644
--- a/src/modules/GitView/GitView.vue
+++ b/src/modules/GitView/GitView.vue
@@ -69,9 +69,9 @@ export default {
       headCommitSha,
       folderPath,
       files,
-      commitDetails,
       isDetailsOpened,
       currentBranchCommits,
+      commitDetails,
     };
   },
 };
diff --git a/src/modules/GitView/components/CommitDetails.vue b/src/modules/GitView/components/CommitDetails.vue
index aa0928f..f3fc34a 100644
--- a/src/modules/GitView/components/CommitDetails.vue
+++ b/src/modules/GitView/components/CommitDetails.vue
@@ -1,80 +1,46 @@
 <template>
   <div
     id="details-sidebar"
-    class="flex flex-col border-t-green-400 border-solid border-t-width-2"
+    class="flex flex-col border-t-green-400 border-solid border-t-width-2 overflow-auto p-2"
   >
-    <DsButton @click="closeDetail" class="mx-4 mt-4">Close</DsButton>
-    <p class="pt-4 px-4">{{ recap }}</p>
-    <ul
-      class="flex flex-col justify-center text-sm flex-shrink-0 p-4 flex-grow-0"
-    >
-      <li
-        class="flex items-center"
-        v-for="([filename, affected_line, stat], index) in files"
-        :key="index"
-      >
-        <span class="mr-2">{{ filename }}</span>
-        <span class="mr-2">{{ affected_line }}</span>
-        <span class="mb-0.5" v-html="formatStat(stat)"></span>
-      </li>
-    </ul>
+    <DsButton @click="closeDetail" class="mt-4">Close</DsButton>
+
+    <CommitDetailsFiles v-if="!isFileDetailsOpened" />
+    <CommitDetailsFile v-else />
   </div>
 </template>
 
 <script>
-import { computed, onMounted, watch } from 'vue';
-
-import { useGit } from '@/composables/useGit';
+import { watch } from 'vue';
 
 import { useGitView } from '../composables/useGitView';
+import CommitDetailsFile from './CommitDetailsFile.vue';
+import CommitDetailsFiles from './CommitDetailsFiles.vue';
 
 export default {
   name: 'CommitDetails',
-  props: {
-    details: {
-      type: Object,
-      required: true,
-    },
+
+  components: {
+    CommitDetailsFile,
+    CommitDetailsFiles,
   },
 
   emits: ['onClose'],
 
   setup(props, { emit }) {
-    const { getDiffCommit } = useGit();
-    const { shaCommit } = useGitView();
-
-    const recap = computed(() => props.details.recap);
-    const files = computed(() => props.details.files);
+    const { shaCommit, isFileDetailsOpened } = useGitView();
 
-    onMounted(() => {
-      getDiffCommit(shaCommit.value);
-    });
+    const closeDetail = () => {
+      emit('onClose');
+      isFileDetailsOpened.value = false;
+    };
 
-    watch(shaCommit, (newSha) => {
-      getDiffCommit(newSha);
+    watch(shaCommit, () => {
+      isFileDetailsOpened.value = false;
     });
 
-    const regex = /(\+*)(-*)/;
-    const formatStat = (stat) => {
-      if (stat) {
-        const match = stat.match(regex);
-        return (
-          '<span class="text-green-700 text-xl">' +
-          match[1] +
-          '</span>' +
-          ' <span class="text-red-700 text-xl tracking-2px">' +
-          match[2] +
-          '</span>'
-        );
-      }
-    };
-    const closeDetail = () => emit('onClose');
-
     return {
-      recap,
-      files,
-      formatStat,
-      getDiffCommit,
+      isFileDetailsOpened,
       closeDetail,
     };
   },
diff --git a/src/modules/GitView/components/CommitDetailsFile.vue b/src/modules/GitView/components/CommitDetailsFile.vue
new file mode 100644
index 0000000..16f63a9
--- /dev/null
+++ b/src/modules/GitView/components/CommitDetailsFile.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bg-gray-100 border-gray-200 rounded-lg border-width-2 mt-2 pb-2">
+    <div v-for="({ hunks }, fileKey) in fileDetails" :key="`${fileKey}-file`">
+      <div
+        v-for="({ content, changes }, hunkKey) in hunks"
+        :key="hunkKey"
+        class="text-xs"
+      >
+        <p class="text-gray-500 p-2">{{ content }}</p>
+        <div
+          v-for="(
+            {
+              content: lineContent,
+              isDelete,
+              isInsert,
+              isNormal,
+              lineNumber,
+              newLineNumber,
+              oldLineNumber,
+            },
+            lineKey
+          ) in changes"
+          :key="`${lineKey}-line`"
+          class="flex items-center h-6"
+          :class="[
+            {
+              'bg-red-100': isDelete,
+              'bg-green-100': isInsert,
+              'bg-white': isNormal,
+            },
+          ]"
+        >
+          <div
+            class="flex gap-1 text-center h-full items-center"
+            :class="[
+              {
+                'bg-red-200': isDelete,
+                'bg-green-200': isInsert,
+                'bg-white': isNormal,
+              },
+            ]"
+          >
+            <span class="min-w-10 block">{{ oldLineNumber }}</span>
+            <span class="min-w-10 block">{{
+              lineNumber ? lineNumber : newLineNumber
+            }}</span>
+          </div>
+          <span
+            :class="[
+              'font-bold block text-center min-w-4',
+              {
+                'text-red-500': isDelete,
+                'text-green-500': isInsert,
+              },
+            ]"
+            >{{ isDelete ? '-' : isInsert ? '+' : ' ' }}</span
+          >
+          <pre
+            class="flex-1"
+            v-highlightjs="lineContent"
+          ><code class="javascript bg-transparent"></code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import 'prismjs/themes/prism.css';
+
+import { onMounted, watch } from 'vue';
+
+import { useGit } from '@/composables/useGit';
+
+import { useGitView } from '../composables/useGitView';
+
+export default {
+  name: 'CommitDetailsFiles',
+
+  setup() {
+    const { getFileDetails, fileDetails } = useGit();
+    const { prevShaCommit, shaCommit, fileName } = useGitView();
+
+    onMounted(() => {
+      getFileDetails(shaCommit.value, prevShaCommit.value, fileName.value);
+    });
+
+    watch(shaCommit, (newSha) => {
+      getFileDetails(newSha, prevShaCommit.value, fileName.value);
+    });
+
+    return {
+      fileDetails,
+    };
+  },
+};
+</script>
diff --git a/src/modules/GitView/components/CommitDetailsFiles.vue b/src/modules/GitView/components/CommitDetailsFiles.vue
new file mode 100644
index 0000000..e808558
--- /dev/null
+++ b/src/modules/GitView/components/CommitDetailsFiles.vue
@@ -0,0 +1,73 @@
+<template>
+  <p class="pt-4 px-4">{{ recap }}</p>
+  <ul
+    class="flex flex-col justify-center text-sm flex-shrink-0 p-4 flex-grow-0"
+  >
+    <li
+      class="flex items-center"
+      v-for="([filename, affected_line, stat], index) in files"
+      @click="
+        () => {
+          isFileDetailsOpened = true;
+          fileName = filename;
+        }
+      "
+      :key="index"
+    >
+      <span class="mr-2">{{ filename }}</span>
+      <span class="mr-2">{{ affected_line }}</span>
+      <span class="mb-0.5" v-html="formatStat(stat)"></span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { computed, onMounted, watch } from 'vue';
+
+import { useGit } from '@/composables/useGit';
+
+import { useGitView } from '../composables/useGitView';
+
+export default {
+  name: 'CommitDetailsFiles',
+  setup() {
+    const { getDiffCommit, commitDetails } = useGit();
+    const { shaCommit, isFileDetailsOpened, fileName } = useGitView();
+
+    const recap = computed(() => commitDetails.value.recap);
+    const files = computed(() => commitDetails.value.files);
+
+    onMounted(() => {
+      getDiffCommit(shaCommit.value);
+    });
+
+    watch(shaCommit, (newSha) => {
+      getDiffCommit(newSha);
+    });
+
+    const regex = /(\+*)(-*)/;
+    const formatStat = (stat) => {
+      if (stat) {
+        const match = stat.match(regex);
+        return (
+          '<span class="text-green-700 text-xl">' +
+          match[1] +
+          '</span>' +
+          ' <span class="text-red-700 text-xl tracking-2px">' +
+          match[2] +
+          '</span>'
+        );
+      }
+    };
+
+    return {
+      recap,
+      files,
+      getDiffCommit,
+      formatStat,
+      isFileDetailsOpened,
+      fileName,
+    };
+  },
+};
+</script>
diff --git a/src/modules/GitView/components/CommitList.vue b/src/modules/GitView/components/CommitList.vue
index ef9f9ab..16651e1 100644
--- a/src/modules/GitView/components/CommitList.vue
+++ b/src/modules/GitView/components/CommitList.vue
@@ -11,6 +11,7 @@
         v-for="(commit, commitIndex) in commits"
         :key="commitIndex"
         :commit="commit"
+        :prev-commit="commitIndex - 1 >= 0 ? commits[commitIndex - 1] : null"
       />
     </div>
   </div>
diff --git a/src/modules/GitView/components/CommitModal.vue b/src/modules/GitView/components/CommitModal.vue
index 5aa0392..e9e6515 100644
--- a/src/modules/GitView/components/CommitModal.vue
+++ b/src/modules/GitView/components/CommitModal.vue
@@ -18,6 +18,8 @@
             () => {
               isDetailsOpened = true;
               shaCommit = sha;
+              prevShaCommit = prevSha;
+              isFileDetailsOpened = false;
             }
           "
           class="mb-4 mt-4"
@@ -45,6 +47,10 @@ export default {
       type: Object,
       required: true,
     },
+    prevCommit: {
+      type: Object,
+      required: true,
+    },
   },
 
   emits: ['onClose'],
@@ -52,11 +58,15 @@ export default {
   setup(props, { emit }) {
     const { checkoutCommit } = useGit();
 
-    const { isDetailsOpened, shaCommit } = useGitView();
+    const { isDetailsOpened, shaCommit, prevShaCommit, isFileDetailsOpened } =
+      useGitView();
 
     const author = computed(() => props.commit.author);
     const message = computed(() => props.commit.message);
     const sha = computed(() => props.commit.sha);
+    const prevSha = computed(() =>
+      props.prevCommit ? props.prevCommit.sha : null
+    );
 
     const modalContainer = ref(null);
     onClickOutside(modalContainer, () => emit('onClose'));
@@ -65,10 +75,13 @@ export default {
       author,
       message,
       sha,
+      prevSha,
       checkoutCommit,
       modalContainer,
       isDetailsOpened,
+      isFileDetailsOpened,
       shaCommit,
+      prevShaCommit,
     };
   },
 };
diff --git a/src/modules/GitView/components/CommitView.vue b/src/modules/GitView/components/CommitView.vue
index 89f9979..47aa47c 100644
--- a/src/modules/GitView/components/CommitView.vue
+++ b/src/modules/GitView/components/CommitView.vue
@@ -1,8 +1,23 @@
 <template>
   <div class="flex-col justify-center">
-    <CommitModal v-if="isOpen" :commit="commit" @on-close="isOpen = false" />
+    <CommitModal
+      v-if="isOpen"
+      :commit="commit"
+      :prev-commit="prevCommit"
+      @on-close="isOpen = false"
+    />
     <div
-      class="dot-wrapper bg-gray-400 rounded-1/2 w-16 h-16 border-4 border-gray-700 ml-4 mr-4 mb-2"
+      class="
+        dot-wrapper
+        bg-gray-400
+        rounded-1/2
+        w-16
+        h-16
+        border-4 border-gray-700
+        ml-4
+        mr-4
+        mb-2
+      "
       :class="{ 'bg-indigo-400 border-indigo-700': isHead }"
       @click="isOpen = !isOpen"
     ></div>
@@ -32,6 +47,10 @@ export default {
       type: Object,
       required: true,
     },
+    prevCommit: {
+      type: Object,
+      required: true,
+    },
   },
 
   setup(props) {
diff --git a/src/modules/GitView/composables/useGitView.js b/src/modules/GitView/composables/useGitView.js
index 479d05b..1577b25 100644
--- a/src/modules/GitView/composables/useGitView.js
+++ b/src/modules/GitView/composables/useGitView.js
@@ -1,6 +1,15 @@
 import { ref } from '@vue/reactivity';
 
 const isDetailsOpened = ref(false);
+const isFileDetailsOpened = ref(false);
 const shaCommit = ref('');
+const prevShaCommit = ref('');
+const fileName = ref('');
 
-export const useGitView = () => ({ isDetailsOpened, shaCommit });
+export const useGitView = () => ({
+  isDetailsOpened,
+  isFileDetailsOpened,
+  shaCommit,
+  prevShaCommit,
+  fileName,
+});
diff --git a/src/services/gitReader.js b/src/services/gitReader.js
index 538b299..dbe4b7a 100644
--- a/src/services/gitReader.js
+++ b/src/services/gitReader.js
@@ -96,11 +96,19 @@ export default class GitReader {
   async getGitDiff(path, commit, stat) {
     const commandResponse = await this.execGit(
       path,
-      `git show ${commit} --pretty="format:" ${stat ? '--stat' : ''}`
+      `git show ${commit} --pretty="format:" ${stat ? '--stat="124"' : ''}`
     );
     return this.commitStatParser(commandResponse);
   }
 
+  async getFileDetails(path, commit, prevCommit, fileName) {
+    const commandResponse = await this.execGit(
+      path,
+      `git diff ${prevCommit} ${commit} ${fileName}`
+    );
+    return commandResponse;
+  }
+
   commitStatParser(commitDetails) {
     const list = commitDetails
       .trim()
diff --git a/utils/constants.js b/utils/constants.js
index 27476a2..d0072b2 100644
--- a/utils/constants.js
+++ b/utils/constants.js
@@ -12,4 +12,6 @@ module.exports = {
   GET_GIT_LOGS_BY_OFFSET_REPLY: 'getGitLogsByOffset-reply',
   GET_GIT_DIFF_EVENT: 'getGitDiff-event',
   GET_GIT_DIFF_REPLY: 'getGitDiff-reply',
+  GET_FILE_DETAILS_EVENT: 'getFileDetails-event',
+  GET_FILE_DETAILS_REPLY: 'getFileDetails-reply',
 };