diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 24c4fca8..0e610999 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -4,13 +4,14 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import './button.css';
 
-const ButtonComponent = ({ variant, onClick, loading, toRoute, children, type }) => {
+const ButtonComponent = ({ variant, onClick, loading, toRoute, children, type, isDisabled }) => {
   const history = useHistory();
 
   return (
     <div>
       <Button
         isLoading={loading}
+        isDisabled={isDisabled}
         variant={variant}
         onClick={
           toRoute
diff --git a/src/components/CreatePlugin/CreatePlugin.css b/src/components/CreatePlugin/CreatePlugin.css
index fad25920..e56534ac 100644
--- a/src/components/CreatePlugin/CreatePlugin.css
+++ b/src/components/CreatePlugin/CreatePlugin.css
@@ -2,7 +2,6 @@
   display: flex;
   margin: 2em auto;
   margin-bottom: 8em;
-
   flex-direction: column;
 }
 
@@ -15,6 +14,10 @@
   margin: auto;
 }
 
+.createplugin-message {
+  color: rgb(201, 25, 11)
+}
+
 /* ============ INPUT =========== */
 
 #createplugin-upload {
@@ -22,6 +25,11 @@
   margin: 0;
 }
 
+#createplugin-upload-file-container {
+  display: flex;
+  flex-direction: column;
+}
+
 #createplugin-upload-file {
   display: flex;
   flex-direction: row;
@@ -32,11 +40,25 @@
 } #createplugin-upload-file .fileupload input {
   height: 3em;
   background-color: lightgray !important;
-  border: none;
+  border: none
 }
 #createplugin-upload-icon {
   background-color: lightgray !important;
   padding: 0.25em 0.5em;
   padding-right: 0;
   font-size: 1.5em;
+}
+
+.create-plugin-error-triangle {
+  fill: rgb(201, 25, 11)
+}
+
+.error-message {
+  display: block;
+  color: rgb(201, 25, 11);
+  padding-top: 0.25em
+}
+
+.no-file-error {
+ display: none;
 }
\ No newline at end of file
diff --git a/src/components/CreatePlugin/CreatePlugin.jsx b/src/components/CreatePlugin/CreatePlugin.jsx
index f2a6f03f..038f924e 100644
--- a/src/components/CreatePlugin/CreatePlugin.jsx
+++ b/src/components/CreatePlugin/CreatePlugin.jsx
@@ -7,7 +7,6 @@ import {
   GridItem,
   Form,
   FormGroup,
-  TextInput,
   FileUpload,
   Alert,
   Card,
@@ -17,6 +16,7 @@ import {
 } from '@patternfly/react-core';
 import { FileIcon, UploadIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
 
+import FormInput from '../FormInput';
 import Button from '../Button';
 import './CreatePlugin.css';
 
@@ -25,15 +25,20 @@ class CreatePlugin extends Component {
     super();
 
     this.state = {
-      dragOver: false,
-      isNameValidated: 'default',
       name: String(),
-      image: String(),
-      repo: String(),
+      dock_image: String(),
+      public_repo: String(),
       pluginRepresentation: Object(),
-      fileError: false,
+      isNameValidated: 'default',
+      fileName: '',
       formError: null,
+      fileUploadError: false,
+      error: {
+        message: String(),
+        controls: [],
+      },
       success: false,
+      isDisabled: true
     };
 
     this.storeURL = process.env.REACT_APP_STORE_URL;
@@ -42,7 +47,7 @@ class CreatePlugin extends Component {
       {
         id: 'name',
         label: 'Plugin Name',
-        help: 'Choose a unique name',
+        placeholder: 'Choose a unique name',
         validated: 'isNameValidated',
         validation: async (value) => {
           if (value.length < 5) return 'warning';
@@ -52,53 +57,81 @@ class CreatePlugin extends Component {
               name_title_category: value,
             });
             if (result.data.length === 0) return 'success';
-            return 'error';
+            return 'error' && 
+            this.setState({ error: { message: "Name is already in use", controls: ['name']}});
+
           } catch (error) {
             return 'warning';
           }
         },
       },
       {
-        id: 'image',
+        id: 'dock_image',
         label: 'Docker Image',
-        help: 'DockerHub URL of the image to be used',
+        placeholder: 'DockerHub URL of the image to be used',
       },
       {
-        id: 'repo',
+        id: 'public_repo',
         label: 'Repository',
-        help: 'Public URL to your source code',
+        placeholder: 'Public URL to your source code',
       },
     ];
 
     [
-      'setFileError', 'handleError', 'hideError', 'handleChange',
+      'setFileError', 'handleError', 'resetError', 'handleChange',
       'handleFile', 'readFile', 'handleSubmit',
     ].forEach((method) => {
       this[method] = this[method].bind(this);
     });
+
   }
 
