diff --git a/.prettierrc.js b/.prettierrc.js
index 5ed83787f..7b7fcc0d1 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,7 +1,8 @@
 module.exports = {
-  trailingComma: "es5",
+  trailingComma: 'es5',
   printWidth: 80,
   tabWidth: 2,
   semi: true,
   singleQuote: true,
+  arrowParens: 'always',
 };
diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js
index b1a36f812..66d74723a 100644
--- a/src/templates/ObservabilityPackDetails.js
+++ b/src/templates/ObservabilityPackDetails.js
@@ -10,11 +10,15 @@ import {
   PageTools,
   useTessen,
   useInstrumentedHandler,
+  Button,
+  Icon,
+  Link,
 } from '@newrelic/gatsby-theme-newrelic';
 import ImageGallery from '../components/ImageGallery';
 import Intro from '../components/Intro';
 import InstallButton from '../components/InstallButton';
 import ImageSlider from '../components/ImageSlider';
+import getPackUrl from '../utils/get-pack-url';
 import Markdown from '../components/Markdown';
 
 const allowedElements = [
@@ -49,6 +53,7 @@ const ObservabilityPackDetails = ({ data, location }) => {
       packId: pack.id,
     }
   );
+
   return (
     <>
       <DevSiteSeo title={pack.name} location={location} />
@@ -248,6 +253,29 @@ const ObservabilityPackDetails = ({ data, location }) => {
               }
             `}
           >
+            <PageTools.Section
+              css={css`
+                background-color: var(--divider-color);
+              `}
+            >
+              <div>
+                <Button
+                  as={Link}
+                  variant={Button.VARIANT.PRIMARY}
+                  to={getPackUrl(pack.logoUrl)}
+                  rel="noopener noreferrer"
+                  instrumentation={{ packName: pack.name }}
+                >
+                  <Icon
+                    name="fe-github"
+                    css={css`
+                      margin-right: 7px;
+                    `}
+                  />
+                  View Repo
+                </Button>
+              </div>
+            </PageTools.Section>
             <PageTools.Section>
               <PageTools.Title>How to use this pack</PageTools.Title>
               <ol>
@@ -296,6 +324,7 @@ export const pageQuery = graphql`
       level
       id
       description
+      logoUrl
       dashboards {
         description
         name
diff --git a/src/utils/__tests__/get-pack-url.test.js b/src/utils/__tests__/get-pack-url.test.js
new file mode 100644
index 000000000..415b220b4
--- /dev/null
+++ b/src/utils/__tests__/get-pack-url.test.js
@@ -0,0 +1,29 @@
+import getPackUrl from '../get-pack-url';
+
+describe('getPackUrl', () => {
+  test.each([
+    [
+      'https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.8.1/packs/apache/logo.svg',
+      'https://github.com/newrelic/newrelic-observability-packs/tree/main/packs/apache',
+    ],
+    [
+      'https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.8.2/packs/couchbase/logo.svg',
+      'https://github.com/newrelic/newrelic-observability-packs/tree/main/packs/couchbase',
+    ],
+  ])('given non-falsy logoUrl, %p, returns %p', (firstArg, expectedResult) => {
+    const packUrl = getPackUrl(firstArg);
+
+    expect(packUrl).toBe(expectedResult);
+  });
+
+  test.each([[''], [null], [undefined]])(
+    'given falsy logoUrl, %p, returns "https://github.com/newrelic/newrelic-observability-packs/tree/main/packs/"',
+    (firstArg) => {
+      const packUrl = getPackUrl(firstArg);
+
+      expect(packUrl).toBe(
+        'https://github.com/newrelic/newrelic-observability-packs/tree/main/packs/'
+      );
+    }
+  );
+});
diff --git a/src/utils/get-pack-url.js b/src/utils/get-pack-url.js
new file mode 100644
index 000000000..3d2e14a0a
--- /dev/null
+++ b/src/utils/get-pack-url.js
@@ -0,0 +1,24 @@
+/**
+ * Method to get the URL for a given pack.
+ * @param {string} logoUrl
+ * @returns {string} URL for pack. If logoUrl is falsy, URL returned
+ * will be the parent directory under which all packs live.
+ */
+const getPackUrl = (logoUrl) => {
+  let packUrl = new URL(
+    'https://github.com/newrelic/newrelic-observability-packs/tree/main/packs/'
+  );
+
+  if (!logoUrl) {
+    return packUrl.href;
+  }
+
+  /**
+   * logoUrl looks something like: 'https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.8.2/packs/couchbase/logo.svg'
+   */
+  const [packName] = logoUrl.split('/').slice(-2, -1);
+  packUrl = new URL(packName, packUrl);
+  return packUrl.href;
+};
+
+export default getPackUrl;
diff --git a/yarn.lock b/yarn.lock
index 73714264b..0631c706c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9247,13 +9247,6 @@ gatsby-plugin-use-query-params@^1.0.1:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-use-query-params/-/gatsby-plugin-use-query-params-1.0.1.tgz#5e4982580d2e9bad15d243186cff379afef8a207"
   integrity sha512-k3xaKuf8VhLq6/arocYRZqiQMTQ84ZRY0JklsO4tuKsRqi64b94zGf6B8SZn6yo0fvtJ/zw684DpH77y/iKdbA==
 
-gatsby-plugin-utils@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-1.3.0.tgz"
-  integrity sha512-Avqq9zzkp1ETkzkRx+Dd6Uv+H7WLfyQnQHVwFx+H+SFnULe8kkSSVxh1673TU5918cJI1iO35P8vUF/QWTATRw==
-  dependencies:
-    joi "^17.2.1"
-
 gatsby-plugin-utils@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-utils/-/gatsby-plugin-utils-1.8.0.tgz#1e16c0df3cc96a67005a803b11abb887a3f1fad9"