diff --git a/src/app/components/Code.module.css b/src/app/components/Code.module.css
index e69de29..1073562 100644
--- a/src/app/components/Code.module.css
+++ b/src/app/components/Code.module.css
@@ -0,0 +1,21 @@
+.snippetContainer {
+  border-radius: 10px;
+  background-color: #0b3766;
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.snippetHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #194488;
+  padding: 0.5rem 1rem;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+  font-size: 0.8rem;
+}
+
+.snippetContent {
+  padding: 0.5rem 1rem;
+}
\ No newline at end of file
diff --git a/src/app/components/Code.tsx b/src/app/components/Code.tsx
index 7db4c3b..44b0913 100644
--- a/src/app/components/Code.tsx
+++ b/src/app/components/Code.tsx
@@ -1,15 +1,43 @@
 import styles from './Code.module.css';
 
+function CodeCopyButton() {
+  return (
+    <button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        className="bi bi-clipboard-fill"
+        viewBox="0 0 16 16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z"
+        />
+      </svg>
+    </button>
+  );
+}
+
 export default function Code({
   children,
   language,
+  heading,
 }: {
   children: string;
   language: string;
+  heading: string;
 }) {
   return (
-    <pre className={styles.pre}>
-      <code className={styles.code}>{children}</code>
-    </pre>
+    <div className={styles.snippetContainer}>
+      <div className={styles.snippetHeader}>
+        <div>{heading}</div>
+        <CodeCopyButton />
+      </div>
+      <pre className={styles.snippetContent}>
+        <code className={styles.code}>{children}</code>
+      </pre>
+    </div>
   );
 }
diff --git a/src/app/components/Section.module.css b/src/app/components/Section.module.css
index 16612ea..08feeed 100644
--- a/src/app/components/Section.module.css
+++ b/src/app/components/Section.module.css
@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
-  gap: 1rem;
+  gap: 2rem;
   border-bottom: 1px solid #848586;
   padding: 5rem;
 }
@@ -12,11 +12,13 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    gap: 1rem;
   }
 }
 
 .container>article {
   flex: 1;
+  width: 100%;
 }
 
 .container>article>p {
diff --git a/src/app/components/SideBar.module.css b/src/app/components/SideBar.module.css
index 0e6510b..03a7e61 100644
--- a/src/app/components/SideBar.module.css
+++ b/src/app/components/SideBar.module.css
@@ -1,4 +1,5 @@
 .container {
+  position: sticky;
   display: flex;
   flex-direction: column;
   height: 100%;
diff --git a/src/app/lib/markdoc.ts b/src/app/lib/markdoc.ts
index 309d00c..e7229ae 100644
--- a/src/app/lib/markdoc.ts
+++ b/src/app/lib/markdoc.ts
@@ -41,6 +41,9 @@ const markDocConfig = {
         language: {
           type: 'string',
         },
+        heading: {
+          type: 'string',
+        },
       },
     },
   },
diff --git a/src/docs/version_002/introduction/copy.md b/src/docs/version_002/introduction/copy.md
index ec6e9e5..73f7d60 100644
--- a/src/docs/version_002/introduction/copy.md
+++ b/src/docs/version_002/introduction/copy.md
@@ -3,5 +3,3 @@
 The Onspring API is organized around REST. It enables external programs to retrieve, save, and delete data within your Onspring instance. The Onspring API implements version 3 of the Open API Specification (OAS).
 
 The Onspring API does support bulk operation for some, but not all endpoints. Bulk operations are not supported for endpoints that create, update, or delete data. The one exception is the bulk delete endpoint, which is used to delete multiple records at once.
-
-The Onspring API is used to interact with any Onspring instance regardless of whether it is a development, test, or production instance.
diff --git a/src/docs/version_002/introduction/example.md b/src/docs/version_002/introduction/example.md
index 1a21780..6288694 100644
--- a/src/docs/version_002/introduction/example.md
+++ b/src/docs/version_002/introduction/example.md
@@ -1,7 +1,11 @@
-# Example
+# Base URL
 
-This is the example for the introduction page.
+The base url for the Onspring API will be the same for all instances regardless of whether the instances is a development, test, or production instance.
+
+{% code heading="BASE URL" language="text" %}
+
+```text
+https://api.onspring.com
+```
 
-{% code language="javascript" %}
-console.log('hello world');
 {% /code %}