diff --git a/frontend/src/preferences/SelectDocsModal.tsx b/frontend/src/preferences/SelectDocsModal.tsx
index c4764878..c514ab86 100644
--- a/frontend/src/preferences/SelectDocsModal.tsx
+++ b/frontend/src/preferences/SelectDocsModal.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
+import Modal from '../Modal';
 import {
   setSelectedDocs,
   setSourceDocs,
@@ -50,85 +51,67 @@ export default function APIKeyModal({
 
     requestDocs();
   }, []);
-
   return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
-        <p className="text-xl text-jet">Select Source Documentation</p>
-        <p className="text-lg leading-5 text-gray-500">
-          Please select the library of documentation that you would like to use
-          with our app.
-        </p>
-        <div className="relative">
-          <div
-            className="h-10 w-full cursor-pointer border-b-2"
-            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-          >
-            {!localSelectedDocs ? (
-              <p className="py-3 text-gray-500">Select</p>
-            ) : (
-              <p className="py-3">
-                {localSelectedDocs.name} {localSelectedDocs.version}
-              </p>
-            )}
-          </div>
-          {isDocsListOpen && (
-            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
-              {docs ? (
-                docs.map((doc, index) => {
-                  if (doc.model) {
-                    return (
-                      <div
-                        key={index}
-                        onClick={() => {
-                          setLocalSelectedDocs(doc);
-                          setIsDocsListOpen(false);
-                        }}
-                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
-                      >
-                        <p className="ml-5 py-3">
-                          {doc.name} {doc.version}
-                        </p>
-                      </div>
-                    );
-                  }
-                })
-              ) : (
-                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                  <p className="ml-5 py-3">No default documentation.</p>
+    <Modal
+      handleSubmit={handleSubmit}
+      isCancellable={isCancellable}
+      handleCancel={handleCancel}
+      modalState={modalState}
+      errorMessage="Please select Source Documentation"
+      isError={isError}
+      render={() => {
+        return (
+          <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+            <p className="text-xl text-jet">Select Source Documentation</p>
+            <p className="text-lg leading-5 text-gray-500">
+              Please select the library of documentation that you would like to
+              use with our app.
+            </p>
+            <div className="relative">
+              <div
+                className="h-10 w-full cursor-pointer border-b-2"
+                onClick={() => setIsDocsListOpen(!isDocsListOpen)}
+              >
+                {!localSelectedDocs ? (
+                  <p className="py-3 text-gray-500">Select</p>
+                ) : (
+                  <p className="py-3">
+                    {localSelectedDocs.name} {localSelectedDocs.version}
+                  </p>
+                )}
+              </div>
+              {isDocsListOpen && (
+                <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
+                  {docs ? (
+                    docs.map((doc, index) => {
+                      if (doc.model) {
+                        return (
+                          <div
+                            key={index}
+                            onClick={() => {
+                              setLocalSelectedDocs(doc);
+                              setIsDocsListOpen(false);
+                            }}
+                            className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
+                          >
+                            <p className="ml-5 py-3">
+                              {doc.name} {doc.version}
+                            </p>
+                          </div>
+                        );
+                      }
+                    })
+                  ) : (
+                    <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
+                      <p className="ml-5 py-3">No default documentation.</p>
+                    </div>
+                  )}
                 </div>
               )}
             </div>
-          )}
-        </div>
-        <div className="flex flex-row-reverse">
-          {isCancellable && (
-            <button
-              onClick={() => handleCancel()}
-              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => {
-              handleSubmit();
-            }}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-          >
-            Save
-          </button>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please select source documentation.
-            </p>
-          )}
-        </div>
-      </article>
-    </div>
+          </article>
+        );
+      }}
+    />
   );
 }