diff --git a/frontend/src/modals/AddActionModal.tsx b/frontend/src/modals/AddActionModal.tsx
index 6ff88ae6..a2160146 100644
--- a/frontend/src/modals/AddActionModal.tsx
+++ b/frontend/src/modals/AddActionModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Exit from '../assets/exit.svg';
+import WrapperModal from './WrapperModal';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
 
@@ -35,67 +35,53 @@ export default function AddActionModal({
     setModalState('INACTIVE');
   };
 
+  // Only render when modal is active
+  if (modalState !== 'ACTIVE') return null;
+
   return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+    <WrapperModal
+      close={() => setModalState('INACTIVE')}
+      className="sm:w-[512px]"
     >
-      <article className="flex w-11/12 sm:w-[512px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
-        <div className="relative">
-          <button
-            className="absolute top-3 right-4 m-2 w-3"
-            onClick={() => {
-              setModalState('INACTIVE');
-            }}
-          >
-            <img className="filter dark:invert" src={Exit} />
-          </button>
-          <div className="p-6">
-            <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
-              New Action
-            </h2>
-            <div className="mt-6 relative px-3">
-              <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                Action Name
-              </span>
-              <Input
-                type="text"
-                value={actionName}
-                onChange={(e) => setActionName(e.target.value)}
-                borderVariant="thin"
-                placeholder={'Enter name'}
-              />
-              <p className="mt-1 text-gray-500 text-xs">
-                Use only letters, numbers, underscores, and hyphens (e.g.,
-                `get_user_data`, `send-report`).
-              </p>
-              {functionNameError && (
-                <p className="mt-1 text-red-500 text-xs">
-                  Invalid function name format. Use only letters, numbers,
-                  underscores, and hyphens.
-                </p>
-              )}
-            </div>
-            <div className="mt-8 flex flex-row-reverse gap-1 px-3">
-              <button
-                onClick={handleAddAction}
-                className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
-              >
-                Add
-              </button>
-              <button
-                onClick={() => {
-                  setModalState('INACTIVE');
-                }}
-                className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-              >
-                {t('modals.configTool.closeButton')}
-              </button>
-            </div>
-          </div>
+      <div>
+        <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+          New Action
+        </h2>
+        <div className="mt-6 px-3">
+          <Input
+            type="text"
+            value={actionName}
+            onChange={(e) => setActionName(e.target.value)}
+            borderVariant="thin"
+            placeholder="Enter name"
+            label="Action Name"
+          />
+          <p className="mt-1 text-gray-500 text-xs">
+            Use only letters, numbers, underscores, and hyphens (e.g.,
+            `get_user_data`, `send-report`).
+          </p>
+          {functionNameError && (
+            <p className="mt-1 text-red-500 text-xs">
+              Invalid function name format. Use only letters, numbers,
+              underscores, and hyphens.
+            </p>
+          )}
         </div>
-      </article>
-    </div>
+        <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+          <button
+            onClick={handleAddAction}
+            className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+          >
+            Add
+          </button>
+          <button
+            onClick={() => setModalState('INACTIVE')}
+            className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+          >
+            {t('modals.configTool.closeButton')}
+          </button>
+        </div>
+      </div>
+    </WrapperModal>
   );
 }
diff --git a/frontend/src/modals/ConfigToolModal.tsx b/frontend/src/modals/ConfigToolModal.tsx
index 4a582a49..d8585899 100644
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -45,10 +45,8 @@ export default function ConfigToolModal({
   return (
     <WrapperModal
       close={() => setModalState('INACTIVE')}
-      className="sm:w-[512px]"
-      contentClassName=""
     >
-      <div className="p-6">
+      <div>
         <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
           {t('modals.configTool.title')}
         </h2>
diff --git a/frontend/src/modals/CreateAPIKeyModal.tsx b/frontend/src/modals/CreateAPIKeyModal.tsx
index 5c8c75b8..36ec59a8 100644
--- a/frontend/src/modals/CreateAPIKeyModal.tsx
+++ b/frontend/src/modals/CreateAPIKeyModal.tsx
@@ -73,7 +73,7 @@ export default function CreateAPIKeyModal({
     handleFetchPrompts();
   }, []);
   return (
-    <WrapperModal close={close}>
+    <WrapperModal close={close} className='p-4'>
       <div className="mb-6">
         <span className="text-xl text-jet dark:text-bright-gray">
           {t('modals.createAPIKey.label')}
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index eee205f0..b945a60a 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -14,8 +14,8 @@ export default function WrapperModal({
   children,
   close,
   isPerformingTask = false,
-  className = 'sm:w-[512px]', // Default width, but can be overridden
-  contentClassName = 'p-8', // Default padding, but can be overridden
+  className = '', // Default width, but can be overridden
+  contentClassName = '', // Default padding, but can be overridden
 }: WrapperModalPropsType) {
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -49,7 +49,7 @@ export default function WrapperModal({
     <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
       <div
         ref={modalRef}
-        className={`relative w-11/12 rounded-2xl bg-white dark:bg-[#26272E] ${className}`}
+        className={`relative w-11/12 sm:w-[512px] p-8 rounded-2xl bg-white dark:bg-[#26272E] ${className}`}
       >
         {!isPerformingTask && (
           <button
@@ -59,7 +59,7 @@ export default function WrapperModal({
             <img className="filter dark:invert" src={Exit} alt="Close" />
           </button>
         )}
-        <div className={contentClassName}>
+        <div className={`${contentClassName}`}>
           {children}
         </div>
       </div>