diff --git a/frontend/packages/client/package.json b/frontend/packages/client/package.json
index c637649d..162a4cd9 100644
--- a/frontend/packages/client/package.json
+++ b/frontend/packages/client/package.json
@@ -45,7 +45,8 @@
     "react-scripts": "4.0.3",
     "sass": "^1.49.8",
     "string-strip-html": "8.3.0",
-    "yup": "^0.32.11"
+    "yup": "^0.32.11",
+    "react-git-info": "^2.0.1"
   },
   "scripts": {
     "start": "craco start",
@@ -109,4 +110,4 @@
   "resolutions": {
     "react-error-overlay": "6.0.9"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/packages/client/public/Green-Circle.png b/frontend/packages/client/public/Green-Circle.png
new file mode 100644
index 00000000..f99d9e61
Binary files /dev/null and b/frontend/packages/client/public/Green-Circle.png differ
diff --git a/frontend/packages/client/src/components/Version.js b/frontend/packages/client/src/components/Version.js
new file mode 100644
index 00000000..97eaf332
--- /dev/null
+++ b/frontend/packages/client/src/components/Version.js
@@ -0,0 +1,45 @@
+import GitInfo from 'react-git-info/macro';
+import { HomeFooter } from 'components';
+
+const styles = {
+  centerTextStyle: {
+    position: 'absolute',
+    width: '100%',
+    top: '45%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    textAlign: 'center',
+    color: 'white',
+    padding: '10px',
+  },
+};
+
+export default function Version() {
+  const gitInfo = GitInfo();
+
+  return (
+    <div className="section is-flex is-flex-direction-column full-height">
+      <div className="is-flex-grow-1 mx-auto is-flex is-align-items-center">
+        <div class="is-relative ">
+          <img src="Green-Circle.png" alt="Green Circle" />
+          <div style={styles.centerTextStyle}>
+            <div className="is-relative">
+              <p className="is-size-3 mb-5 has-text-black">
+                <b>Version:</b>
+              </p>
+              <p className="is-size-5">
+                <b>SHA Commit Id:</b> {gitInfo.commit.shortHash}
+              </p>
+              <br />
+              <p className="is-size-5">
+                <b>Branch/Environment:</b> {gitInfo.branch}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <HomeFooter />
+    </div>
+  );
+}
diff --git a/frontend/packages/client/src/pages/index.js b/frontend/packages/client/src/pages/index.js
index 1e7bc4bc..ded0a16d 100644
--- a/frontend/packages/client/src/pages/index.js
+++ b/frontend/packages/client/src/pages/index.js
@@ -15,6 +15,7 @@ const Community = lazy(() => import('./Community'));
 const CommunityEditor = lazy(() => import('./CommunityEditor'));
 const CommunityCreate = lazy(() => import('./CommunityCreate'));
 const BrowseCommunities = lazy(() => import('./BrowseCommunities'));
+const Version = lazy(() => import('components/Version'));
 
 export default function AppPages() {
   return (
@@ -33,6 +34,9 @@ export default function AppPages() {
             <Route exact path="/browse-communities">
               <BrowseCommunities />
             </Route>
+            <Route exact path="/version">
+              <Version />
+            </Route>
             <Route exact path="/community/create">
               <CommunityCreate />
             </Route>