diff --git a/.github/workflows/dependency-pr.yml b/.github/workflows/dependency-pr.yml
index 460684895..fa22181bb 100644
--- a/.github/workflows/dependency-pr.yml
+++ b/.github/workflows/dependency-pr.yml
@@ -18,12 +18,12 @@ jobs:
     name: Synchronize version
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
           ref: develop
       - name: Setup NodeJS
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Globally update npm
diff --git a/.github/workflows/gh-packages.yml b/.github/workflows/gh-packages.yml
index 6c5e43264..03a83ae17 100644
--- a/.github/workflows/gh-packages.yml
+++ b/.github/workflows/gh-packages.yml
@@ -16,11 +16,11 @@ jobs:
       packages: write
     steps:
       - name: Delete previous oscal-react-library version
-        uses: actions/delete-package-versions@v2.0.1
+        uses: actions/delete-package-versions@v2
         with:
           package-name: oscal-react-library
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup NodeJS
         uses: actions/setup-node@v3
         with:
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 06405c832..451b50f19 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup NodeJS
         uses: actions/setup-node@v3
         with:
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index c174ba144..f5eb27674 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Setup NodeJS
@@ -59,7 +59,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Setup NodeJS
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 083618484..ffd0ff9b6 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -22,7 +22,7 @@ jobs:
     steps:
       # Check out develop branch
       - name: Checkout Code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: develop
 
diff --git a/example/package-lock.json b/example/package-lock.json
index afb5ab7a5..6ca124ed7 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@EasyDynamics/oscal-viewer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@EasyDynamics/oscal-viewer",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "dependencies": {
         "@EasyDynamics/oscal-react-library": "file:..",
         "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
