diff --git a/litmus-portal/frontend/package-lock.json b/litmus-portal/frontend/package-lock.json
index 3d7e2c0d7..9ff4ac506 100644
--- a/litmus-portal/frontend/package-lock.json
+++ b/litmus-portal/frontend/package-lock.json
@@ -4446,13 +4446,6 @@
         "num2fraction": "^1.2.2",
         "postcss": "^7.0.32",
         "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "caniuse-lite": {
-          "version": "1.0.30001123",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
-          "integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ=="
-        }
       }
     },
     "aws-sign2": {
@@ -5967,9 +5960,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001100",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001100.tgz",
-      "integrity": "sha512-0eYdp1+wFCnMlCj2oudciuQn2B9xAFq3WpgpcBIZTxk/1HNA/O2YA7rpeYhnOqsqAJq1AHUgx6i1jtafg7m2zA=="
+      "version": "1.0.30001176",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001176.tgz",
+      "integrity": "sha512-VWdkYmqdkDLRe0lvfJlZQ43rnjKqIGKHWhWWRbkqMsJIUaYDNf/K/sdZZcVO6YKQklubokdkJY+ujArsuJ5cag=="
     },
     "canvas-fit": {
       "version": "1.5.0",
@@ -12180,9 +12173,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inline-source-map": {
       "version": "0.6.2",
diff --git a/litmus-portal/frontend/src/components/CustomText/index.tsx b/litmus-portal/frontend/src/components/CustomText/index.tsx
deleted file mode 100644
index 4421dad94..000000000
--- a/litmus-portal/frontend/src/components/CustomText/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { IconButton, makeStyles, TextField, Theme } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
-import SaveIcon from '@material-ui/icons/Save';
-import React from 'react';
-
-interface CustomTextProps {
-  value: string;
-  id: string;
-  onchange: (val: string) => void;
-  isEditable?: boolean;
-}
-
-const useStyles = makeStyles((theme: Theme) => ({
-  editBtn: {
-    color: theme.palette.common.black,
-  },
-  saveBtn: {
-    color: theme.palette.common.black,
-  },
-  inputText: {
-    width: '40.75rem',
-    paddingTop: theme.spacing(0.375),
-  },
-}));
-
-// Editable text field used to edit and save the input in the text box
-const CustomText: React.FC<CustomTextProps> = ({
-  value,
-  id,
-  onchange,
-  isEditable,
-}) => {
-  const [isDisabled, setIsDisabled] = React.useState(true);
-  const [newValue, setNewValue] = React.useState<string>(value);
-
-  const handleEdit = () => {
-    setIsDisabled(false);
-  };
-  const handleSave = () => {
-    onchange(newValue);
-    setIsDisabled(true);
-  };
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setNewValue(event.target.value);
-  };
-
-  const classes = useStyles();
-  return (
-    <div>
-      <TextField
-        data-cy="text"
-        className={classes.inputText}
-        disabled={isDisabled}
-        id={id}
-        defaultValue={newValue}
-        multiline
-        InputProps={{
-          disableUnderline: true,
-          style: {
-            color: 'rgba(0,0,0)',
-            lineHeight: '1rem',
-            fontSize: '1rem',
-          },
-        }}
-        onChange={handleChange}
-      />
-      {isEditable ? (
-        <>
-          {isDisabled ? (
-            <IconButton size="medium" onClick={handleEdit}>
-              <EditIcon className={classes.editBtn} data-cy="edit" />
-            </IconButton>
-          ) : (
-            <IconButton size="medium" onClick={handleSave}>
-              <SaveIcon className={classes.saveBtn} data-cy="save" />
-            </IconButton>
-          )}
-        </>
-      ) : null}
-    </div>
-  );
-};
-export default CustomText;
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
index 735bc5562..ed5159bc3 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
@@ -1,6 +1,7 @@
 import { Divider, IconButton, Typography } from '@material-ui/core';
 import EditIcon from '@material-ui/icons/Edit';
 import cronstrue from 'cronstrue';
+import { EditableText } from 'kubera-ui';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -8,7 +9,6 @@ import YAML from 'yaml';
 import AdjustedWeights from '../../../components/AdjustedWeights';
 import ButtonFilled from '../../../components/Button/ButtonFilled';
 import ButtonOutline from '../../../components/Button/ButtonOutline/index';
