diff --git a/package.json b/package.json
index 0c5b0919..ff23b0ed 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
         "typescript": "4.3.5"
     },
     "dependencies": {
+        "diff2html": "^3.4.13",
         "obsidian-community-lib": "^1.0.1",
         "simple-git": "^2.21.0",
         "supports-color": "^7.2.0"
diff --git a/src/constants.ts b/src/constants.ts
index bc1c383c..86132d43 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -18,8 +18,14 @@ export const DEFAULT_SETTINGS: ObsidianGitSettings = {
     mergeOnPull: true,
 };
 
-export const VIEW_CONFIG = {
+export const GIT_VIEW_CONFIG = {
     type: 'git-view',
     name: 'Source Control',
     icon: 'feather-git-pull-request'
-};
\ No newline at end of file
+};
+
+export const DIFF_VIEW_CONFIG = {
+    type: 'diff-view',
+    name: 'Diff View',
+    icon: 'feather-git-pull-request'
+}
\ No newline at end of file
diff --git a/src/gitManager.ts b/src/gitManager.ts
index 1531b4e3..95c5ecc2 100644
--- a/src/gitManager.ts
+++ b/src/gitManager.ts
@@ -61,6 +61,8 @@ export abstract class GitManager {
 
     abstract updateGitPath(gitPath: string): void;
 
+    abstract getDiffString(filePath: string): string;
+
     async formatCommitMessage(message?: string): Promise<string> {
         let template = message ?? this.plugin.settings.commitMessage;
         let status: Status | undefined;
diff --git a/src/main.ts b/src/main.ts
index f1ff8d03..10d28031 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,11 +5,12 @@ import { ObsidianGitSettingsTab } from "src/settings";
 import { StatusBar } from "src/statusBar";
 import { ChangedFilesModal } from "src/ui/modals/changedFilesModal";
 import { CustomMessageModal } from "src/ui/modals/customMessageModal";
-import { DEFAULT_SETTINGS, VIEW_CONFIG } from "./constants";
+import { DEFAULT_SETTINGS, DIFF_VIEW_CONFIG, GIT_VIEW_CONFIG } from "./constants";
 import { GitManager } from "./gitManager";
 import openInGitHub from "./openInGitHub";
 import { SimpleGit } from "./simpleGit";
 import { ObsidianGitSettings, PluginState } from "./types";
+import DiffView from "./ui/diff/diffView";
 import addIcons from "./ui/icons";
 import { GeneralModal } from "./ui/modals/generalModal";
 import GitView from "./ui/sidebar/sidebarView";
@@ -36,13 +37,18 @@ export default class ObsidianGit extends Plugin {
     async onload() {
         console.log('loading ' + this.manifest.name + " plugin");
         await this.loadSettings();
+
         addIcons();
 
-        this.registerView(VIEW_CONFIG.type, (leaf) => {
+        this.registerView(GIT_VIEW_CONFIG.type, (leaf) => {
             return new GitView(leaf, this);
         });
 
-        (this.app.workspace as any).registerHoverLinkSource(VIEW_CONFIG.type, {
+        this.registerView(DIFF_VIEW_CONFIG.type, (leaf) => {
+            return new DiffView(leaf, this);
+        });
+
+        (this.app.workspace as any).registerHoverLinkSource(GIT_VIEW_CONFIG.type, {
             display: 'Git View',
             defaultMod: true,
         });
@@ -53,19 +59,28 @@ export default class ObsidianGit extends Plugin {
             id: 'open-git-view',
             name: 'Open Source Control View',
             callback: async () => {
-                if (this.app.workspace.getLeavesOfType(VIEW_CONFIG.type).length === 0) {
+                if (this.app.workspace.getLeavesOfType(GIT_VIEW_CONFIG.type).length === 0) {
                     await this.app.workspace.getRightLeaf(false).setViewState({
-                        type: VIEW_CONFIG.type,
+                        type: GIT_VIEW_CONFIG.type,
                     });
                 }
-                this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(VIEW_CONFIG.type).first());
+                this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(GIT_VIEW_CONFIG.type).first());
+            },
+        });
+
+        this.addCommand({
+            id: 'open-diff-view',
+            name: 'Open Diff View',
+            editorCallback: async (editor, view) => {
+                this.app.workspace.createLeafBySplit(view.leaf).setViewState({ type: DIFF_VIEW_CONFIG.type });
+                dispatchEvent(new CustomEvent('diff-update', { detail: { path: view.file.path } }));
             },
         });
 
         this.addCommand({
             id: 'view-file-in-github',
             name: 'Open File in GitHub',
-            editorCallback: (editor, {file}) => openInGitHub(editor, file, this.gitManager),
+            editorCallback: (editor, { file }) => openInGitHub(editor, file, this.gitManager),
         });
 
         this.addCommand({
@@ -151,8 +166,7 @@ export default class ObsidianGit extends Plugin {
     }
 
     async onunload() {
-        (this.app.workspace as any).unregisterHoverLinkSource(VIEW_CONFIG.type);
-        this.app.workspace.detachLeavesOfType(VIEW_CONFIG.type);
+        (this.app.workspace as any).unregisterHoverLinkSource(GIT_VIEW_CONFIG.type);
         this.clearAutoPull();
         this.clearAutoBackup();
         console.log('unloading ' + this.manifest.name + " plugin");
diff --git a/src/simpleGit.ts b/src/simpleGit.ts
index b822e2e9..1c81e473 100644
--- a/src/simpleGit.ts
+++ b/src/simpleGit.ts
@@ -1,4 +1,4 @@
-import { spawnSync } from "child_process";
+import { spawn, spawnSync } from "child_process";
 import { FileSystemAdapter } from "obsidian";
 import * as path from "path";
 import simpleGit, * as simple from "simple-git";
@@ -299,6 +299,15 @@ export class SimpleGit extends GitManager {
         this.setGitInstance();
     }
 
+    getDiffString(filePath: string): string {
+        const command = spawnSync(this.plugin.settings.gitPath || 'git', ['diff', filePath], {
+            //@ts-ignore
+            cwd: this.plugin.app.vault.adapter.basePath
+        });
+        this.git.diffSummary()
+        return command.output.toString();
+    }
+
     private isGitInstalled(): boolean {
         // https://github.com/steveukx/git-js/issues/402
         const command = spawnSync(this.plugin.settings.gitPath || 'git', ['--version'], {
diff --git a/src/ui/diff/diffView.ts b/src/ui/diff/diffView.ts
new file mode 100644
index 00000000..33c514b9
--- /dev/null
+++ b/src/ui/diff/diffView.ts
@@ -0,0 +1,76 @@
+import { html } from "diff2html";
+import { HoverParent, HoverPopover, ItemView, MarkdownView, WorkspaceLeaf } from "obsidian";
+import { DIFF_VIEW_CONFIG } from "src/constants";
+import ObsidianGit from "src/main";
+
+
+export default class DiffView extends ItemView {
+
+    plugin: ObsidianGit;
+    filePath: string;
+    parser: DOMParser;
+
+    constructor(leaf: WorkspaceLeaf, plugin: ObsidianGit) {
+        super(leaf);
+        this.plugin = plugin;
+        this.parser = new DOMParser();
+
+        this.registerEvent(this.app.workspace.on('active-leaf-change', (leaf) => {
+            if (leaf.view instanceof MarkdownView) {
+                this.filePath = leaf.view.file.path;
+            } else {
+                this.filePath = null;
+            }
+            this.refresh();
+        }));
+        this.firstOpen = this.firstOpen.bind(this);
+        addEventListener('diff-update', this.firstOpen);
+        this.registerInterval(window.setInterval(() => this.refresh(), 10000));
+    }
+
+    firstOpen(event: CustomEvent) {
+        this.filePath = event.detail.path;
+        this.refresh();
+    }
+
+    getViewType(): string {
+        return DIFF_VIEW_CONFIG.type;
+    }
+
+    getDisplayText(): string {
+        return DIFF_VIEW_CONFIG.name;
+    }
+
+    getIcon(): string {
+        return DIFF_VIEW_CONFIG.icon;
+    }
+
+    onClose(): Promise<void> {
+        removeEventListener('diff-update', this.firstOpen)
+        return super.onClose();
+    }
+
+    onOpen(): Promise<void> {
+        this.refresh();
+        return super.onOpen();
+    }
+
+    refresh(): void {
+        if (this.filePath) {
+            this.contentEl.empty();
+            const diff = this.parser.parseFromString(
+                html(this.plugin.gitManager.getDiffString(this.filePath)),
+                'text/html')
+                .querySelector('.d2h-file-diff');
+            if (diff) {
+                this.contentEl.append(diff);
+            } else {
+                const div = this.contentEl.createDiv({ cls: 'diff-err' });
+                div.createSpan({ text: '⚠️', cls: 'diff-err-sign' });
+                div.createEl('br');
+                div.createSpan({ text: 'No changes to this file.' });
+            }
+        }
+    }
+
+}
diff --git a/src/ui/icons.ts b/src/ui/icons.ts
index 5b4f3ad9..a8bb86dc 100644
--- a/src/ui/icons.ts
+++ b/src/ui/icons.ts
@@ -14,4 +14,5 @@ export default function addIcons(): void {
     addFeatherIcon('alert-circle');
     addFeatherIcon('alert-triangle');
     addFeatherIcon('git-commit');
+    addFeatherIcon('edit')
 }
\ No newline at end of file
diff --git a/src/ui/sidebar/components/fileComponent.svelte b/src/ui/sidebar/components/fileComponent.svelte
index 81e15d70..71547cc1 100644
--- a/src/ui/sidebar/components/fileComponent.svelte
+++ b/src/ui/sidebar/components/fileComponent.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { setIcon } from "obsidian";
+  import { setIcon, Workspace } from "obsidian";
   import { hoverPreview, openOrSwitch } from "obsidian-community-lib";
+import { DIFF_VIEW_CONFIG } from "src/constants";
   import { GitManager } from "src/gitManager";
   import { FileStatusResult } from "src/types";
   import { DiscardModal } from "src/ui/modals/discardModal";
@@ -10,6 +11,7 @@
   export let change: FileStatusResult;
   export let view: GitView;
   export let manager: GitManager;
+  export let workspace: Workspace;
   let buttons: HTMLElement[] = [];
   $: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
 
@@ -51,6 +53,11 @@
     });
   }
 
+  function showDiff() {
+    workspace.createLeafInParent(workspace.rootSplit, 0).setViewState({ type: DIFF_VIEW_CONFIG.type });
+    dispatchEvent(new CustomEvent('diff-update', { detail: { path: change.path } }));
+  }
+
   function discard() {
     const deleteFile = change.working_dir == "U";
     new DiscardModal(view.app, deleteFile, change.path)
@@ -91,10 +98,16 @@
         bind:this={buttons[0]}
         on:click={discard}
       />
+      <div
+        data-icon="feather-edit"
+        aria-label="Show changes"
+        bind:this={buttons[1]}
+        on:click={showDiff}
+      />
       <div
         data-icon="feather-plus"
         aria-label="Stage"
-        bind:this={buttons[1]}
+        bind:this={buttons[2]}
         on:click={stage}
       />
     </div>
diff --git a/src/ui/sidebar/gitView.svelte b/src/ui/sidebar/gitView.svelte
index b1064211..7b874d9f 100644
--- a/src/ui/sidebar/gitView.svelte
+++ b/src/ui/sidebar/gitView.svelte
@@ -60,6 +60,7 @@
       loading = false;
     });
   }
+
   function stageAll() {
     loading = true;
     plugin.gitManager.stageAll().then(() => {
@@ -229,6 +230,7 @@
                 {change}
                 {view}
                 manager={plugin.gitManager}
+                workspace={plugin.app.workspace}
                 on:git-refresh={refresh}
               />
             {/each}
@@ -276,11 +278,12 @@
     }
   }
   .git-view-body {
-    height: calc(100% - 5rem);
-    overflow-y: scroll;
+    overflow-y: auto;
     padding-left: 10px;
   }
   main {
+    display: flex;
+    flex-direction: column;
     height: 100%;
     overflow-y: hidden;
   }
diff --git a/src/ui/sidebar/sidebarView.ts b/src/ui/sidebar/sidebarView.ts
index f8a1b02e..601a05f1 100644
--- a/src/ui/sidebar/sidebarView.ts
+++ b/src/ui/sidebar/sidebarView.ts
@@ -1,5 +1,5 @@
 import { HoverParent, HoverPopover, ItemView, WorkspaceLeaf } from "obsidian";
-import { VIEW_CONFIG } from "src/constants";
+import { GIT_VIEW_CONFIG } from "src/constants";
 import ObsidianGit from "src/main";
 import GitViewComponent from './gitView.svelte';
 
@@ -17,15 +17,15 @@ export default class GitView extends ItemView implements HoverParent {
     }
 
     getViewType(): string {
-        return VIEW_CONFIG.type;
+        return GIT_VIEW_CONFIG.type;
     }
 
     getDisplayText(): string {
-        return VIEW_CONFIG.name;
+        return GIT_VIEW_CONFIG.name;
     }
 
     getIcon(): string {
-        return VIEW_CONFIG.icon;
+        return GIT_VIEW_CONFIG.icon;
     }
 
     onClose(): Promise<void> {
diff --git a/styles.css b/styles.css
index d1a7dcb5..3455a4d6 100644
--- a/styles.css
+++ b/styles.css
@@ -12,7 +12,7 @@
   transform-origin: 50% 50%;
   display: inline-block;
 }
-.obsidian-git-center{
+.obsidian-git-center {
   margin: auto;
   width: 50%;
 }
@@ -22,6 +22,363 @@
 .tooltip.mod-right {
   overflow-wrap: break-word;
 }
-.obsidian-git-shortcuts{
+.obsidian-git-shortcuts {
   margin: 10px;
-}
\ No newline at end of file
+}
+
+.diff-err {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.diff-err-sign {
+  font-size: 2em;
+}
+
+.d2h-d-none {
+  display: none;
+}
+.d2h-wrapper {
+  text-align: left;
+}
+.d2h-file-header {
+  background-color: var(--background-primary);
+  border-bottom: 1px solid var(--interactive-accent);
+  font-family: var(--font-monospace);
+  height: 35px;
+  padding: 5px 10px;
+}
+.d2h-file-header,
+.d2h-file-stats {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.d2h-file-stats {
+  font-size: 14px;
+  margin-left: auto;
+}
+.d2h-lines-added {
+  border: 1px solid #b4e2b4;
+  border-radius: 5px 0 0 5px;
+  color: #399839;
+  padding: 2px;
+  text-align: right;
+  vertical-align: middle;
+}
+.d2h-lines-deleted {
+  border: 1px solid #e9aeae;
+  border-radius: 0 5px 5px 0;
+  color: #c33;
+  margin-left: 1px;
+  padding: 2px;
+  text-align: left;
+  vertical-align: middle;
+}
+.d2h-file-name-wrapper {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 15px;
+  width: 100%;
+}
+.d2h-file-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.d2h-file-wrapper {
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 3px;
+  margin-bottom: 1em;
+}
+.d2h-file-collapse {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 3px;
+  cursor: pointer;
+  display: none;
+  font-size: 12px;
+  justify-content: flex-end;
+  padding: 4px 8px;
+}
+.d2h-file-collapse.d2h-selected {
+  background-color: #c8e1ff;
+}
+.d2h-file-collapse-input {
+  margin: 0 4px 0 0;
+}
+.d2h-diff-table {
+  border-collapse: collapse;
+  font-family: Menlo, Consolas, monospace;
+  font-size: 13px;
+  width: 100%;
+}
+.d2h-files-diff {
+  width: 100%;
+}
+.d2h-file-diff {
+  overflow-y: hidden;
+}
+.d2h-file-side-diff {
+  display: inline-block;
+  margin-bottom: -8px;
+  margin-right: -4px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  width: 50%;
+}
+.d2h-code-line {
+  padding: 0 8em;
+}
+.d2h-code-line,
+.d2h-code-side-line {
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  width: 100%;
+}
+.d2h-code-side-line {
+  padding: 0 4.5em;
+}
+.d2h-code-line-ctn {
+  word-wrap: normal;
+  background: none;
+  display: inline-block;
+  padding: 0;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  vertical-align: middle;
+  white-space: pre;
+  width: 100%;
+}
+.theme-light .d2h-code-line del,
+.theme-light .d2h-code-side-line del {
+  background-color: #ffb6ba;
+}
+.theme-dark .d2h-code-line del,
+.theme-dark .d2h-code-side-line del {
+  background-color: #8d232881;
+}
+.d2h-code-line del,
+.d2h-code-line ins,
+.d2h-code-side-line del,
+.d2h-code-side-line ins {
+  border-radius: 0.2em;
+  display: inline-block;
+  margin-top: -1px;
+  text-decoration: none;
+  vertical-align: middle;
+}
+.theme-light .d2h-code-line ins,
+.theme-light .d2h-code-side-line ins {
+  background-color: #97f295;
+  text-align: left;
+}
+.theme-dark .d2h-code-line ins,
+.theme-dark .d2h-code-side-line ins {
+  background-color: #1d921996;
+  text-align: left;
+}
+.d2h-code-line-prefix {
+  word-wrap: normal;
+  background: none;
+  display: inline;
+  padding: 0;
+  white-space: pre;
+}
+.line-num1 {
+  float: left;
+}
+.line-num1,
+.line-num2 {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0 0.5em;
+  text-overflow: ellipsis;
+  width: 3.5em;
+}
+.line-num2 {
+  float: right;
+}
+.d2h-code-linenumber {
+  background-color: var(--background-primary);
+  border: solid var(--background-modifier-border);
+  border-width: 0 1px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  text-align: right;
+  width: 7.5em;
+}
+.d2h-code-linenumber:after {
+  content: "\200b";
+}
+.d2h-code-side-linenumber {
+  background-color: var(--background-primary);
+  border: solid var(--background-modifier-border);
+  border-width: 0 1px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0 0.5em;
+  position: absolute;
+  text-align: right;
+  text-overflow: ellipsis;
+  width: 4em;
+}
+.d2h-code-side-linenumber:after {
+  content: "\200b";
+}
+.d2h-code-side-emptyplaceholder,
+.d2h-emptyplaceholder {
+  background-color: var(--background-primary);
+  border-color: var(--background-modifier-border);
+}
+.d2h-code-line-prefix,
+.d2h-code-linenumber,
+.d2h-code-side-linenumber,
+.d2h-emptyplaceholder {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.d2h-code-linenumber,
+.d2h-code-side-linenumber {
+  direction: rtl;
+}
+.theme-light .d2h-del {
+  background-color: #fee8e9;
+  border-color: #e9aeae;
+}
+.theme-light .d2h-ins {
+  background-color: #dfd;
+  border-color: #b4e2b4;
+}
+.theme-dark .d2h-del {
+  background-color: #521b1d83;
+  border-color: #691d1d73;
+}
+.theme-dark .d2h-ins {
+  background-color: rgba(30, 71, 30, 0.5);
+  border-color: #13501381;
+}
+.d2h-info {
+  background-color: var(--background-primary);
+  border-color: var(--background-modifier-border);
+  color: var(--text-normal);
+}
+.theme-light .d2h-file-diff .d2h-del.d2h-change {
+  background-color: #fdf2d0;
+}
+.theme-dark .d2h-file-diff .d2h-del.d2h-change {
+  background-color: #55492480;
+}
+.theme-light .d2h-file-diff .d2h-ins.d2h-change {
+  background-color: #ded;
+}
+.theme-dark .d2h-file-diff .d2h-ins.d2h-change {
+  background-color: rgba(37, 78, 37, 0.418);
+}
+.d2h-file-list-wrapper {
+  margin-bottom: 10px;
+}
+.d2h-file-list-wrapper a {
+  color: #3572b0;
+  text-decoration: none;
+}
+.d2h-file-list-wrapper a:visited {
+  color: #3572b0;
+}
+.d2h-file-list-header {
+  text-align: left;
+}
+.d2h-file-list-title {
+  font-weight: 700;
+}
+.d2h-file-list-line {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: left;
+}
+.d2h-file-list {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.d2h-file-list > li {
+  border-bottom: 1px solid var(--background-modifier-border);
+  margin: 0;
+  padding: 5px 10px;
+}
+.d2h-file-list > li:last-child {
+  border-bottom: none;
+}
+.d2h-file-switch {
+  cursor: pointer;
+  display: none;
+  font-size: 10px;
+}
+.d2h-icon {
+  fill: currentColor;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.d2h-deleted {
+  color: #c33;
+}
+.d2h-added {
+  color: #399839;
+}
+.d2h-changed {
+  color: #d0b44c;
+}
+.d2h-moved {
+  color: #3572b0;
+}
+.d2h-tag {
+  background-color: var(--background-primary);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 10px;
+  margin-left: 5px;
+  padding: 0 2px;
+}
+.d2h-deleted-tag {
+  border: 2px solid #c33;
+}
+.d2h-added-tag {
+  border: 1px solid #399839;
+}
+.d2h-changed-tag {
+  border: 1px solid #d0b44c;
+}
+.d2h-moved-tag {
+  border: 1px solid #3572b0;
+}