+  // eslint-disable-next-line consistent-return
   handleError(message) {
     let errorObj;
     try {
       errorObj = JSON.parse(message);
       if (Object.prototype.hasOwnProperty.call(errorObj, 'non_field_errors')) {
-        this.setState({
+        return this.setState({
           formError: errorObj.non_field_errors,
         });
-      } else if (Object.prototype.hasOwnProperty.call(errorObj, 'public_repo')) {
-        this.setState({
-          formError: errorObj.public_repo,
-        });
-      } else {
+      } 
+      
+      if (Object.prototype.hasOwnProperty.call(errorObj, 'public_repo')) {
+        return this.setState({
+          error: {
+            message: errorObj.public_repo.toString(),
+            controls: ['public_repo']
+          }
+        })
+      } 
+      if (Object.prototype.hasOwnProperty.call(errorObj, 'dock_image')) {
+        return this.setState({
+          error: {
+            message: errorObj.dock_image,
+            controls: ['dock_image']
+          }
+        })
+      } 
+
+      if (Object.prototype.hasOwnProperty.call(errorObj, 'descriptor_file')) {
+        return this.setState({
+          error: {
+            message: errorObj.descriptor_file,
+            controls: ['file']
+          } });
+      } 
+
         this.setState({ formError: message });
-      }
+      
     } catch (e) {
-      this.setState({ formError: message });
+      return this.setState({ formError: message });
     }
   }
 
-  handleChange(value, { target }, check) {
+  handleChange(value, {target}, check) {
+    // eslint-disable-next-line camelcase
+    const {name, dock_image, public_repo} = this.state
     const nextState = { [target.name]: value };
     this.setState(nextState);
 
@@ -109,9 +142,16 @@ class CreatePlugin extends Component {
         });
       });
     }
+    if ((name.length < 5) || (dock_image.length <= 1) || (public_repo.length <= 1)) {
+      this.setState({isDisabled: true})
+    } else {
+      this.setState({isDisabled: false})
+    }
   }
 
