diff --git a/index.html b/index.html
index aea806c..109348a 100644
--- a/index.html
+++ b/index.html
@@ -4,26 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>XRAS User Interface Components</title>
-    <!-- <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-      crossorigin="anonymous"
-    />
-    -->
+
+  </head>
+  <body>
+    <div id="resource-catalog-react"></div>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
     />
-  </head>
-  <body>
-    <div id="resource-catalog-react"></div>
-
     <script type="module">
       import {
         resourceCatalog,
         shadowTarget,
-      } from "http://localhost:3000/dist/xras-ui.js";
+      } from "http://localhost:3000/xras-ui.js";
       resourceCatalog({
         target: shadowTarget(
           document.getElementById("resource-catalog-react"),
diff --git a/public/access-resources.png b/public/access-resources.png
deleted file mode 100644
index 544af64..0000000
Binary files a/public/access-resources.png and /dev/null differ
diff --git a/public/access_logo.png b/public/access_logo.png
new file mode 100644
index 0000000..f1a2d09
Binary files /dev/null and b/public/access_logo.png differ
diff --git a/src/bootstrap/access.scss b/src/bootstrap/access.scss
index f35115b..78f282c 100644
--- a/src/bootstrap/access.scss
+++ b/src/bootstrap/access.scss
@@ -1,4 +1,4 @@
-//@import url('http://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,600;0,100,800;1,100,400&#038;display=swap');
+@import url('http://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,600;0,100,800;1,100,400&#038;display=swap');
 
 $primary: #1a5b6e;
 $secondary: #fec42d;
@@ -25,6 +25,7 @@ body,
   --teal-700: #1a5b6e;
   --yellow-400: #ffc42d;
   --orange-400: #f07537;
+  --bs-primary: #1a5b6e;
   // Bootstrap
   --bs-font-sans-serif: "Archivo", sans-serif;
   --bs-link-color: var(--teal-600);
diff --git a/src/main.jsx b/src/main.jsx
index cfce43e..fea125a 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -17,8 +17,8 @@ import PublicationsSelect from "./publications/PublicationsSelect";
 import publicationsConfig from "./publications/helpers/config";
 import { publications_store } from "./publications/helpers/reducers";
 
-import ResourceCatalog from "./resource-catalog/ResourceCatalog";
-import catalogSlice from "./resource-catalog/helpers/catalogSlice";
+import OnRampsResourceCatalog from "./onramps-resource-catalog/ResourceCatalog";
+import catalogSlice from "./onramps-resource-catalog/helpers/catalogSlice";
 
 export function shadowTarget(
   host,
@@ -136,7 +136,7 @@ export function resourceCatalog({ target, catalogSources, onRamps }) {
   });
   ReactDOM.createRoot(target).render(
     <Provider store={store}>
-      <ResourceCatalog catalogSources={catalogSources} onRamps={onRamps} />
+      <OnRampsResourceCatalog catalogSources={catalogSources} onRamps={onRamps} />
     </Provider>
   );
 }
diff --git a/src/resource-catalog/CatalogList.jsx b/src/onramps-resource-catalog/CatalogList.jsx
similarity index 100%
rename from src/resource-catalog/CatalogList.jsx
rename to src/onramps-resource-catalog/CatalogList.jsx
diff --git a/src/resource-catalog/Filter.jsx b/src/onramps-resource-catalog/Filter.jsx
similarity index 100%
rename from src/resource-catalog/Filter.jsx
rename to src/onramps-resource-catalog/Filter.jsx
diff --git a/src/resource-catalog/FilterBar.jsx b/src/onramps-resource-catalog/FilterBar.jsx
similarity index 59%
rename from src/resource-catalog/FilterBar.jsx
rename to src/onramps-resource-catalog/FilterBar.jsx
index fc5ef67..d353601 100644
--- a/src/resource-catalog/FilterBar.jsx
+++ b/src/onramps-resource-catalog/FilterBar.jsx
@@ -9,14 +9,19 @@ const FilterBar = () => {
 
   return (
     <>
-      <Offcanvas show={show} onHide={handleClose}>
-        <Offcanvas.Header closeButton>
-          <Offcanvas.Title>Filters</Offcanvas.Title>
-        </Offcanvas.Header>
-        <Offcanvas.Body>
+      <div className={`offcanvas offcanvas-start ${show ? 'show' : ''}`} tabIndex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+        <div className="offcanvas-header">
+          <h5 className="offcanvas-title" id="offcanvasLabel">Filters</h5>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={handleClose}
+            aria-label="Close"></button>
+        </div>
+        <div className="offcanvas-body">
           <Filters />
-        </Offcanvas.Body>
-      </Offcanvas>
+        </div>
+      </div>
       <div className={`row mb-2`}>
         <div className="col pt-2 pb-2">
           <div className="p-1 pb-0 border-bottom bg-white shadow">
diff --git a/src/resource-catalog/FilterCategory.jsx b/src/onramps-resource-catalog/FilterCategory.jsx
similarity index 100%
rename from src/resource-catalog/FilterCategory.jsx
rename to src/onramps-resource-catalog/FilterCategory.jsx
diff --git a/src/resource-catalog/Filters.jsx b/src/onramps-resource-catalog/Filters.jsx
similarity index 100%
rename from src/resource-catalog/Filters.jsx
rename to src/onramps-resource-catalog/Filters.jsx
diff --git a/src/resource-catalog/Resource.jsx b/src/onramps-resource-catalog/Resource.jsx
similarity index 77%
rename from src/resource-catalog/Resource.jsx
rename to src/onramps-resource-catalog/Resource.jsx
index 8bc41c0..3795565 100644
--- a/src/resource-catalog/Resource.jsx
+++ b/src/onramps-resource-catalog/Resource.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import styles from "./ResourceCatalog.module.scss";
 
 const Resource = ({ resource }) => {
 
@@ -9,7 +10,7 @@ const Resource = ({ resource }) => {
       "CPU Compute": "cpu-fill",
       "GPU Compute": "gpu-card",
       "Cloud" : "cloud-fill",
-      "Commercial Cloud" : "clouds-fill",
+      "Commercial Cloud" : "cloud-fill",
       "Storage": "database-fill",
       "Service / Other": "journal",
       "Innovative / Novel Compute": "pc",
@@ -48,16 +49,16 @@ const Resource = ({ resource }) => {
     let truncated = false;
 
     if (content && content != "") {
-      if(content.length > 400 && showShortDesc){
-        content = `${content.substring(0, 397)}...`;
-        truncated = true;
-      }
+      // if(content.length > 400 && showShortDesc){
+      //   content = `${content.substring(0, 397)}...`;
+      //   truncated = true;
+      // }
 
       const showMoreButton = (
         <button
           role='button'
           type='button'
-
+          className={styles.plainButton}
           onClick={() => setShowShortDesc(false)}
         >
           Read More
@@ -73,7 +74,7 @@ const Resource = ({ resource }) => {
           </div>
           <div className="row mb-3">
             <div className={`col `}>
-              <div dangerouslySetInnerHTML={{ __html: content }} />
+              <div className={styles.description} dangerouslySetInnerHTML={{ __html: content }} />
               {truncated ? showMoreButton : ''}
             </div>
           </div>
@@ -95,7 +96,7 @@ const Resource = ({ resource }) => {
           </div>
           <div className='row mb-3'>
             <div className='col'>
-              <div dangerouslySetInnerHTML={{ __html: resource.recommendedUse }} />
+              <div className={styles.description} dangerouslySetInnerHTML={{ __html: resource.recommendedUse }} />
             </div>
           </div>
         </>
@@ -106,8 +107,7 @@ const Resource = ({ resource }) => {
   }
 
   const headerBg = () => {
-    return "";
-    //return style.cardBg;
+    return styles.cardBg;
   }
 
   return (
@@ -127,20 +127,11 @@ const Resource = ({ resource }) => {
                   {renderFeatures(resource.features)}
                 </div>
               </div>
-
-              { renderDescription() }
               { renderUse() }
-
-
-              {/* <div className='row'>
-                <div className='col'>
-                  <button className='btn btn-info me-2 fw-bold'>Learn More <i className='bi bi-box-arrow-up-right'></i></button>
-                  <button className='btn btn-warning fw-bold'>Request This Resource <i className='bi bi-box-arrow-up-right'></i></button>
-                </div>
-              </div> */}
+              { renderDescription() }
             </div>
             <div className='card-footer'>
-            <button className='btn btn-info me-2 fw-bold'>Learn More <i className='bi bi-box-arrow-up-right'></i></button>
+              <a target='_blank' href={resource.userGuideUrl} className='btn btn-info me-2 fw-bold'>System Info <i className='bi bi-box-arrow-up-right'></i></a>
 
             </div>
           </div>
diff --git a/src/resource-catalog/ResourceCatalog.jsx b/src/onramps-resource-catalog/ResourceCatalog.jsx
similarity index 94%
rename from src/resource-catalog/ResourceCatalog.jsx
rename to src/onramps-resource-catalog/ResourceCatalog.jsx
index 654058a..507f98c 100644
--- a/src/resource-catalog/ResourceCatalog.jsx
+++ b/src/onramps-resource-catalog/ResourceCatalog.jsx
@@ -9,6 +9,7 @@ import {
 import { accessText } from "./helpers/accessText";
 import ResourceList from "./ResourceList";
 import LoadingSpinner from "../shared/LoadingSpinner";
+import styles from "./ResourceCatalog.module.scss";
 
 const ResourceCatalog = ({
   catalogSources = [],
@@ -64,12 +65,11 @@ const ResourceCatalog = ({
   if (!resourcesLoaded) return <LoadingSpinner />;
 
   return (
-    <div className="container mt-3">
+    <div className={`container mt-3 ${styles.access}`}>
       { onRamps ? accessText : ''}
       { renderCatalogDescriptions() }
       <div className="row">
         <div className="col">
-          <button className="btn btn-primary">Button!</button>
           <ResourceList />
         </div>
       </div>
diff --git a/src/resource-catalog/ResourceCatalog.module.scss b/src/onramps-resource-catalog/ResourceCatalog.module.scss
similarity index 52%
rename from src/resource-catalog/ResourceCatalog.module.scss
rename to src/onramps-resource-catalog/ResourceCatalog.module.scss
index e183031..d9308e6 100644
--- a/src/resource-catalog/ResourceCatalog.module.scss
+++ b/src/onramps-resource-catalog/ResourceCatalog.module.scss
@@ -1,3 +1,15 @@
+@import url('http://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,70,400;0,100,400;0,100,600;0,100,800;1,100,400&#038;display=swap');
+$primary: #1a5b6e;
+$secondary: #fec42d;
+$danger: #a70000;
+$info: #00a8d1;
+$warning: #ef7537;
+
+
+.access {
+  font-family: "Archivo", sans-serif;
+}
+
 .resourceName {
   font-size: 1.3rem;
   font-weight: bold;
@@ -14,9 +26,8 @@
 }
 
 .cardBg {
-  // background-color: #1a5b6e;
-  // color: #fff;
-  color: #000;
+  background-color: $primary !important;
+  color: #fff !important;
 }
 
 .active {
diff --git a/src/resource-catalog/ResourceList.jsx b/src/onramps-resource-catalog/ResourceList.jsx
similarity index 100%
rename from src/resource-catalog/ResourceList.jsx
rename to src/onramps-resource-catalog/ResourceList.jsx
diff --git a/src/onramps-resource-catalog/helpers/accessText.jsx b/src/onramps-resource-catalog/helpers/accessText.jsx
new file mode 100644
index 0000000..40e6e08
--- /dev/null
+++ b/src/onramps-resource-catalog/helpers/accessText.jsx
@@ -0,0 +1,37 @@
+export const accessText = (
+  <>
+    <div className="row">
+      <div className="col d-flex">
+        <img alt="Access Logo" style={{ height: "75px" }} src="/access_logo.png" />
+      </div>
+    </div>
+    <div className="row">
+      <div className="col">
+        <h3 className="border-bottom">The ACCESS On-Ramps Program</h3>
+      </div>
+    </div>
+    <div className="row">
+      <div className="col">
+        <p>
+          Need more advanced computing and storage options for your work?
+          The On-Ramps program offers your institution cost-free entry to the nation's
+          cyberinfrastructure resources. Simply select a resource from the catalog below to
+          get started. On-Ramps expands your cyberinfrastructure with many powerful resource options.
+        </p>
+        <p>
+          <a href="https://allocations.access-ci.org" target="_blank">Learn more on our About On-Ramps page</a>
+        </p>
+        <h4 className="border-bottom">About ACCESS</h4>
+        <p>
+          ACCESS is a program established and funded by the National Science Foundation to
+          help researchers and educators, with or without supporting grants,
+          to utilize the nation's advanced computing systems and services — at no cost.
+        </p>
+        <p>
+          <a href="https://access-ci.org" target="_blank">Learn more about ACCESS</a>
+        </p>
+      </div>
+    </div>
+
+  </>
+)
\ No newline at end of file
diff --git a/src/resource-catalog/helpers/catalogSlice.js b/src/onramps-resource-catalog/helpers/catalogSlice.js
similarity index 96%
rename from src/resource-catalog/helpers/catalogSlice.js
rename to src/onramps-resource-catalog/helpers/catalogSlice.js
index 6455123..c72adce 100644
--- a/src/resource-catalog/helpers/catalogSlice.js
+++ b/src/onramps-resource-catalog/helpers/catalogSlice.js
@@ -1,5 +1,4 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
-import sanitizeHtml from "sanitize-html";
 
 const initialState = {
   catalogs: {},
@@ -36,8 +35,6 @@ export const getResources = createAsyncThunk(
       });
     }
 
-    sources.forEach((c) => c.description = sanitizeHtml(c.description));
-
     const apiData = await Promise.all(sources.map( async (src) => {
       const response = await fetch(src.apiUrl);
       const json = await response.json();
@@ -190,9 +187,6 @@ const formatResourceFeatures = (catalog, resource, categories) => {
     const formattedResource = {
       ...resource,
       resourceName: resource.resourceName.trim(),
-      resourceDescription: sanitizeHtml(resource.resourceDescription),
-      recommendedUse: sanitizeHtml(resource.recommendedUse),
-      description: sanitizeHtml(resource.recommendedUse),
       features: featureNames,
       featureIds: featureList.map((f) => f.featureId),
     };
diff --git a/src/resource-catalog/helpers/mocks.jsx b/src/onramps-resource-catalog/helpers/mocks.jsx
similarity index 100%
rename from src/resource-catalog/helpers/mocks.jsx
rename to src/onramps-resource-catalog/helpers/mocks.jsx
diff --git a/src/resource-catalog/ResourceAccordion.jsx b/src/resource-catalog/ResourceAccordion.jsx
deleted file mode 100644
index 742f8ca..0000000
--- a/src/resource-catalog/ResourceAccordion.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Accordion from "react-bootstrap/Accordion";
-
-const ResourceAccordion = ({ resource }) => {
-
-  const renderFeatures = (features) => {
-    if (features.length == 0) {
-      return "";
-    }
-
-    return (
-      <ul>
-        {features.map((f, i) => {
-          return (<li key={`feature_${resource.resourceId}_${i}`}>{f}</li>);
-        })}
-      </ul>
-    );
-  };
-
-  const renderDescription = (title, content) => {
-    if (content && content != "") {
-      return (
-        <>
-          <div className="row">
-            <div className="col fw-bold">{title}</div>
-          </div>
-          <div className="row mb-3">
-            <div
-              className="col"
-              dangerouslySetInnerHTML={{ __html: content }}
-            />
-          </div>
-        </>
-      );
-    }
-    return "";
-  };
-
-  return (
-    <Accordion.Item eventKey={resource.resourceId}>
-      <Accordion.Header>
-        {resource.resourceName}
-      </Accordion.Header>
-      <Accordion.Body>
-        <table className="table">
-          <tbody>
-            <tr>
-              <td className="fw-bold">Resource Type:</td>
-              <td>{resource.resourceType}</td>
-            </tr>
-            <tr>
-              <td className="fw-bold">Organization:</td>
-              <td>{resource.organization}</td>
-            </tr>
-            <tr>
-              <td className="fw-bold">Units:</td>
-              <td>{resource.units}</td>
-            </tr>
-            <tr>
-              <td className="fw-bold">User Guide:</td>
-              <td>
-                {resource.userGuideUrl == "" ? (
-                  ""
-                ) : (
-                  <a
-                    href={resource.userGuideUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Link to User Guide
-                  </a>
-                )}
-              </td>
-            </tr>
-            <tr>
-              <td className="fw-bold">Features Available:</td>
-              <td>{renderFeatures(resource.features)}</td>
-            </tr>
-          </tbody>
-        </table>
-        {renderDescription(
-          "Resource Description",
-          resource.resourceDescription
-        )}
-        {renderDescription("Allocations Description", resource.description)}
-        {renderDescription("Recommended Use", resource.recommendedUse)}
-      </Accordion.Body>
-    </Accordion.Item>
-  );
-};
-
-export default ResourceAccordion;
diff --git a/src/resource-catalog/ResourceAccordions.jsx b/src/resource-catalog/ResourceAccordions.jsx
deleted file mode 100644
index a07ad60..0000000
--- a/src/resource-catalog/ResourceAccordions.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useSelector } from "react-redux";
-import ResourceAccordion from "./ResourceAccordion";
-import { selectResources } from "./helpers/catalogSlice";
-import Accordion from "react-bootstrap/Accordion";
-
-const ResourceAccordions = () => {
-  const resources = useSelector(selectResources);
-
-  if (resources.length == 0) {
-    return <div className="fw-bold">No Resources Match Your Filters</div>;
-  }
-
-  return (
-    <div>
-      <h4 className="mb-0">Resources</h4>
-      <Accordion>
-        {resources.map((r) => (
-          <ResourceAccordion resource={r} key={r.resourceId} />
-        ))}
-      </Accordion>
-    </div>
-  );
-};
-
-export default ResourceAccordions;
diff --git a/src/resource-catalog/helpers/accessText.jsx b/src/resource-catalog/helpers/accessText.jsx
deleted file mode 100644
index 528bba3..0000000
--- a/src/resource-catalog/helpers/accessText.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-export const accessText = (
-  <>
-    <div className="row">
-      <div className="col">
-        <img className="mb-3" alt="Access Resources Logo" src="/access-resources.png" />
-      </div>
-    </div>
-    <div className="row">
-      <div className="col">
-        <h3 className="border-bottom">Resource Catalog</h3>
-        <p>
-          Below you will find a listing of the Resources that are available for your research through the ACCESS program.
-          Each listing contains basic information about a resource as well as links to more detailed descriptions.
-          Any questions about these resources or the ACCESS program should be sent to <a href="">Contact Info Here</a>.
-        </p>
-        <h4 className="border-bottom">About ACCESS</h4>
-        <p>
-          ACCESS is a program established and funded by the National Science Foundation to help researchers and educators, with or without supporting grants, to utilize the nation's advanced computing systems and services — at no cost.
-        </p>
-        <p>
-          Whether you're looking for advanced computational resources — and outstanding cyberinfrastructure — to take your research to the next level, to explore a career in advanced CI or just to experience the amazing scientific discoveries enabled by supercomputers, you're in the right place.
-        </p>
-      </div>
-    </div>
-
-  </>
-)
\ No newline at end of file