@@ -26,13 +26,14 @@
     },
     "..": {
       "name": "@EasyDynamics/oscal-react-library",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "license": "MIT",
       "dependencies": {
         "@material-ui/core": "^4.12.3",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.60",
         "@material-ui/styles": "^4.11.4",
+        "@monaco-editor/react": "^4.3.1",
         "@testing-library/dom": "^8.11.3",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
@@ -40,8 +41,9 @@
         "prop-types": "^15.8.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-router-dom": "^6.2.1",
+        "react-router-dom": "^6.2.2",
         "react-scripts": "^5.0.0",
+        "react-split": "^2.0.14",
         "web-vitals": "^2.1.2"
       },
       "devDependencies": {
@@ -35050,6 +35052,7 @@
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.60",
         "@material-ui/styles": "^4.11.4",
+        "@monaco-editor/react": "^4.3.1",
         "@storybook/addon-actions": "^6.4.19",
         "@storybook/addon-docs": "^6.4.19",
         "@storybook/addon-essentials": "^6.4.19",
@@ -35083,8 +35086,9 @@
         "prop-types": "^15.8.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-router-dom": "^6.2.1",
+        "react-router-dom": "^6.2.2",
         "react-scripts": "^5.0.0",
+        "react-split": "^2.0.14",
         "web-vitals": "^2.1.2",
         "webpack": "^5.69.1"
       },
diff --git a/example/package.json b/example/package.json
index 4695c4dbc..c3e698442 100644
--- a/example/package.json
+++ b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@EasyDynamics/oscal-viewer",
   "homepage": ".",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": "true",
   "repository": {
     "type": "git",
diff --git a/example/src/App.js b/example/src/App.js
index af1813056..94170a774 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -181,7 +181,7 @@ function App() {
             Profile Viewer
           </MenuItem>
         </Menu>
-        <Container component="main">
+        <Container maxWidth="xl" component="main">
           <Routes>
             <Route
               exact
diff --git a/package-lock.json b/package-lock.json
index ef3253646..777f6a4c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,19 @@
 {
   "name": "@EasyDynamics/oscal-react-library",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@EasyDynamics/oscal-react-library",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "license": "MIT",
       "dependencies": {
         "@material-ui/core": "^4.12.3",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.60",
         "@material-ui/styles": "^4.11.4",
+        "@monaco-editor/react": "^4.3.1",
         "@testing-library/dom": "^8.11.3",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.3",
@@ -20,8 +21,9 @@
         "prop-types": "^15.8.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-router-dom": "^6.2.1",
+        "react-router-dom": "^6.2.2",
         "react-scripts": "^5.0.0",
+        "react-split": "^2.0.14",
         "web-vitals": "^2.1.2"
       },
       "devDependencies": {
@@ -3835,6 +3837,31 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
+      "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
+      "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.2.0",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -26348,6 +26375,12 @@
       "integrity": "sha1-EUyUlnPiqKNenTV4hSeqN7Z52is=",
       "dev": true
     },
+    "node_modules/monaco-editor": {
+      "version": "0.32.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.1.tgz",
+      "integrity": "sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==",
+      "peer": true
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -29460,9 +29493,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
-      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
       "dependencies": {
         "history": "^5.2.0"
       },
@@ -29471,12 +29504,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
-      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
       "dependencies": {
         "history": "^5.2.0",
-        "react-router": "6.2.1"
+        "react-router": "6.2.2"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -31122,6 +31155,18 @@
         "throttle-debounce": "^3.0.1"
       }
     },
+    "node_modules/react-split": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz",
+      "integrity": "sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==",
+      "dependencies": {
+        "prop-types": "^15.5.7",
+        "split.js": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "13.5.3",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz",
@@ -33613,6 +33658,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split.js": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
+      "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -33659,6 +33709,11 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz",
       "integrity": "sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -40094,6 +40149,23 @@
       "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==",
       "dev": true
     },
+    "@monaco-editor/loader": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.2.0.tgz",
+      "integrity": "sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==",
+      "requires": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "@monaco-editor/react": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.3.1.tgz",
+      "integrity": "sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==",
+      "requires": {
+        "@monaco-editor/loader": "^1.2.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -57327,6 +57399,12 @@
       "integrity": "sha1-EUyUlnPiqKNenTV4hSeqN7Z52is=",
       "dev": true
     },
+    "monaco-editor": {
+      "version": "0.32.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.1.tgz",
+      "integrity": "sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==",
+      "peer": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -59767,20 +59845,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
-      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
       "requires": {
         "history": "^5.2.0"
       }
     },
     "react-router-dom": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
-      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
       "requires": {
         "history": "^5.2.0",
-        "react-router": "6.2.1"
+        "react-router": "6.2.2"
       }
     },
     "react-scripts": {
@@ -60799,6 +60877,15 @@
         "throttle-debounce": "^3.0.1"
       }
     },
+    "react-split": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz",
+      "integrity": "sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==",
+      "requires": {
+        "prop-types": "^15.5.7",
+        "split.js": "^1.6.0"
+      }
+    },
     "react-syntax-highlighter": {
       "version": "13.5.3",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz",
@@ -62773,6 +62860,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "split.js": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz",
+      "integrity": "sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -62812,6 +62904,11 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.1.tgz",
       "integrity": "sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg=="
     },
+    "state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
diff --git a/package.json b/package.json
index c9f195242..ef36c5267 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@EasyDynamics/oscal-react-library",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "EasyDynamics",
   "license": "MIT",
   "repository": {
@@ -21,6 +21,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
+    "@monaco-editor/react": "^4.3.1",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
@@ -28,8 +29,9 @@
     "prop-types": "^15.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
+    "react-split": "^2.0.14",
     "web-vitals": "^2.1.2"
   },
   "scripts": {
diff --git a/src/components/OSCALCatalog.js b/src/components/OSCALCatalog.js
index 367f35d9f..ebfa70f62 100644
--- a/src/components/OSCALCatalog.js
+++ b/src/components/OSCALCatalog.js
@@ -1,22 +1,13 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
 import ListSubheader from "@material-ui/core/ListSubheader";
+import { useLoaderStyles } from "./OSCALLoaderStyles";
 import OSCALMetadata from "./OSCALMetadata";
 import OSCALCatalogGroup from "./OSCALCatalogGroup";
 import OSCALBackMatter from "./OSCALBackMatter";
 
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    marginTop: theme.spacing(2),
-    display: "flex",
-    flexDirection: "column",
-  },
-}));
-
 export default function OSCALCatalog(props) {
-  const classes = useStyles();
-
+  const classes = useLoaderStyles();
   props.onResolutionComplete();
 
   return (
diff --git a/src/components/OSCALComponentDefinition.js b/src/components/OSCALComponentDefinition.js
index 2ecba6173..9029803b4 100644
--- a/src/components/OSCALComponentDefinition.js
+++ b/src/components/OSCALComponentDefinition.js
@@ -1,26 +1,18 @@
 import React, { useState, useEffect } from "react";
-import { makeStyles } from "@material-ui/core/styles";
 import OSCALMetadata from "./OSCALMetadata";
 import OSCALComponentDefinitionControlImplementation from "./OSCALComponentDefinitionControlImplementation";
 import OSCALComponentResolveSources from "./oscal-utils/OSCALComponentResolver";
 import OSCALComponentDefinitionComponent from "./OSCALComponentDefinitionComponent";
 import OSCALBackMatter from "./OSCALBackMatter";
 import OSCALProfileCatalogInheritance from "./OSCALProfileCatalogInheritance";
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    marginTop: theme.spacing(2),
-    display: "flex",
-    flexDirection: "column",
-  },
-}));
+import { useLoaderStyles } from "./OSCALLoaderStyles";
 
 export default function OSCALComponentDefinition(props) {
   const [error, setError] = useState(null);
   const [isLoaded, setIsLoaded] = useState(false);
   const [inheritedProfilesAndCatalogs, setInheritedProfilesAndCatalogs] =
     useState({});
-  const classes = useStyles();
+  const classes = useLoaderStyles();
 
   useEffect(() => {
     OSCALComponentResolveSources(
diff --git a/src/components/OSCALJsonEditor.js b/src/components/OSCALJsonEditor.js
new file mode 100644
index 000000000..f7b2b478d
--- /dev/null
+++ b/src/components/OSCALJsonEditor.js
@@ -0,0 +1,96 @@
+import React, { useRef } from "react";
+import Button from "@material-ui/core/Button";
+import Editor from "@monaco-editor/react";
+import { Grid, makeStyles, Typography } from "@material-ui/core";
+import SaveIcon from "@material-ui/icons/Save";
+import CancelIcon from "@material-ui/icons/Cancel";
+
+export default function OSCALJsonEditor(props) {
+  const useStyles = makeStyles((theme) => ({
+    grid: {
+      paddingRight: theme.spacing(1),
+      top: theme.spacing(1),
+      position: "sticky",
+      overflow: "hidden",
+    },
+    buttonGrid: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    editor: {
+      width: "100%",
+    },
+  }));
+  const classes = useStyles();
+  const editorRef = useRef(props.editorRef);
+
+  const editorOptions = {
+    minimap: {
+      enabled: false,
+    },
+    scrollbar: {
+      verticalHasArrows: true,
+    },
+    tabSize: 2,
+  };
+
+  return (
+    <Grid
+      container
+      className={classes.grid}
+      direction="column"
+      data-testid="container"
+    >
+      <Grid item>
+        <Typography variant="h6">JSON Editor</Typography>
+      </Grid>
+      <Grid className={classes.editor} item>
+        <Editor
+          height="85vh"
+          options={editorOptions}
+          onMount={(editor) => {
+            editorRef.current = editor;
+          }}
+          value={props.value}
+          defaultLanguage="json"
+        />
+      </Grid>
+      <Grid item>
+        <Grid
+          className={classes.buttonGrid}
+          container
+          spacing={2}
+          justifyContent="flex-end"
+          data-testid="button-grid"
+        >
+          <Grid item>
+            <Button
+              onClick={() => {
+                editorRef.current.setValue(props.value);
+              }}
+              startIcon={<CancelIcon data-testid="cancel-icon" />}
+              variant="contained"
+              color="secondary"
+              data-testid="cancel-button"
+            >
+              Cancel
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              onClick={() => {
+                props.onSave(editorRef.current.getValue());
+              }}
+              startIcon={<SaveIcon data-testid="save-icon" />}
+              variant="contained"
+              color="primary"
+              data-testid="save-button"
+            >
+              Save
+            </Button>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/src/components/OSCALJsonEditor.test.js b/src/components/OSCALJsonEditor.test.js
new file mode 100644
index 000000000..cd5863b28
--- /dev/null
+++ b/src/components/OSCALJsonEditor.test.js
@@ -0,0 +1,131 @@
+import { React } from "react";
+import {
+  act,
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  within,
+} from "@testing-library/react";
+import OSCALJsonEditor from "./OSCALJsonEditor";
+
+const oscalData = {
+  "component-definition": {
+    metadata: {
+      title: "Test Component Definition",
+      version: "20200723",
+      "last-modified": "2021-06-08T13:57:28.355446-04:00",
+      parties: [
+        {
+          type: "organization",
+          uuid: "ee47836c-877c-4007-bbf3-c9d9bd805a9a",
+          name: "Test Vendor",
+        },
+      ],
+      "oscal-version": "1.0.0",
+    },
+  },
+};
+oscalData.oscalSource = JSON.stringify(oscalData, null, "\t");
+
+jest.mock(
+  "@monaco-editor/react",
+  () =>
+    function Editor(props) {
+      const fragment = (
+        <textarea
+          data-testid="mocked-editor"
+          onChange={jest.fn()}
+          value={props.value}
+        />
+      );
+      return fragment;
+    }
+);
+
+describe("OSCALJsonEditor", () => {
+  // This could generally be improved by using
+  // snapshot testing https://jestjs.io/docs/snapshot-testing
+  it("should render as expected", async () => {
+    render(<OSCALJsonEditor value={oscalData.oscalSource} />);
+
+    const container = await screen.findByTestId("container");
+
+    const heading = within(container).getByText("JSON Editor");
+    expect(heading).toBeInstanceOf(HTMLHeadingElement);
+    expect(heading).toHaveClass("MuiTypography-h6");
+
+    const buttonGrid = within(container).getByTestId("button-grid");
+    expect(buttonGrid).toHaveClass("MuiGrid-justify-content-xs-flex-end");
+
+    const saveButton = within(buttonGrid).getByTestId("save-button");
+    expect(saveButton).toHaveTextContent("Save");
+    expect(saveButton).toBeInstanceOf(HTMLButtonElement);
+    expect(saveButton).toHaveClass("MuiButton-containedPrimary");
+
+    const saveIcon = within(saveButton).getByTestId("save-icon");
+    expect(saveIcon).toBeInstanceOf(SVGElement);
+
+    const cancelButon = within(buttonGrid).getByTestId("cancel-button");
+    expect(cancelButon).toHaveTextContent("Cancel");
+    expect(cancelButon).toBeInstanceOf(HTMLButtonElement);
+    expect(cancelButon).toHaveClass("MuiButton-containedSecondary");
+  });
+
+  it("should return JSON after clicking save", async () => {
+    const mockEditorRef = {
+      getValue: jest.fn().mockReturnValue(oscalData),
+    };
+    const handleSave = jest.fn((jsonValue) => jsonValue);
+
+    render(
+      <OSCALJsonEditor
+        editorRef={mockEditorRef}
+        value={oscalData.oscalSource}
+        onSave={handleSave}
+      />
+    );
+
+    const container = await screen.findByTestId("container");
+    const saveButton = within(container).getByTestId("save-button");
+
+    act(() => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      expect(mockEditorRef.getValue).toBeCalledTimes(1);
+      expect(handleSave).toBeCalledTimes(1);
+      expect(handleSave).lastReturnedWith(oscalData);
+    });
+  });
+
+  it("should replace original value after clicking cancel", async () => {
+    const mockEditorRef = {
+      setValue: jest.fn(),
+    };
+    const handleSave = jest.fn((jsonValue) => jsonValue);
+
+    render(
+      <OSCALJsonEditor
+        editorRef={mockEditorRef}
+        value={oscalData.oscalSource}
+        onSave={handleSave}
+      />
+    );
+
+    const container = await screen.findByTestId("container");
+    const cancelButton = within(container).getByTestId("cancel-button");
+
+    act(() => {
+      fireEvent.click(cancelButton);
+    });
+
+    await waitFor(() => {
+      expect(mockEditorRef.setValue).toBeCalledTimes(1);
+      expect(mockEditorRef.setValue).toHaveBeenLastCalledWith(
+        oscalData.oscalSource
+      );
+    });
+  });
+});
diff --git a/src/components/OSCALLoader.js b/src/components/OSCALLoader.js
index 74cc37945..a882469d3 100644
--- a/src/components/OSCALLoader.js
+++ b/src/components/OSCALLoader.js
@@ -1,11 +1,16 @@
 import React, { useState, useEffect, useRef } from "react";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import Split from "react-split";
+import { makeStyles } from "@material-ui/core/styles";
+import { Box, Fab } from "@material-ui/core";
+import CodeIcon from "@material-ui/icons/Code";
 import ErrorBoundary, { BasicError } from "./ErrorBoundary";
 import OSCALSsp from "./OSCALSsp";
 import OSCALCatalog from "./OSCALCatalog";
 import OSCALComponentDefinition from "./OSCALComponentDefinition";
 import OSCALProfile from "./OSCALProfile";
 import OSCALLoaderForm from "./OSCALLoaderForm";
+import OSCALJsonEditor from "./OSCALJsonEditor";
 
 const oscalObjectTypes = {
   catalog: {
@@ -42,6 +47,30 @@ const oscalObjectTypes = {
   },
 };
 
+const useStyles = makeStyles((theme) => ({
+  split: {
+    display: "flex",
+    flexDirection: " row",
+    "& > .gutter": {
+      backgroundColor: "#eee",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "50%",
+      "&.gutter-horizontal": {
+        backgroundImage:
+          "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')",
+        cursor: "col-resize",
+      },
+    },
+  },
+  toolbar: {
+    position: "sticky",
+    display: "flex",
+    justifyContent: "flex-start",
+    marginBottom: theme.spacing(1),
+    zIndex: 1,
+  },
+}));
+
 function populatePartialPatchData(data, editedFieldJsonPath, newValue) {
   if (editedFieldJsonPath.length === 1) {
     const editData = data;
@@ -57,6 +86,7 @@ function populatePartialPatchData(data, editedFieldJsonPath, newValue) {
 }
 
 export default function OSCALLoader(props) {
+  const classes = useStyles();
   const [isLoaded, setIsLoaded] = useState(false);
   const [isResolutionComplete, setIsResolutionComplete] = useState(false);
   const [isRestMode, setIsRestMode] = useState(
@@ -64,6 +94,7 @@ export default function OSCALLoader(props) {
   );
   const [oscalData, setOscalData] = useState([]);
   const [oscalUrl, setOscalUrl] = useState(isRestMode ? null : props.oscalUrl);
+  const [editorIsVisible, setEditorIsVisble] = useState(true);
   const unmounted = useRef(false);
   const [error, setError] = useState(null);
   // We "count" the number of times the reload button has been pressed (when active).
@@ -93,6 +124,39 @@ export default function OSCALLoader(props) {
       .then(
         (result) => {
           if (!unmounted.current) {
+            // TODO https://github.com/EasyDynamics/oscal-react-library/issues/297
+            /* eslint no-param-reassign: "error" */
+            result.oscalSource = JSON.stringify(result, null, "\t");
+            setOscalData(result);
+            setIsLoaded(true);
+          }
+        },
+        (err) => handleFetchError(err)
+      );
+  };
+
+  const handleRestRequest = (httpMethod, url, data) => {
+    setIsLoaded(false);
+    setIsResolutionComplete(false);
+    const requestInfo = {
+      method: httpMethod,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(data),
+    };
+    fetch(url, requestInfo)
+      .then((response) => {
+        if (!response.ok) throw new Error(response.status);
+        else return response.json();
+      })
+      .then(
+        (result) => {
+          if (!unmounted.current) {
+            // TODO https://github.com/EasyDynamics/oscal-react-library/issues/297
+            /* eslint no-param-reassign: "error" */
+            result.oscalSource = JSON.stringify(result, null, "\t");
             setOscalData(result);
             setIsLoaded(true);
           }
@@ -117,32 +181,12 @@ export default function OSCALLoader(props) {
     restPath
   ) => {
     const url = `${process.env.REACT_APP_REST_BASE_URL}/${restPath}/${partialPatchData[jsonRootName].uuid}`;
-
     populatePartialPatchData(partialPatchData, editedFieldJsonPath, newValue);
+    handleRestRequest("PATCH", url, partialPatchData);
+  };
 
-    setIsLoaded(false);
-    setIsResolutionComplete(false);
-
-    fetch(url, {
-      method: "PATCH",
-      body: JSON.stringify(partialPatchData),
-    })
-      .then(
-        (response) => {
-          if (!response.ok) throw new Error(response.status);
-          else return response.json();
-        },
-        (err) => handleFetchError(err)
-      )
-      .then(
-        (result) => {
-          if (!unmounted.current) {
-            setOscalData(result);
-            setIsLoaded(true);
-          }
-        },
-        (err) => handleFetchError(err)
-      );
+  const handleRestPut = (jsonString) => {
+    handleRestRequest("PUT", oscalUrl, JSON.parse(jsonString));
   };
 
   const handleUrlChange = (event) => {
@@ -219,12 +263,53 @@ export default function OSCALLoader(props) {
   } else if (!isLoaded) {
     result = <CircularProgress />;
   } else if (oscalUrl) {
-    result = props.renderer(
-      isRestMode,
-      oscalData,
-      oscalUrl,
-      onResolutionComplete,
-      handleRestPatch
+    result = isRestMode ? (
+      <>
+        <Box className={classes.toolbar}>
+          <Fab
+            aria-label="show code"
+            color={editorIsVisible ? "default" : "primary"}
+            size="small"
+            onClick={() => {
+              setEditorIsVisble(!editorIsVisible);
+            }}
+          >
+            <CodeIcon />
+          </Fab>
+        </Box>
+        <Split
+          className={classes.split}
+          gutterSize={editorIsVisible ? 10 : 0}
+          minSize={editorIsVisible ? 300 : 0}
+          sizes={editorIsVisible ? [34, 66] : [0, 100]}
+        >
+          <Box display={editorIsVisible ? "block" : "none"}>
+            <OSCALJsonEditor
+              value={oscalData.oscalSource}
+              onSave={handleRestPut}
+            />
+          </Box>
+          <Box>
+            {props.renderer(
+              isRestMode,
+              oscalData,
+              oscalUrl,
+              onResolutionComplete,
+              handleRestPatch
+            )}
+          </Box>
+        </Split>
+      </>
+    ) : (
+      <>
+        {props.renderer(
+          isRestMode,
+          oscalData,
+          oscalUrl,
+          onResolutionComplete,
+          handleRestPatch
+        )}
+      </>
     );
   }
 
diff --git a/src/components/OSCALLoaderForm.js b/src/components/OSCALLoaderForm.js
index a796343fb..cdfce72c7 100644
--- a/src/components/OSCALLoaderForm.js
+++ b/src/components/OSCALLoaderForm.js
@@ -14,7 +14,7 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 const useStyles = makeStyles((theme) => ({
   catalogForm: {
     marginTop: theme.spacing(4),
-    marginBottom: theme.spacing(4),
+    marginBottom: theme.spacing(2),
   },
 }));
 
@@ -63,27 +63,9 @@ export default function OSCALLoaderForm(props) {
       }}
     >
       <Grid container spacing={3}>
-        {process.env.REACT_APP_REST_BASE_URL && (
-          <>
-            <Grid item xs={10} />
-            <Grid item xs={2}>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={props.isRestMode}
-                    color="primary"
-                    onChange={props.onChangeRestMode}
-                    name="isRestMode"
-                  />
-                }
-                label="REST Mode"
-              />
-            </Grid>
-          </>
-        )}
         {!props.isRestMode ? (
           <>
-            <Grid item xs={10}>
+            <Grid item xs={6} md={9}>
               <TextField
                 id="oscal-url"
                 label={`OSCAL ${props.oscalObjectType.name} URL`}
@@ -94,9 +76,10 @@ export default function OSCALLoaderForm(props) {
                 onChange={props.onUrlChange}
               />
             </Grid>
-            <Grid item xs={2}>
+            <Grid item xs={4} md={2}>
               <Button
                 variant="contained"
+                size="large"
                 color="primary"
                 endIcon={<ReplayIcon>send</ReplayIcon>}
                 onClick={props.onReloadClick}
@@ -107,7 +90,7 @@ export default function OSCALLoaderForm(props) {
             </Grid>
           </>
         ) : (
-          <Grid item xs={10}>
+          <Grid item xs={10} md={11}>
             <FormControl fullWidth variant="outlined">
               <InputLabel id="oscal-object-select-label">
                 Select OSCAL {props.oscalObjectType.name}
@@ -135,6 +118,21 @@ export default function OSCALLoaderForm(props) {
             </FormControl>
           </Grid>
         )}
+        {process.env.REACT_APP_REST_BASE_URL && (
+          <Grid item xs={2} md={1}>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={props.isRestMode}
+                  color="primary"
+                  onChange={props.onChangeRestMode}
+                  name="isRestMode"
+                />
+              }
+              label="REST Mode"
+            />
+          </Grid>
+        )}
       </Grid>
     </form>
   );
diff --git a/src/components/OSCALLoaderStyles.js b/src/components/OSCALLoaderStyles.js
new file mode 100644
index 000000000..a387f4cb2
--- /dev/null
+++ b/src/components/OSCALLoaderStyles.js
@@ -0,0 +1,14 @@
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+
+const useLoaderStyles = makeStyles((theme) =>
+  createStyles({
+    paper: {
+      paddingLeft: theme.spacing(2),
+      display: "flex",
+      flexDirection: "column",
+    },
+  })
+);
+
+// eslint-disable-next-line import/prefer-default-export
+export { useLoaderStyles };
diff --git a/src/components/OSCALMetadata.js b/src/components/OSCALMetadata.js
index aa1c48b6e..bba4da7e8 100644
--- a/src/components/OSCALMetadata.js
+++ b/src/components/OSCALMetadata.js
@@ -13,6 +13,9 @@ import { makeStyles } from "@material-ui/core/styles";
 import OSCALEditableTextField from "./OSCALEditableTextField";
 
 const useStyles = makeStyles((theme) => ({
+  OSCALMetadataTitle: {
+    height: "56px",
+  },
   OSCALMetadataAdditional: {
     padding: theme.spacing(1),
   },
@@ -29,7 +32,6 @@ const useStyles = makeStyles((theme) => ({
   OSCALMetadataPartiesHeader: {
     backgroundColor: theme.palette.background.paper,
   },
-
   OSCALMetadataVersion: {
     marginLeft: theme.spacing(1),
   },
@@ -60,133 +62,146 @@ export default function OSCALMetadata(props) {
       .join(", ");
 
   return (
-    <Grid container spacing={3}>
-      <Grid container direction="row" alignItems="center">
-        <OSCALEditableTextField
-          canEdit={props.isEditable}
-          editedField={
-            props.isEditable
-              ? [Object.keys(props.patchData)[0], "metadata", "title"]
-              : null
-          }
-          onFieldSave={props.onFieldSave}
-          patchData={
-            props.isEditable
-              ? {
-                  [Object.keys(props.patchData)[0]]: {
-                    uuid: props.patchData[Object.keys(props.patchData)[0]].uuid,
-                    metadata: {
-                      title: props.metadata.title,
+    <Grid container>
+      <Grid item xs={12}>
+        <Grid
+          className={classes.OSCALMetadataTitle}
+          container
+          direction="row"
+          alignItems="center"
+        >
+          <OSCALEditableTextField
+            canEdit={props.isEditable}
+            editedField={
+              props.isEditable
+                ? [Object.keys(props.patchData)[0], "metadata", "title"]
+                : null
+            }
+            onFieldSave={props.onFieldSave}
+            patchData={
+              props.isEditable
+                ? {
+                    [Object.keys(props.patchData)[0]]: {
+                      uuid: props.patchData[Object.keys(props.patchData)[0]]
+                        .uuid,
+                      metadata: {
+                        title: props.metadata.title,
+                      },
                     },
-                  },
-                }
-              : null
-          }
-          size={6}
-          textFieldSize="medium"
-          typographyVariant="h6"
-          value={props.metadata.title}
-        />
-      </Grid>
-      <Grid item xs={8}>
-        <Paper className={classes.OSCALMetadataParties}>
-          <List
-            subheader={
-              <ListSubheader
-                className={classes.OSCALMetadataPartiesHeader}
-                component="div"
-                id="oscal-metadata-parties"
-              >
-                Parties
-              </ListSubheader>
+                  }
+                : null
             }
-          >
-            {props.metadata.parties?.map((party) => (
-              <ListItem key={`${party.uuid}-parties-listItem`}>
-                <ListItemAvatar>
-                  <Avatar>
-                    {party.type === "organization" ? <GroupIcon /> : null}
-                  </Avatar>
-                </ListItemAvatar>
-                <ListItemText
-                  primary={party.name}
-                  secondary={getPartyRolesText(party)}
-                />
-              </ListItem>
-            ))}
-          </List>
-        </Paper>
+            size={6}
+            textFieldSize="medium"
+            typographyVariant="h6"
+            value={props.metadata.title}
+          />
+        </Grid>
       </Grid>
-      <Grid item xs={4}>
-        <Paper className={classes.OSCALMetadataAdditional}>
-          <Grid container direction="row" alignItems="center">
-            <Grid item className={classes.OSCALMetadataVersion}>
-              <Typography
-                variant="body2"
-                className={classes.OSCALMetadataLabel}
-              >
-                Version:
-              </Typography>
-            </Grid>
-            <OSCALEditableTextField
-              canEdit={props.isEditable}
-              className={classes.OSCALMetadataVersion}
-              editedField={
-                props.isEditable
-                  ? [Object.keys(props.patchData)[0], "metadata", "version"]
-                  : null
-              }
-              onFieldSave={props.onFieldSave}
-              patchData={
-                props.isEditable
-                  ? {
-                      [Object.keys(props.patchData)[0]]: {
-                        uuid: props.patchData[Object.keys(props.patchData)[0]]
-                          .uuid,
-                        metadata: {
-                          version: props.metadata.version,
-                        },
-                      },
-                    }
-                  : null
-              }
-              size={4}
-              textFieldSize="small"
-              typographyVariant="body2"
-              value={props.metadata.version}
-            />
-          </Grid>
-          <Grid container spacing={1} direction="row" alignItems="center">
-            <Grid item className={classes.OSCALMetadataVersion}>
-              <Typography
-                variant="body2"
-                className={classes.OSCALMetadataLabel}
+      <Grid item xs={12}>
+        <Grid container spacing={3}>
+          <Grid item xs={8}>
+            <Paper className={classes.OSCALMetadataParties}>
+              <List
+                subheader={
+                  <ListSubheader
+                    className={classes.OSCALMetadataPartiesHeader}
+                    component="div"
+                    id="oscal-metadata-parties"
+                  >
+                    Parties
+                  </ListSubheader>
+                }
               >
-                Last Modified:
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography variant="body2">
-                {formatDate(props.metadata["last-modified"])}
-              </Typography>
-            </Grid>
+                {props.metadata.parties?.map((party) => (
+                  <ListItem key={`${party.uuid}-parties-listItem`}>
+                    <ListItemAvatar>
+                      <Avatar>
+                        {party.type === "organization" ? <GroupIcon /> : null}
+                      </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText
+                      primary={party.name}
+                      secondary={getPartyRolesText(party)}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </Paper>
           </Grid>
-          <Grid container spacing={1} direction="row" alignItems="center">
-            <Grid item className={classes.OSCALMetadataVersion}>
-              <Typography
-                variant="body2"
-                className={classes.OSCALMetadataLabel}
-              >
-                OSCAL Version:
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography variant="body2">
-                {props.metadata["oscal-version"]}
-              </Typography>
-            </Grid>
+          <Grid item xs={4}>
+            <Paper className={classes.OSCALMetadataAdditional}>
+              <Grid container direction="row" alignItems="center">
+                <Grid item className={classes.OSCALMetadataVersion}>
+                  <Typography
+                    variant="body2"
+                    className={classes.OSCALMetadataLabel}
+                  >
+                    Version:
+                  </Typography>
+                </Grid>
+                <OSCALEditableTextField
+                  canEdit={props.isEditable}
+                  className={classes.OSCALMetadataVersion}
+                  editedField={
+                    props.isEditable
+                      ? [Object.keys(props.patchData)[0], "metadata", "version"]
+                      : null
+                  }
+                  onFieldSave={props.onFieldSave}
+                  patchData={
+                    props.isEditable
+                      ? {
+                          [Object.keys(props.patchData)[0]]: {
+                            uuid: props.patchData[
+                              Object.keys(props.patchData)[0]
+                            ].uuid,
+                            metadata: {
+                              version: props.metadata.version,
+                            },
+                          },
+                        }
+                      : null
+                  }
+                  size={4}
+                  textFieldSize="small"
+                  typographyVariant="body2"
+                  value={props.metadata.version}
+                />
+              </Grid>
+              <Grid container spacing={1} direction="row" alignItems="center">
+                <Grid item className={classes.OSCALMetadataVersion}>
+                  <Typography
+                    variant="body2"
+                    className={classes.OSCALMetadataLabel}
+                  >
+                    Last Modified:
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Typography variant="body2">
+                    {formatDate(props.metadata["last-modified"])}
+                  </Typography>
+                </Grid>
+              </Grid>
+              <Grid container spacing={1} direction="row" alignItems="center">
+                <Grid item className={classes.OSCALMetadataVersion}>
+                  <Typography
+                    variant="body2"
+                    className={classes.OSCALMetadataLabel}
+                  >
+                    OSCAL Version:
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Typography variant="body2">
+                    {props.metadata["oscal-version"]}
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Paper>
           </Grid>
-        </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );
diff --git a/src/components/OSCALProfile.js b/src/components/OSCALProfile.js
index 0b0956a50..7e89a44c1 100644
--- a/src/components/OSCALProfile.js
+++ b/src/components/OSCALProfile.js
@@ -1,23 +1,15 @@
 import React, { useState, useEffect, useRef } from "react";
-import { makeStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
 import ListSubheader from "@material-ui/core/ListSubheader";
 import Skeleton from "@material-ui/lab/Skeleton";
 import CardContent from "@material-ui/core/CardContent";
+import { useLoaderStyles } from "./OSCALLoaderStyles";
 import OSCALMetadata from "./OSCALMetadata";
 import OSCALControl from "./OSCALControl";
 import OSCALBackMatter from "./OSCALBackMatter";
 import { OSCALResolveProfile } from "./oscal-utils/OSCALProfileResolver";
 import OSCALProfileCatalogInheritance from "./OSCALProfileCatalogInheritance";
 
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    marginTop: theme.spacing(2),
-    display: "flex",
-    flexDirection: "column",
-  },
-}));
-
 /**
  * Displays a given OSCAL Profile is an easily consumable format. According to NIST, a profile
  * represents the baseline of selected controls from one or more control catalogs.
@@ -31,7 +23,7 @@ export default function OSCALProfile(props) {
   const [inheritedProfilesAndCatalogs, setInheritedProfilesAndCatalogs] =
     useState({});
   const [isLoaded, setIsLoaded] = useState(false);
-  const classes = useStyles();
+  const classes = useLoaderStyles();
   const unmounted = useRef(false);
 
   // Resolved profile using oscal-utils. Provides error when failure.
diff --git a/src/components/OSCALSsp.js b/src/components/OSCALSsp.js
index fc1fc8e0e..e5d6f5143 100644
--- a/src/components/OSCALSsp.js
+++ b/src/components/OSCALSsp.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef } from "react";
-import { makeStyles } from "@material-ui/core/styles";
 import OSCALMetadata from "./OSCALMetadata";
 import OSCALSystemCharacteristics from "./OSCALSystemCharacteristics";
 import OSCALSystemImplementation from "./OSCALSystemImplementation";
@@ -7,17 +6,10 @@ import OSCALControlImplementation from "./OSCALControlImplementation";
 import OSCALSspResolveProfile from "./oscal-utils/OSCALSspResolver";
 import OSCALBackMatter from "./OSCALBackMatter";
 import OSCALProfileCatalogInheritance from "./OSCALProfileCatalogInheritance";
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    marginTop: theme.spacing(2),
-    display: "flex",
-    flexDirection: "column",
-  },
-}));
+import { useLoaderStyles } from "./OSCALLoaderStyles";
 
 export default function OSCALSsp(props) {
-  const classes = useStyles();
+  const classes = useLoaderStyles();
   const [error, setError] = useState(null);
   const [inheritedProfilesAndCatalogs, setInheritedProfilesAndCatalogs] =
     useState({});