diff --git a/frontend/src/components/ui/AddNewCard.jsx b/frontend/src/components/ui/AddNewCard.jsx
index 9f0cece..a7eacdc 100644
--- a/frontend/src/components/ui/AddNewCard.jsx
+++ b/frontend/src/components/ui/AddNewCard.jsx
@@ -1,19 +1,28 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 
-function AddNewCard({ onAdd }) {
-  return (
-    <div
-      className="bg-white dark:bg-gray-800 border-2 border-dashed border-gray-400 dark:border-gray-600 rounded-lg p-4 shadow-sm cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 flex items-center justify-center"
-      onClick={onAdd}
-      style={{ minHeight: '150px' }}
-    >
-      <span className="text-4xl text-gray-400 dark:text-gray-500">+</span>
-    </div>
-  );
+function AddNewCard({onAdd, width, height, minHeight}) {
+    const style = {
+        width: width || '100%',
+        height: height || 'auto',
+        minHeight: minHeight || '150px'
+    };
+
+    return (
+        <div
+            className='bg-white dark:bg-gray-800 border-2 border-dashed border-gray-400 dark:border-gray-600 rounded-lg p-4 shadow-sm cursor-pointer hover:border-blue-400 dark:hover:border-blue-500 flex items-center justify-center'
+            onClick={onAdd}
+            style={style}>
+            <span className='text-4xl text-gray-400 dark:text-gray-500'>+</span>
+        </div>
+    );
 }
 
 AddNewCard.propTypes = {
-  onAdd: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    minHeight: PropTypes.string
 };
 
 export default AddNewCard;