diff --git a/frontend/src/components/c-zoom-commit-message.vue b/frontend/src/components/c-zoom-commit-message.vue
new file mode 100644
index 0000000000..20ee4f78ff
--- /dev/null
+++ b/frontend/src/components/c-zoom-commit-message.vue
@@ -0,0 +1,273 @@
+<template lang="pug">
+//- use tabindex to enable focus property on div
+.commit-message(
+  tabindex="-1",
+  v-bind:key="slice.hash",
+  v-bind:class="{ 'message-body active': slice.messageBody !== '' }"
+)
+  span.code-merge-icon(v-if="slice.isMergeCommit")
+    font-awesome-icon(icon="code-merge")
+    span &nbsp;
+  a.message-title(v-bind:href="getSliceLink(slice)",
+    v-bind:class="!isBrokenLink(getSliceLink(slice)) ? '' : 'broken-link'", target="_blank")
+    .within-border {{ slice.messageTitle.substr(0, 50) }}
+    .not-within-border(v-if="slice.messageTitle.length > 50")
+      |{{ slice.messageTitle.substr(50) }}
+  span(data-cy="changes") &nbsp; (+{{ slice.insertions }} -{{ slice.deletions }} lines) &nbsp;
+  .hash
+    span {{ slice.hash.substr(0, 7) }}
+  span.fileTypeLabel(
+    v-if="containsAtLeastOneSelected(Object.keys(slice.fileTypesAndContributionMap))",
+    v-for="fileType in\
+      Object.keys(slice.fileTypesAndContributionMap)",
+    vbind:key="fileType",
+    v-bind:style="{\
+      'background-color': fileTypeColors[fileType],\
+      'color': getFontColor(fileTypeColors[fileType])\
+      }"
+  ) {{ fileType }}
+  template(v-if="slice.tags")
+    .tag(
+      v-for="tag in slice.tags",
+      vbind:key="tag",
+      tabindex="-1", v-bind:class="[`${slice.hash}`, tag]"
+    )
+      font-awesome-icon(icon="tags")
+      span &nbsp;{{ tag }}
+  a(
+    v-if="slice.messageBody !== ''",
+    v-on:click="toggleSelectedCommitMessageBody(slice)"
+  )
+    .tooltip(
+      v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
+      v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
+    )
+      font-awesome-icon.commit-message--button(icon="ellipsis-h")
+      span.tooltip-text(
+        v-bind:ref="`${slice.hash}-show-hide-message-body`"
+        ) Click to show/hide the commit message body
+  .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
+    pre {{ slice.messageBody }}
+      .dashed-border
+  template(
+    v-if="showDiffstat"
+  )
+    c-stacked-bar-chart(
+      v-bind:bars="getContributionBars(slice)"
+    )
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import brokenLinkDisabler from '../mixin/brokenLinkMixin';
+import tooltipPositioner from '../mixin/dynamicTooltipMixin';
+import cRamp from './c-ramp.vue';
+import cStackedBarChart from './c-stacked-bar-chart.vue';
+import {
+  Bar,
+  CommitResult,
+  User,
+} from '../types/types';
+
+export default defineComponent({
+  name: 'c-zoom-commit-message',
+  components: {
+    FontAwesomeIcon,
+    cRamp,
+    cStackedBarChart,
+  },
+  mixins: [brokenLinkDisabler, tooltipPositioner],
+  props: {
+    slice: {
+      type: Object as PropType<CommitResult>,
+      required: true,
+    },
+    info: {
+      type: Object as PropType<{ zUser: User | undefined, zAvgContributionSize: number, zIsMerged: Boolean }>,
+      required: true,
+    },
+    showDiffstat: {
+      type: Boolean,
+      required: true,
+    },
+    selectedFileTypes: {
+      type: Array<String>,
+      required: true,
+    },
+    fileTypeColors: {
+      type: Object as PropType<{ [key: string]: string }>,
+      required: true,
+    },
+  },
+  methods: {
+    getContributionBars(slice: CommitResult): Array<Bar> {
+      let currentBarWidth = 0;
+      const fullBarWidth = 100;
+
+      let avgContributionSize = this.info.zAvgContributionSize;
+      if (avgContributionSize === undefined || avgContributionSize > 1000) {
+        avgContributionSize = 1000;
+      }
+
+      const contributionPerFullBar = avgContributionSize;
+
+      const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
+      const allContributionBars: Array<Bar> = [];
+
+      if (contributionPerFullBar === 0) {
+        return allContributionBars;
+      }
+
+      Object.keys(diffstatMappings)
+        .forEach((color) => {
+          const contribution = diffstatMappings[color];
+          let barWidth = (contribution / contributionPerFullBar) * fullBarWidth;
+          const contributionBars = [];
+
+          // if contribution bar for file type is able to fit on the current line
+          if (currentBarWidth + barWidth < fullBarWidth) {
+            contributionBars.push(barWidth);
+            currentBarWidth += barWidth;
+          } else {
+            // take up all the space left on the current line
+            contributionBars.push(fullBarWidth - currentBarWidth);
+            barWidth -= fullBarWidth - currentBarWidth;
+            // additional bar width will start on a new line
+            const numOfFullBars = Math.floor(barWidth / fullBarWidth);
+            for (let i = 0; i < numOfFullBars; i += 1) {
+              contributionBars.push(fullBarWidth);
+            }
+            const remainingBarWidth = barWidth % fullBarWidth;
+            if (remainingBarWidth > 0) {
+              contributionBars.push(remainingBarWidth);
+            }
+            currentBarWidth = remainingBarWidth;
+          }
+
+          contributionBars.forEach((width) => {
+            const bar = {
+              color,
+              width,
+            };
+            allContributionBars.push(bar);
+          });
+        });
+
+      return allContributionBars;
+    },
+    getSliceLink(slice: CommitResult): string | undefined {
+      if (this.info.zIsMerged) {
+        return window.getCommitLink(slice.repoId, slice.hash);
+      }
+      return window.getCommitLink(this.info.zUser!.repoId, slice.hash);
+    },
+    toggleSelectedCommitMessageBody(slice: CommitResult) {
+      this.$store.commit('toggleZoomCommitMessageBody', slice);
+    },
+    containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
+      for (let i = 0; i < fileTypes.length; i += 1) {
+        if (this.selectedFileTypes.includes(fileTypes[i])) {
+          return true;
+        }
+      }
+      return false;
+    },
+    getFontColor(color: string) {
+      return window.getFontColor(color);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/_colors.scss';
+
+.commit-message {
+  border: 1px solid transparent;
+  padding: 5px;
+
+  &:focus,
+  &:focus-within {
+    border: 1px solid mui-color('blue', '500');
+  }
+
+  &.active {
+    .body {
+      background-color: mui-color('white');
+      border: 1px solid mui-color('grey', '700');
+      display: grid;
+      margin: .25rem 0 .25rem 0;
+      overflow-x: auto;
+      padding: .4rem;
+      resize: none;
+
+      pre {
+        @include mono-font;
+        position: relative;
+
+        .dashed-border {
+          border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
+          height: 100%;
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+          width: 72ch;
+        }
+      }
+    }
+  }
+
+  .code-merge-icon {
+    color: mui-color('grey');
+
+    .fa-code-merge {
+      width: .65rem;
+    }
+  }
+
+  .body {
+    display: none;
+  }
+
+  .tag {
+    cursor: pointer;
+
+    &:focus {
+      border: 1px solid mui-color('blue', '500');
+      outline: none;
+    }
+  }
+
+  &--button {
+    color: mui-color('grey');
+    padding-left: .5rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  pre {
+    margin: 0;
+  }
+
+  span.loc {
+    color: mui-color('grey');
+  }
+
+  .message-title {
+    @include mono-font;
+    display: inline;
+
+    .within-border {
+      display: inline;
+    }
+
+    .not-within-border {
+      border-left: 1px dashed mui-color('grey', '500'); // 50th character line
+      display: inline;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index 2e93e3f93c..74fd0afd72 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -75,9 +75,9 @@
         v-for="fileType in fileTypes",
         v-bind:key="fileType",
         v-bind:style="{\
-                'background-color': fileTypeColors[fileType],\
-                'color': getFontColor(fileTypeColors[fileType])\
-                }"
+          'background-color': fileTypeColors[fileType],\
+          'color': getFontColor(fileTypeColors[fileType])\
+          }"
       )
         input.mui-checkbox--fileType(type="checkbox", v-bind:value="fileType",
           v-on:change="updateSelectedFileTypesHash", v-model="selectedFileTypes")
@@ -86,63 +86,10 @@
   .zoom__day(v-for="day in selectedCommits", v-bind:key="day.date")
     h3(v-if="info.zTimeFrame === 'week'") Week of {{ day.date }}
     h3(v-else) {{ day.date }}
-    //- use tabindex to enable focus property on div
-    .commit-message(
-      tabindex="-1",
-      v-for="slice in day.commitResults",
-      v-bind:key="slice.hash",
-      v-bind:class="{ 'message-body active': slice.messageBody !== '' }"
-    )
-      span.code-merge-icon(v-if="slice.isMergeCommit")
-        font-awesome-icon(icon="code-merge")
-        span &nbsp;
-      a.message-title(v-bind:href="getSliceLink(slice)",
-        v-bind:class="!isBrokenLink(getSliceLink(slice)) ? '' : 'broken-link'", target="_blank")
-        .within-border {{ slice.messageTitle.substr(0, 50) }}
-        .not-within-border(v-if="slice.messageTitle.length > 50")
-          |{{ slice.messageTitle.substr(50) }}
-      span(data-cy="changes") &nbsp; (+{{ slice.insertions }} -{{ slice.deletions }} lines) &nbsp;
-      .hash
-        span {{ slice.hash.substr(0, 7) }}
-      span.fileTypeLabel(
-        v-if="containsAtLeastOneSelected(Object.keys(slice.fileTypesAndContributionMap))",
-        v-for="fileType in\
-          Object.keys(slice.fileTypesAndContributionMap)",
-        vbind:key="fileType",
-        v-bind:style="{\
-          'background-color': fileTypeColors[fileType],\
-          'color': getFontColor(fileTypeColors[fileType])\
-          }"
-      ) {{ fileType }}
-      template(v-if="slice.tags")
-        .tag(
-          v-for="tag in slice.tags",
-          vbind:key="tag",
-          tabindex="-1", v-bind:class="[`${slice.hash}`, tag]"
-        )
-          font-awesome-icon(icon="tags")
-          span &nbsp;{{ tag }}
-      a(
-        v-if="slice.messageBody !== ''",
-        v-on:click="toggleSelectedCommitMessageBody(slice)"
-      )
-        .tooltip(
-          v-on:mouseover="onTooltipHover(`${slice.hash}-show-hide-message-body`)",
-          v-on:mouseout="resetTooltip(`${slice.hash}-show-hide-message-body`)"
-        )
-          font-awesome-icon.commit-message--button(icon="ellipsis-h")
-          span.tooltip-text(
-            v-bind:ref="`${slice.hash}-show-hide-message-body`"
-            ) Click to show/hide the commit message body
-      .body(v-if="slice.messageBody !== ''", v-show="slice.isOpen")
-        pre {{ slice.messageBody }}
-          .dashed-border
-      template(
-        v-if="showDiffstat"
-      )
-        c-stacked-bar-chart(
-          v-bind:bars="getContributionBars(slice)"
-        )
+    template(v-for="slice in day.commitResults", v-bind:key="slice.hash")
+      c-zoom-commit-message(v-bind:slice="slice",
+        v-bind:selected-file-types="selectedFileTypes", v-bind:file-type-colors="fileTypeColors",
+        v-bind:info="info", v-bind:show-diffstat="showDiffstat")
 </template>
 
 <script lang="ts">
@@ -152,9 +99,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import tooltipPositioner from '../mixin/dynamicTooltipMixin';
 import cRamp from '../components/c-ramp.vue';
-import cStackedBarChart from '../components/c-stacked-bar-chart.vue';
+import cZoomCommitMessage from '../components/c-zoom-commit-message.vue';
 import {
-  Bar,
   Commit,
   CommitResult,
   DailyCommit,
@@ -181,7 +127,7 @@ export default defineComponent({
   components: {
     FontAwesomeIcon,
     cRamp,
-    cStackedBarChart,
+    cZoomCommitMessage,
   },
   mixins: [brokenLinkDisabler, tooltipPositioner],
   data() {
@@ -337,77 +283,12 @@ export default defineComponent({
       this.updateFileTypes();
       this.selectedFileTypes = this.fileTypes.slice();
     },
-
-    getContributionBars(slice: CommitResult): Array<Bar> {
-      let currentBarWidth = 0;
-      const fullBarWidth = 100;
-
-      let avgContributionSize = this.info.zAvgContributionSize;
-      if (avgContributionSize === undefined || avgContributionSize > 1000) {
-        avgContributionSize = 1000;
-      }
-
-      const contributionPerFullBar = avgContributionSize;
-
-      const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
-      const allContributionBars: Array<Bar> = [];
-
-      if (contributionPerFullBar === 0) {
-        return allContributionBars;
-      }
-
-      Object.keys(diffstatMappings)
-        .forEach((color) => {
-          const contribution = diffstatMappings[color];
-          let barWidth = (contribution / contributionPerFullBar) * fullBarWidth;
-          const contributionBars = [];
-
-          // if contribution bar for file type is able to fit on the current line
-          if (currentBarWidth + barWidth < fullBarWidth) {
-            contributionBars.push(barWidth);
-            currentBarWidth += barWidth;
-          } else {
-            // take up all the space left on the current line
-            contributionBars.push(fullBarWidth - currentBarWidth);
-            barWidth -= fullBarWidth - currentBarWidth;
-            // additional bar width will start on a new line
-            const numOfFullBars = Math.floor(barWidth / fullBarWidth);
-            for (let i = 0; i < numOfFullBars; i += 1) {
-              contributionBars.push(fullBarWidth);
-            }
-            const remainingBarWidth = barWidth % fullBarWidth;
-            if (remainingBarWidth > 0) {
-              contributionBars.push(remainingBarWidth);
-            }
-            currentBarWidth = remainingBarWidth;
-          }
-
-          contributionBars.forEach((width) => {
-            const bar = {
-              color,
-              width,
-            };
-            allContributionBars.push(bar);
-          });
-        });
-
-      return allContributionBars;
-    },
-
-    getSliceLink(slice: CommitResult): string | undefined {
-      if (this.info.zIsMerged) {
-        return window.getCommitLink(slice.repoId, slice.hash);
-      }
-      return window.getCommitLink(this.info.zUser!.repoId, slice.hash);
-    },
-
     scrollToCommit(tag: string, commit: string) {
       const el = this.$el.getElementsByClassName(`${commit} ${tag}`)[0];
       if (el) {
         el.focus();
       }
     },
-
     updateFileTypes() {
       if (!this.filteredUser) return;
 
@@ -423,12 +304,10 @@ export default defineComponent({
         (fileType) => commitsFileTypes.has(fileType),
       );
     },
-
     retrieveHashes() {
       this.retrieveSortHash();
       this.retrieveSelectedFileTypesHash();
     },
-
     retrieveSortHash() {
       const hash = window.hashParams;
       if (hash.zCST && Object.values(CommitsSortType).includes(hash.zCST as CommitsSortType)) {
@@ -438,7 +317,6 @@ export default defineComponent({
         this.toReverseSortedCommits = (hash.zRSC === 'true');
       }
     },
-
     retrieveSelectedFileTypesHash() {
       const hash = window.hashParams;
 
@@ -448,16 +326,14 @@ export default defineComponent({
           .filter((fileType) => this.fileTypes.includes(fileType));
       }
     },
-
     updateSelectedFileTypesHash() {
       const fileTypeHash = this.selectedFileTypes.length > 0
-          ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
-          : '';
+        ? this.selectedFileTypes.reduce((a, b) => `${a}~${b}`)
+        : '';
 
       window.addHash('zFT', fileTypeHash);
       window.encodeHash();
     },
-
     setInfoHash() {
       const { addHash, encodeHash } = window;
       const {
@@ -476,11 +352,6 @@ export default defineComponent({
       addHash('zFR', zFromRamp.toString());
       encodeHash();
     },
-
-    toggleSelectedCommitMessageBody(slice: CommitResult) {
-      this.$store.commit('toggleZoomCommitMessageBody', slice);
-    },
-
     toggleAllCommitMessagesBody(isOpen: boolean) {
       this.showAllCommitMessageBody = isOpen;
       this.$store.commit('setAllZoomCommitMessageBody', {
@@ -488,11 +359,9 @@ export default defineComponent({
         commits: this.selectedCommits,
       });
     },
-
     toggleDiffstatView(isVisible: boolean) {
       this.showDiffstat = isVisible;
     },
-
     removeZoomHashes() {
       window.removeHash('zA');
       window.removeHash('zR');
@@ -509,16 +378,6 @@ export default defineComponent({
       window.removeHash('zFR');
       window.encodeHash();
     },
-
-    containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
-      for (let i = 0; i < fileTypes.length; i += 1) {
-        if (this.selectedFileTypes.includes(fileTypes[i])) {
-          return true;
-        }
-      }
-      return false;
-    },
-
     getFontColor(color: string) {
       return window.getFontColor(color);
     },
@@ -575,95 +434,5 @@ export default defineComponent({
       }
     }
   }
-
-  /* Commit Message Body in Zoom Tab */
-  .commit-message {
-    border: 1px solid transparent;
-    padding: 5px;
-
-    &:focus,
-    &:focus-within {
-      border: 1px solid mui-color('blue', '500');
-    }
-
-    &.active {
-      .body {
-        background-color: mui-color('white');
-        border: 1px solid mui-color('grey', '700');
-        display: grid;
-        margin: .25rem 0 .25rem 0;
-        overflow-x: auto;
-        padding: .4rem;
-        resize: none;
-
-        pre {
-          @include mono-font;
-          position: relative;
-
-          .dashed-border {
-            border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
-            height: 100%;
-            pointer-events: none;
-            position: absolute;
-            top: 0;
-            width: 72ch;
-          }
-        }
-      }
-    }
-
-    .code-merge-icon {
-      color: mui-color('grey');
-
-      .fa-code-merge {
-        width: .65rem;
-      }
-    }
-
-    .body {
-      display: none;
-    }
-
-    .tag {
-      cursor: pointer;
-
-      &:focus {
-        border: 1px solid mui-color('blue', '500');
-        outline: none;
-      }
-    }
-
-    &--button {
-      color: mui-color('grey');
-      padding-left: .5rem;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    pre {
-      margin: 0;
-    }
-
-    span.loc {
-      color: mui-color('grey');
-    }
-
-    .message-title {
-      @include mono-font;
-      display: inline;
-
-      .within-border {
-        display: inline;
-      }
-
-      .not-within-border {
-        border-left: 1px dashed mui-color('grey', '500'); // 50th character line
-        display: inline;
-      }
-    }
-  }
 }
-
 </style>