-  handleFile(value, filename) {
+// eslint-disable-next-line consistent-return
+handleFile(value, filename) {
+
     if (value && value.type === 'application/json') {
       this.setState({ fileName: filename });
       this.readFile(value)
@@ -126,43 +166,53 @@ class CreatePlugin extends Component {
     }
   }
 
-  async handleSubmit() {
+async handleSubmit(event) {
+    event.preventDefault()
+    event.persist()
+    this.resetError()
+
     const {
       name: pluginName,
-      image: pluginImage,
-      repo: pluginRepo,
+      dock_image: pluginImage,
+      public_repo: pluginRepo,
       pluginRepresentation,
-    } = this.state;
+    } = this.state;    
 
-    // Array to store the errors
-    const errors = [];
-    let missingRepresentationString = '';
     const inputImage = pluginImage.trim();
+
     if (inputImage) {
       if (inputImage.endsWith(':latest')) {
-        this.handleError(
-          <span>
-            The
+        return this.setState({
+          error: {
+            message:
+          <span className='error-message'>
+            The 
             <code>:latest</code>
-            tag is discouraged.
+              tag is discouraged.
           </span>,
-        );
-      } else if (!inputImage.includes(':')) {
+          controls: ['dock_image']
+          }
+        });
+      }
+
+      if (!inputImage.includes(':')) {
         /**
          * @todo
          * We can provide specific feedback based on the plugin's JSON description,
          * if it is uploaded.
          */
         const tag = inputImage.split(':')[0];
-        this.handleError(
+        return this.setState({
+        error: {
+          message: 
           <div>
-            <p>
+            <p className='error-message'>
               Please tag your Docker image by version.
               <br />
               Example:
             </p>
             <CodeBlock>
-              <CodeBlockCode>
+              <CodeBlockCode className='error-message'>
                 docker tag
                 {tag}
                 {tag}
@@ -174,49 +224,14 @@ class CreatePlugin extends Component {
               </CodeBlockCode>
             </CodeBlock>
           </div>,
-        );
+          controls: ['dock_image']
+        }
+          })
       }
     }
-
-    if (!(
-      pluginName.trim() && pluginImage.trim() &&
-      pluginRepo.trim() && pluginRepresentation &&
-      Object.keys(pluginRepresentation).length > 0
-    )) {
-      // Checks for individual field completion
-      if (!pluginName.trim()) {
-        errors.push('Plugin Name');
-      }
-      if (!pluginImage.trim()) {
-        errors.push('Docker Image');
-      }
-      if (!pluginRepo.trim()) {
-        errors.push('Public Repo');
-      }
-      if (!Object.keys(pluginRepresentation).length > 0) {
-        missingRepresentationString = 'upload the plugin representation and ';
-      }
-
-      // If all the fields are empty in submission
-      if (errors.length === 3 && missingRepresentationString !== '') {
-        return this.handleError('All fields are required.');
-      // If one fields is empty
-      } if (errors.length === 1) {
-        return this.handleError(`Please ${missingRepresentationString}enter
-          the ${errors[0]}`);
-      // If two fields are empty
-      } if (errors.length === 2) {
-        return this.handleError(`Please ${missingRepresentationString}enter
-          the ${errors[0]} and ${errors[1]}`);
-      // If more than Plugin Representation or two fields are empty or
-      }
-      // If only the Plugin Representation is missing
-      if (errors.length === 0) {
-        return this.handleError('Please upload the plugin representation');
-      }
-      const lastError = errors.pop();
-      return this.handleError(`Please ${missingRepresentationString}enter
-          the ${errors.join(', ')}, and ${lastError}`);
+   
+    if(!Object.keys(pluginRepresentation).length) {
+      return this.setState({fileUploadError: true, error: { message: 'Please upload the plugin representation', controls: ['file']}})
     }
 
     const fileData = JSON.stringify(pluginRepresentation);
@@ -232,14 +247,16 @@ class CreatePlugin extends Component {
     const client = this.Client();
 
     let newPlugin;
+ 
     try {
+      if (!this.formError) {
       const resp = await client.createPlugin(pluginData, fileObj);
       newPlugin = resp.data;
+      }
     } catch ({ message }) {
       return this.handleError(message);
     }
 
-    this.hideError();
     this.setState({ success: true, newPlugin });
     return newPlugin;
   }
@@ -248,9 +265,9 @@ class CreatePlugin extends Component {
     this.setState((prevState) => {
       const nextState = {};
       if (typeof state !== 'undefined') {
-        nextState.fileError = state;
+        nextState.fileUploadError = state;
       } else {
-        nextState.fileError = !prevState.fileError;
+        nextState.fileUploadError = !prevState.fileError;
       }
       return nextState;
     });
@@ -271,7 +288,7 @@ class CreatePlugin extends Component {
             reject(invalidRepresentation);
           }
 
-          this.setState({ pluginRepresentation, fileError: false }, resolve);
+          this.setState({ pluginRepresentation, fileUploadError: false }, resolve);
         };
 
         reader.onerror = () => reject(invalidRepresentation);
@@ -287,13 +304,13 @@ class CreatePlugin extends Component {
     return new Client(this.storeURL, { token });
   }
 
-  hideError() {
-    this.setState({ formError: null });
+  resetError() {
+    this.setState({ formError: null,  fileUploadError: false, error: {message: '', controls: []}});
   }
 
   render() {
     const {
-      fileName, fileError, formError, success, newPlugin,
+      fileName, fileUploadError, formError, success, newPlugin, error, isDisabled,
     } = this.state;
 
     let pluginId;
@@ -303,18 +320,22 @@ class CreatePlugin extends Component {
 
     // generate formGroups based on data
     const PluginFormDataGroups = this.formGroupsData.map(
-      ({ id, label, help, validated, validation  }) => (
-        <FormGroup label={label} key={id} type="text">
-          <TextInput id={id} name={id}
-            autoComplete="off"
-            // eslint-disable-next-line react/destructuring-assignment
-            validated={validated ? this.state[validated] : undefined}
-            // eslint-disable-next-line react/destructuring-assignment
-            value={this.state[id]}
+
+      ({ id, label, placeholder, validated, validation }) => (
+        <FormGroup label={label} key={id}>
+          <FormInput 
+            fieldId={id} 
+            name={id}
+            placeholder={placeholder}
+            inputType="text"
+            id={id}
+            fieldName={id}
+            error={error}
+            // eslint-disable-next-line no-nested-ternary, react/destructuring-assignment
+            validationState={validated ? this.state[validated] : error.controls.includes(id) ? 'error' : 'default'}
             onChange={!validated ? this.handleChange : (
               (...args) => this.handleChange(...args, { validated, validation })
             )}
-            placeholder={help}
             isRequired
           />
         </FormGroup>
@@ -353,12 +374,9 @@ class CreatePlugin extends Component {
               {
                 formError ? (
                   <GridItem xs={12}>
-                    <Alert
-                      className="createplugin-message"
-                      variant="danger"
-                      title={formError}
-                      timeout={5000}
-                    />
+                    <div className="createplugin-message">
+                    <ExclamationTriangleIcon className='create-plugin-error-triangle'/> {formError}
+                    </div>
                   </GridItem>
                 ) : null
               }
@@ -393,30 +411,37 @@ class CreatePlugin extends Component {
                     <Form id="createplugin-form">
                       { PluginFormDataGroups }
 
-                      <FormGroup label="Representation File" id="createplugin-upload">
+                      <FormGroup label="Representation File" id="createplugin-upload " isRequired>
+                        <div id="createplugin-upload-file-container">
                         <div id="createplugin-upload-file">
                           <span id="createplugin-upload-icon">
                             { // eslint-disable-next-line no-nested-ternary
-                              fileError ? <ExclamationTriangleIcon /> : (
+                              fileUploadError ? <ExclamationTriangleIcon className='create-plugin-error-triangle'/> : (
                               !fileName ? <UploadIcon /> : <FileIcon />
                             )}
+
                           </span>
+                          
                           <FileUpload
                             id="createplugin-upload-fileupload"
                             className="fileupload"
                             type="file"
-                            isRequired
                             accept=".json"
                             browseButtonText="Select File"
                             filename={fileName}
-                            onChange={this.handleFile}
+                            onChange={((val) => this.handleFile(val, val.name))}
+                            isRequired
                           />
+                          </div>
+                          <div className={error.controls.includes('file') ? 'error-message' : `no-file-error`}><ExclamationTriangleIcon className='create-plugin-error-triangle'/> {error.message}</div>
                         </div>
                       </FormGroup>
 
                       <Button
                         id="createplugin-create-btn"
                         variant="primary"
+                        type="submit"
+                        isDisabled={isDisabled}
                         onClick={this.handleSubmit}
                       >
                         Create
@@ -434,3 +459,4 @@ class CreatePlugin extends Component {
 }
 
 export default CreatePlugin;
+