diff --git a/static/css/components.css b/static/css/components.css
new file mode 100644
index 00000000..49a7f506
--- /dev/null
+++ b/static/css/components.css
@@ -0,0 +1,72 @@
+:root {
+  --modalWidth: 70vw;
+  --modalHeight: 70vh;
+  --light-modal-background: rgba(240,240,240,0.7);
+  --dark-modal-background: rgba(0,0,0,0.7);
+}
+
+html {
+    --modal-background: var(--light-modal-background);
+}
+
+html.dark {
+    --modal-background: var(--dark-modal-background);
+}
+
+.modal-overlay {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--modal-background);
+    align-items: center;
+    justify-content: center;
+    display: none;
+    z-index: 1010;
+}
+
+.modal-content {
+    width: var(--modalWidth);
+    height: var(--modalHeight);
+    margin: 0;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 2px solid var(--primary-color);
+    box-shadow: 0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -4px rgba(0,0,0,.2);
+    background-color: var(--card-color);
+    position: relative;
+}
+
+.modal-confirm {
+    width: auto;
+    height: auto;
+    padding: 2rem;
+}
+
+.modal-close {
+    color: var(--text-color);
+    position: absolute;
+    top: .75rem;
+    right: 1rem;
+    cursor: pointer;
+}
+
+.show-modal {
+    display: flex;
+}
+
+/* standard button CSS */
+/* a primary solid button should only be seen once on a page for a promary action to be made on that page. */
+.primary-button-solid {
+@apply py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-lg border md:py-1 md:px-4 md:text-lg bg-orange hover:bg-orange/80 border-orange dark:text-slate dark:hover:text-charcoal  hover:drop-shadow-md
+
+}
+/* standard button CSS */
+.primary-button-outline {
+@apply py-3 px-8 text-sm text-base font-medium text-white capitalize rounded-lg border md:py-1 md:px-4 md:text-lg text-orange border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md
+
+}
diff --git a/templates/account/signup.html b/templates/account/signup.html
index 71710590..a93c40cc 100755
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -54,6 +54,7 @@ <h1 class="text-4xl text-center">{% trans "Sign Up" %}</h1>
             href="terms-of-use"
             target="_blank"
             class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange mx-1"
+            onclick="displayModal('70vh','70vw', '../../terms-of-use/?=noheader')"
             >Terms of Use</a
           >
           for this service.
diff --git a/templates/base.html b/templates/base.html
index b584e111..d7b567da 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -34,6 +34,7 @@
     <script src="{% static 'js/boost-gecko/main.062e4862.js' %}" defer></script>
     {% block extra_head %}
       <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
+      <link href="{% static 'css/components.css' %}" rel="stylesheet" />
       <link rel="preload" as="style" href="{% static 'css/fonts.css' %}" rel="stylesheet" />
     {% endblock %}
 
@@ -48,6 +49,7 @@
             });
         }"
         class="h-screen bg-gray-200 dark:bg-black" {% block body_id %}{% endblock %}>
+         <div class="modal-overlay" id="modalOverlay"><div class="modal-content"><iframe src="" id="modalFrame" class="w-full h-full rounded-xl m-0 p-0"></iframe><div class="modal-close" id="modalClose" onclick="closeModal()"><i class="fa-solid fa-xmark fa-lg"></i></div></div></div>
     <div class="max-w-7xl md:px-3 mx-auto transition-all">
       {% block content_header %}
         {% include "includes/_header.html" %}
@@ -70,6 +72,32 @@
 
     {% block footer_js %}{% endblock %}
 
+     <script>
+      var r = document.querySelector(':root');
+
+      function modalSize(h,w) {
+        var rs = getComputedStyle(r);
+        r.style.setProperty('--modalWidth', w);
+        r.style.setProperty('--modalHeight', h);
+      }
+
+      /********* Function to open modal ***********/
+      function displayModal(height,width,src) {
+        event.preventDefault()
+        let modal = document.getElementById('modalOverlay');
+        modal.classList.add('show-modal');
+        modalSize(height,width);
+        let modalframe = document.getElementById('modalFrame');
+        modalframe.setAttribute("src", src);
+      }
+
+      function closeModal() {
+        let modal = document.getElementById('modalOverlay');
+        modal.classList.remove('show-modal');
+      }
+
+    </script>
+
   </body>
 
 </html>
diff --git a/templates/libraries/_library_list_item.html b/templates/libraries/_library_list_item.html
index 69c0160a..0a5703a3 100644
--- a/templates/libraries/_library_list_item.html
+++ b/templates/libraries/_library_list_item.html
@@ -23,7 +23,7 @@ <h3 class="pb-2 text-xl md:text-2xl capitalize border-b border-gray-700">
   <div class="mb-3 pb-3">
     <p class="mb-3 text-gray-700 dark:text-gray-300">{{ library.description }}</p>
   </div>
-  <div class="text-sm flex py-3 bottom-3 absolute w-full md:w-[90%]">
+  <div class="text-sm flex py-3 bottom-3 absolute w-full md:w-11/12">
     <div >
       <span class="flex justify-center py-0 px-2 text-sm font-bold text-gray-600 rounded-full border dark:text-gray-300 bg-green/40 border-green/60 dark:bg-green/40 tabular-nums"
         title="C++ Version {% if library.cpp_standard_minimum and library.cpp_standard_minimum != 'None' %}{{ library.cpp_standard_minimum }}{% else %}03{% endif %} or Later">