-import CustomText from '../../../components/CustomText';
 import YamlEditor from '../../../components/YamlEditor/Editor';
 import {
   AceValidations,
@@ -137,13 +137,14 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({
               </Typography>
             </div>
             <div className={classes.col2}>
-              <CustomText
+              <EditableText
                 value={name}
                 id="name"
-                onchange={(changedName: string) =>
-                  handleNameChange({ changedName })
+                fullWidth
+                onChange={(e) =>
+                  handleNameChange({ changedName: e.target.value })
                 }
-                isEditable={workflowData.isRecurring ? false : isEditable}
+                disabled={workflowData.isRecurring}
               />
             </div>
           </div>
@@ -165,19 +166,15 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({
                 {t('createWorkflow.verifyCommit.summary.desc')}:
               </Typography>
             </div>
-            <div
-              className={classes.col2}
-              style={{
-                width: 724,
-              }}
-            >
-              <CustomText
+            <div className={classes.col2}>
+              <EditableText
                 value={description}
                 id="desc"
-                onchange={(changedDesc: string) =>
-                  handleDescChange({ changedDesc })
+                fullWidth
+                onChange={(e) =>
+                  handleDescChange({ changedDesc: e.target.value })
                 }
-                isEditable={isEditable}
+                disabled={!isEditable}
               />
             </div>
           </div>
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts
index 6a523547a..fb7a6e167 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts
@@ -1,14 +1,18 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  horizontalLine: {
+    background: theme.palette.border.main,
+  },
   root: {
-    backgroundColor: 'rgba(255, 255, 255, 0.6)',
-    width: '80%',
-    margin: '0 auto',
-    border: 1,
+    backgroundColor: theme.palette.background.paper,
     borderColor: theme.palette.text.disabled,
-    borderRadius: 3,
-    padding: theme.spacing(2),
+    borderRadius: '0.1875rem',
+    flexDirection: 'column',
+    height: '100%',
+    margin: '0 auto',
+    padding: theme.spacing(3.75, 6, 3.75, 3.75),
+    width: '80%',
   },
   suHeader: {
     display: 'flex',
@@ -16,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     justifyContent: 'space-even',
   },
   headerText: {
-    marginTop: theme.spacing(1.25),
+    marginTop: theme.spacing(2.75),
     fontSize: '1.5625rem',
   },
   description: {
@@ -25,13 +29,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '1.0625rem',
   },
   suBody: {
-    width: '40%',
+    width: '65%',
   },
   bfinIcon: {
     width: '7rem',
     height: '6.31rem',
     marginTop: theme.spacing(5),
-    marginLeft: theme.spacing(25),
+    marginLeft: theme.spacing(12),
   },
   outerSum: {
     marginTop: theme.spacing(2),
@@ -44,28 +48,38 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexDirection: 'row',
     width: '100%',
     justifyContent: 'flex-start',
-    alignItems: 'stretch',
+    alignItems: 'baseline',
     marginTop: theme.spacing(3),
   },
   innerSumDiv: {
-    width: '7.625rem',
+    alignContent: 'center',
+    display: 'table-cell',
+    height: '100%',
+    verticalAlign: 'middle',
+    width: '20%',
   },
   sumText: {
+    width: '100%',
     marginTop: theme.spacing(4.5),
     marginBottom: theme.spacing(3),
     fontSize: '1.5rem',
   },
   col1: {
+    alignContent: 'center',
+    color: theme.palette.highlight,
     fontSize: '1rem',
-    color: theme.palette.secondary.dark,
     paddingTop: theme.spacing(0.5),
+    verticalAlign: 'middle',
   },
   schedule: {
     fontSize: '1rem',
+    paddingLeft: theme.spacing(2),
     paddingTop: theme.spacing(0.75),
   },
   col2: {
+    color: theme.palette.text.secondary,
     marginLeft: theme.spacing(5),
+    width: '75%',
   },
   schCol2: {
     marginLeft: theme.spacing(5),
@@ -74,14 +88,14 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   clusterName: {
     fontSize: '1rem',
-    marginLeft: theme.spacing(5),
+    marginLeft: theme.spacing(7),
     paddingTop: theme.spacing(0.5),
   },
   editButton1: {
     marginLeft: theme.spacing(1),
   },
   editbtn: {
-    color: theme.palette.common.black,
+    color: theme.palette.text.secondary,
   },
   link: {
     fontSize: '0.875rem',
@@ -90,6 +104,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   adjWeights: {
     display: 'flex',
     flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginLeft: theme.spacing(2),
+    width: '80%',
   },
   config: {
     height: '3rem',
@@ -109,26 +126,28 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1.5),
   },
   errorText: {
+    color: theme.palette.error.main,
     fontSize: '1rem',
-    color: 'red',
     marginLeft: theme.spacing(5),
   },
   yamlFlex: {
     display: 'flex',
     flexDirection: 'column',
-    marginLeft: theme.spacing(5),
+    marginLeft: theme.spacing(7),
   },
   yamlButton: {
-    width: theme.spacing(1.5),
+    marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginLeft: theme.spacing(-2),
+    width: theme.spacing(1.5),
   },
   progress: {
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    flexGrow: 1,
     marginLeft: theme.spacing(5),
-    width: theme.spacing(79.5),
+  },
+  buttomPad: {
+    paddingBottom: theme.spacing(3.75),
   },
 }));
 export default useStyles;