diff --git a/frontend/src/components/c-footer.vue b/frontend/src/components/c-footer.vue
new file mode 100644
index 0000000000..40b92296cd
--- /dev/null
+++ b/frontend/src/components/c-footer.vue
@@ -0,0 +1,57 @@
+<template lang="pug">
+#footer
+  #app-name
+    span &nbsp;
+    a(
+      v-bind:href="getRepoSenseHomeLink()", target="_blank"
+    )
+      strong RepoSense
+    span &nbsp;|&nbsp;
+    a(
+      v-bind:href="getSpecificCommitLink()", target="_blank"
+    )
+      strong Version
+    span &nbsp;|&nbsp;
+    a(
+      v-bind:href="getUserGuideLink()", target ="_blank"
+    )
+      strong User Guide
+</template>
+
+
+<script lang='ts'>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'c-footer',
+  methods: {
+    getRepoSenseHomeLink(): string {
+      const version = window.repoSenseVersion;
+      if (!version) {
+        return `${window.HOME_PAGE_URL}/RepoSense/`;
+      }
+      return `${window.HOME_PAGE_URL}`;
+    },
+
+    getSpecificCommitLink(): string {
+      const version = window.repoSenseVersion;
+      if (!version) {
+        return `${window.REPOSENSE_REPO_URL}`;
+      }
+      if (version.startsWith('v')) {
+        return `${window.REPOSENSE_REPO_URL}/releases/tag/${version}`;
+      }
+      return `${window.REPOSENSE_REPO_URL}/commit/${version}`;
+    },
+
+    getUserGuideLink(): string {
+      const version = window.repoSenseVersion;
+      if (!version) {
+        return `${window.HOME_PAGE_URL}/RepoSense/ug/index.html`;
+      }
+      return `${window.HOME_PAGE_URL}/ug/index.html`;
+    },
+  },
+});
+
+</script>
\ No newline at end of file
diff --git a/frontend/src/styles/panels.scss b/frontend/src/styles/panels.scss
index 42d13b401e..67b92d17d2 100644
--- a/frontend/src/styles/panels.scss
+++ b/frontend/src/styles/panels.scss
@@ -2,7 +2,7 @@
 @import 'z-indices';
 
 .panel-padding {
-  padding: 0 1.5rem 2rem 2.2rem;
+  padding: 0 1.5rem 0 2.2rem;
 }
 
 #app-wrapper {
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 5cd38a53a7..8a41b02db4 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -48,7 +48,7 @@ a.broken-link {
 }
 
 .tab-padding {
-  padding: 2rem 1.5rem;
+  padding: 2rem 1.5rem 0 1.5rem;
 }
 
 .widget-padding {
@@ -166,17 +166,27 @@ header {
   text-align: center;
 }
 
+#app-name {
+  @include small-font;
+  color: mui-color('grey', '700');
+  height: 100%;
+  margin-bottom: 2em;
+  margin-left: 1em;
+  margin-top: 3.4em;
+  text-align: center;
+}
+
 #app-wrapper {
   #summary-wrapper {
     height: 100%;
     overflow-y: scroll;
-    text-align: center;
+    text-align: left;
 
     .timestamp-footer {
-      @include small-font;
+      @include mini-font;
       color: mui-color('grey', '700');
       margin-bottom: 1em;
-      margin-left: 1em;
+      margin-left: 2.4em;
     }
 
     .error-message-box {
@@ -187,7 +197,6 @@ header {
       color: mui-color('red', '900');
       margin-bottom: .9rem;
       padding: .9rem;
-      text-align: left;
 
       &__close-button {
         @include large-font;
diff --git a/frontend/src/styles/summary-chart.scss b/frontend/src/styles/summary-chart.scss
index 8c19cb2c60..7c6c3b33e6 100644
--- a/frontend/src/styles/summary-chart.scss
+++ b/frontend/src/styles/summary-chart.scss
@@ -92,7 +92,7 @@
   }
 
   .summary-charts {
-    margin-bottom: 1.4rem;
+    margin-bottom: 0;
 
     &__title {
       align-items: center;
diff --git a/frontend/src/views/c-home.vue b/frontend/src/views/c-home.vue
index 662156129e..7e955369d5 100644
--- a/frontend/src/views/c-home.vue
+++ b/frontend/src/views/c-home.vue
@@ -11,24 +11,10 @@
             v-bind:error-messages="errorMessages"
           )
           .timestamp-footer
-            span Generated by&nbsp;
-            a(
-              v-bind:href="getSpecificCommitLink()", target="_blank"
-            )
-              strong this version
-            span &nbsp;of&nbsp;
-            a(
-              v-bind:href="getRepoSenseHomeLink()", target="_blank"
-            )
-              strong RepoSense
-            span &nbsp;(
-            a(
-              v-bind:href="getUserGuideLink()", target ="_blank"
-            )
-              strong User Guide
-            span ) on {{ creationDate }}
-          .report-generation-time(style="display: none;")
-            span {{ reportGenerationTime }}
+            span Generated on {{ creationDate }}
+            .report-generation-time(style="display: none;")
+              span {{ reportGenerationTime }}
+          c-footer
 
       template(v-slot:right)
         #tabs-wrapper(ref="tabWrapper")
@@ -59,6 +45,7 @@
                     )
                       strong User Guide
                     | &nbsp; to get a better understanding of how to interpret the report.
+              c-footer
 
   template(v-else)
     .empty Please upload a .zip file generated by RepoSense.
@@ -75,6 +62,7 @@ import cResizer from '../components/c-resizer.vue';
 import cZoom from './c-zoom.vue';
 import cSummary from './c-summary.vue';
 import cAuthorship from './c-authorship.vue';
+import cFooter from '../components/c-footer.vue';
 
 const home = defineComponent({
   name: 'c-home',
@@ -84,6 +72,7 @@ const home = defineComponent({
     cZoom,
     cSummary,
     cAuthorship,
+    cFooter,
   },
   props: {
     updateReportZip: {