diff --git a/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap b/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
index 3763d8aa7..bbe11f051 100644
--- a/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
+++ b/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
@@ -12,11 +12,46 @@ exports[`ClassInviteTable displays invites in a table 1`] = `
       className="group flex items-center"
     >
       <h2
-        className="text-slate-900 group-hover:text-white text-l font-semibold"
+        className="text-slate-900 group-hover:text-white text-l font-semibold break-words line-clamp-2 min-w-0"
       >
         Classroom: 
         how to build a website
       </h2>
+      <div
+        className="relative inline-block ml-2 shrink-0 group/certs"
+      >
+        <svg
+          className="h-5 w-5 text-slate-900 group-hover:text-white cursor-help"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <path
+            d="M12 16v-4m0-4h.01"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <div
+          className="hidden group-hover/certs:block absolute left-full top-0 w-64 max-h-64 overflow-y-auto z-50 rounded-md bg-white text-gray-900 text-sm shadow-lg p-3 ring-1 ring-black ring-opacity-5"
+        >
+          <p
+            className="font-semibold mb-1"
+          >
+            Certifications
+          </p>
+          <p>
+            No certifications assigned
+          </p>
+        </div>
+      </div>
       <div
         className="wrapper group ml-auto flex items-center"
       >
@@ -53,7 +88,8 @@ exports[`ClassInviteTable displays invites in a table 1`] = `
     </div>
     <div>
       <h1
-        className="text-slate-900 group-hover:text-white text-l"
+        className="text-slate-900 group-hover:text-white text-l break-words line-clamp-4"
+        title="learn how to build a website in a jiffy "
       >
         learn how to build a website in a jiffy 
       </h1>
diff --git a/__tests__/components/__snapshots__/modal.test.jsx.snap b/__tests__/components/__snapshots__/modal.test.jsx.snap
index 43a6cdab4..ced4b5e4c 100644
--- a/__tests__/components/__snapshots__/modal.test.jsx.snap
+++ b/__tests__/components/__snapshots__/modal.test.jsx.snap
@@ -78,11 +78,18 @@ exports[`Modal Component renders whole form after header clicked 1`] = `
               <input
                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 id="class-name"
+                maxLength={100}
                 name="classname"
                 onChange={[Function]}
                 placeholder="Class Name"
                 required={true}
               />
+              <p
+                className="text-xs text-gray-300 text-right mt-1"
+              >
+                0
+                /100
+              </p>
             </div>
           </div>
           <div
@@ -103,11 +110,18 @@ exports[`Modal Component renders whole form after header clicked 1`] = `
               <textarea
                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 id="description-text"
+                maxLength={500}
                 name="description"
                 onChange={[Function]}
                 placeholder="Description"
                 required={true}
               />
+              <p
+                className="text-xs text-gray-300 text-right mt-1"
+              >
+                0
+                /500
+              </p>
             </div>
           </div>
           <div
diff --git a/components/ClassInviteTable.js b/components/ClassInviteTable.js
index 8809f47b0..98671b0a0 100644
--- a/components/ClassInviteTable.js
+++ b/components/ClassInviteTable.js
@@ -134,9 +134,40 @@ export default function ClassInviteTable({
           className='group block max-w-xl mx-auto p-6 bg-fcc-gray-15 border-2 border-fcc-gray-90 ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-fcc-gray-90 hover:ring-sky-500'
         >
           <div ref={ref} className='group flex items-center'>
-            <h2 className='text-slate-900 group-hover:text-white text-l font-semibold'>
+            <h2 className='text-slate-900 group-hover:text-white text-l font-semibold break-words line-clamp-2 min-w-0'>
               Classroom: {currentClass.classroomName}
             </h2>
+            <div className='relative inline-block ml-2 shrink-0 group/certs'>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                className='h-5 w-5 text-slate-900 group-hover:text-white cursor-help'
+                fill='none'
+                viewBox='0 0 24 24'
+                stroke='currentColor'
+                strokeWidth='2'
+              >
+                <circle cx='12' cy='12' r='10' />
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  d='M12 16v-4m0-4h.01'
+                />
+              </svg>
+              <div className='hidden group-hover/certs:block absolute left-full top-0 w-64 max-h-64 overflow-y-auto z-50 rounded-md bg-white text-gray-900 text-sm shadow-lg p-3 ring-1 ring-black ring-opacity-5'>
+                <p className='font-semibold mb-1'>Certifications</p>
+                {getSelectedCerts().length > 0 ? (
+                  <ul className='list-disc list-inside space-y-1'>
+                    {getSelectedCerts().map(cert => (
+                      <li key={cert.value} className='break-words'>
+                        {cert.displayName}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p>No certifications assigned</p>
+                )}
+              </div>
+            </div>
             {/* <-------Menu Item Selection -----> */}
             <div className='wrapper group ml-auto flex items-center'>
               <div className='relative inline-block text-right'>
@@ -291,9 +322,13 @@ export default function ClassInviteTable({
                             }
                             id='class-name'
                             name='classname'
+                            maxLength={100}
                             className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                             placeholder={currentClass.classroomName}
                           ></input>
+                          <p className='text-xs text-gray-300 text-right mt-1'>
+                            {formData.className?.length ?? 0}/100
+                          </p>
                         </div>
                       </div>
                       <div className='rounded-md shadow-sm -space-y-px'>
@@ -311,9 +346,13 @@ export default function ClassInviteTable({
                             }
                             id='description-text'
                             name='description'
+                            maxLength={500}
                             className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                             placeholder={currentClass.description}
                           ></textarea>
+                          <p className='text-xs text-gray-300 text-right mt-1'>
+                            {formData.description?.length ?? 0}/500
+                          </p>
                         </div>
                       </div>
                       <div className='rounded-md shadow-sm -space-y-px w-60 lg:w-72 2xl:w-96'>
@@ -356,7 +395,10 @@ export default function ClassInviteTable({
           )}
 
           <div>
-            <h1 className='text-slate-900 group-hover:text-white text-l'>
+            <h1
+              className='text-slate-900 group-hover:text-white text-l break-words line-clamp-4'
+              title={currentClass.description}
+            >
               {currentClass.description}
             </h1>
           </div>
diff --git a/components/modal.js b/components/modal.js
index 97238a3af..97d7266a4 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -105,9 +105,13 @@ export default function Modal({
                           id='class-name'
                           name='classname'
                           required
+                          maxLength={100}
                           className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                           placeholder='Class Name'
                         ></input>
+                        <p className='text-xs text-gray-300 text-right mt-1'>
+                          {formData.classroomName?.length ?? 0}/100
+                        </p>
                       </div>
                     </div>
                     <div className='rounded-md shadow-sm -space-y-px'>
@@ -126,9 +130,13 @@ export default function Modal({
                           id='description-text'
                           name='description'
                           required
+                          maxLength={500}
                           className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                           placeholder='Description'
                         ></textarea>
+                        <p className='text-xs text-gray-300 text-right mt-1'>
+                          {formData.description?.length ?? 0}/500
+                        </p>
                       </div>
                     </div>
                     <div className='rounded-md shadow-sm -space-y-px w-60 lg:w-72 2xl:w-96'>