diff --git a/src/renderer/components/diff/diffLine.vue b/src/renderer/components/diff/diffLine.vue
new file mode 100644
index 00000000..afd4d638
--- /dev/null
+++ b/src/renderer/components/diff/diffLine.vue
@@ -0,0 +1,78 @@
+<template>
+	<div class="diff__preview-line">
+		<div :style="{ backgroundColor: '#' + color.gutter }" class="diff__gutter">
+			<div
+				:style="{ borderRightColor: '#' + color.border }"
+				class="diff__gutter-left"
+			>
+				{{ gutter[0] }}
+			</div>
+			<div
+				:style="{ borderRightColor: '#' + color.border }"
+				class="diff__gutter-right"
+			>
+				{{ gutter[1] }}
+			</div>
+		</div>
+		<div :style="{ backgroundColor: '#' + color.code }" class="diff__code">
+			<div class="diff__code-status">
+				{{ status }}
+			</div>
+			<div class="diff__code-line">
+				{{ code }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DiffLine",
+	props: {
+		color: {
+			type: Object,
+			required: true
+		},
+		gutter: {
+			type: Array,
+			required: true
+		},
+		status: {
+			type: String,
+			required: true
+		},
+		code: {
+			type: String,
+			required: true
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.diff
+	&__preview-line, &__gutter, &__code
+		display: flex
+		flex-direction: row
+
+	&__gutter, &__code
+		font-size: .875rem
+
+	&__gutter-left, &__gutter-right, &__code
+		padding-top: 6px
+		padding-bottom: 6px
+
+	&__gutter-left, &__gutter-right
+		padding-left: 1.125rem
+		padding-right: 10px
+		border-right:
+			width: 1px
+			style: solid
+
+	&__code
+		padding-left: 4px
+		padding-right: 4px
+
+		&-status
+			margin-right: .875rem
+</style>
diff --git a/src/renderer/components/diff/diffPreview.vue b/src/renderer/components/diff/diffPreview.vue
index 38d5f5eb..21aa8139 100644
--- a/src/renderer/components/diff/diffPreview.vue
+++ b/src/renderer/components/diff/diffPreview.vue
@@ -1,8 +1,13 @@
 <template>
 	<VueScrollbar class="diff__preview">
 		<div>
-			<div v-for="(line, index) in preview" :key="index">
-				{{ line }}
+			<div v-for="(data, index) in preview" :key="index">
+				<diff-line
+					:gutter="codeGutter(data, index)"
+					:color="codeColor(data)"
+					:status="codeStatus(data)"
+					:code="codeLine(data)"
+				/>
 			</div>
 		</div>
 	</VueScrollbar>
@@ -10,17 +15,71 @@
 
 <script>
 import VueScrollbar from "vue2-scrollbar";
+import DiffLine from "./diffLine";
 
 export default {
 	name: "DiffPreview",
 	components: {
-		VueScrollbar
+		VueScrollbar,
+		DiffLine
 	},
 	props: {
 		preview: {
 			type: Array,
 			required: true
 		}
+	},
+	data() {
+		return {
+			gutterChunk: []
+		};
+	},
+	methods: {
+		codeGutter(code, index) {
+			let gutterData = [];
+			if (code.charAt(0) === "@") {
+				let gutterString = code.split(/@@(.*?)@@/)[1].trim();
+				gutterData = gutterString.split(" ");
+				this.gutterChunk = gutterData;
+				return ["", ""];
+			}
+			return this.gutterChunk;
+		},
+		codeStatus(code) {
+			if (code.charAt(0) !== ("@" || " ")) {
+				return code.charAt(0);
+			}
+		},
+		codeLine(code) {
+			if (code.charAt(0) === "@") return code;
+			return code.slice(1, code.length);
+		},
+		codeColor(code) {
+			switch (code.charAt(0)) {
+				case "@":
+					return {
+						code: "F1F8FF",
+						gutter: "DBEDFF",
+						border: "C8E1FF"
+					};
+				case "+":
+					return {
+						code: "E6FFED",
+						gutter: "CDFFD8",
+						border: "85E89D"
+					};
+				case "-":
+					return {
+						code: "FFEEF0",
+						gutter: "FFDCE0",
+						border: "FDAEB7"
+					};
+				case " ":
+					return {
+						border: "E1E4E8"
+					};
+			}
+		}
 	}
 };
 </script>
diff --git a/src/renderer/pages/repository/history.vue b/src/renderer/pages/repository/history.vue
index 64efdbfe..734d9149 100644
--- a/src/renderer/pages/repository/history.vue
+++ b/src/renderer/pages/repository/history.vue
@@ -34,7 +34,7 @@
 				</VueScrollbar>
 			</div>
 		</div>
-		<div class="history__preview">
+		<div>
 			<diffPreview
 				v-if="this.$store.state.history.filePreview.isActive"
 				:preview="commitFileDiffPreview"
@@ -146,7 +146,4 @@ export default {
 
 		&__scrollbar
 			max-height: 90vh
-
-	&__preview
-		padding: 10px
 </style>