diff --git a/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx b/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
index 6f9b04876..be7a98a69 100644
--- a/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
+++ b/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
@@ -5,7 +5,7 @@ import LinearProgressBar from '../../src/components/ProgressBar/LinearProgressBa
 
 describe('Linear Progressbar Testing', () => {
   it('Progressbar stroke for value 3', () => {
-    mount(<LinearProgressBar value={2} />);
+    mount(<LinearProgressBar width={1.5} value={2} />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
@@ -13,7 +13,7 @@ describe('Linear Progressbar Testing', () => {
     );
   });
   it('Progressbar stroke for value 8', () => {
-    mount(<LinearProgressBar value={8} />);
+    mount(<LinearProgressBar width={1.5} value={8} />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
@@ -21,7 +21,7 @@ describe('Linear Progressbar Testing', () => {
     );
   });
   it('Progressbar stroke for value 6', () => {
-    mount(<LinearProgressBar value={6} />);
+    mount(<LinearProgressBar width={1.5} value={6} />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
@@ -29,7 +29,7 @@ describe('Linear Progressbar Testing', () => {
     );
   });
   it('Progressbar stroke if default', () => {
-    mount(<LinearProgressBar value={8} isDefault />);
+    mount(<LinearProgressBar width={1.5} value={8} isDefault />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
diff --git a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx b/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
index 2ad13c048..8a3a311ff 100644
--- a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
+++ b/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
@@ -66,7 +66,7 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
       </div>
 
       <div>
-        <LinearProgressBar value={testValue} />
+        <LinearProgressBar width={1} value={testValue} />
       </div>
     </div>
   );
diff --git a/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx b/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
index 4ef050eb4..61eeaad19 100644
--- a/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
+++ b/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
@@ -145,6 +145,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
 
           <div className={classes.userInfo}>
             <Typography
+              data-cy="name-header"
               className={classes.userName}
               component="span"
               color="textPrimary"
@@ -152,6 +153,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
               {name}
             </Typography>
             <Typography
+              data-cy="email-header"
               className={classes.userEmail}
               variant="body1"
               component="span"
@@ -175,6 +177,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
             )}
 
             <Button
+              data-cy="logout"
               disabled={loggedOut}
               size="small"
               onClick={logOut}
@@ -187,7 +190,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
         <Divider className={classes.dividerTop} />
         <List dense className={classes.tabContainerProfileDropdownItem}>
           {switchableProjects.length === 0 ? (
-            <ListItem>
+            <ListItem data-cy="project">
               <ListItemText>
                 {t('header.profileDropdown.noProjects')}
               </ListItemText>
diff --git a/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx b/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
index 2a12cceb7..de2de2cbe 100644
--- a/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
+++ b/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
@@ -51,9 +51,10 @@ const ProfileDropdownSection: React.FC<ProfileInfoDropdownSectionProps> = ({
         </Box>
 
         <Box p={1}>
-          <Typography>
+          <Typography data-cy="full-name">
             {name}{' '}
             <IconButton
+              data-cy="header-dropdown"
               edge="end"
               ref={profileMenuRef}
               aria-label="account of current user"
diff --git a/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx b/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
index b6449c1c3..f55f09225 100644
--- a/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
+++ b/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
@@ -36,6 +36,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = ({
 
   return (
     <ListItem
+      data-cy="project"
       divider={divider}
       onClick={selectProject}
       style={{ backgroundColor: projSelected ? '#109B67' : 'white' }}
diff --git a/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx b/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
index 499f04001..592e92b57 100644
--- a/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
+++ b/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
@@ -19,23 +19,27 @@ const PredifinedWorkflows: React.FC<PredifinedWorkflowsProps> = ({
       {workflows &&
         workflows.map((w: preDefinedWorkflowData, index: number) =>
           w.isCustom ? (
-            <CustomWorkflowCard
-              handleClick={() => callbackOnSelectWorkflow(index)}
-            />
+            <div key={w.workflowID} data-cy="templatesCard">
+              <CustomWorkflowCard
+                handleClick={() => callbackOnSelectWorkflow(index)}
+              />
+            </div>
           ) : (
-            <CustomCard
-              key={w.workflowID}
-              title={w.title}
-              urlToIcon={w.urlToIcon}
-              provider={w.provider}
-              chaosWkfCRDLink={w.chaosWkfCRDLink}
-              selectedID={w.workflowID}
-              handleClick={() => callbackOnSelectWorkflow(index)}
-              description={w.description}
-              totalRuns={w.totalRuns}
-              gitLink={w.gitLink}
-              workflowID={w.workflowID}
-            />
+            <div key={w.workflowID} data-cy="templatesCard">
+              <CustomCard
+                key={w.workflowID}
+                title={w.title}
+                urlToIcon={w.urlToIcon}
+                provider={w.provider}
+                chaosWkfCRDLink={w.chaosWkfCRDLink}
+                selectedID={w.workflowID}
+                handleClick={() => callbackOnSelectWorkflow(index)}
+                description={w.description}
+                totalRuns={w.totalRuns}
+                gitLink={w.gitLink}
+                workflowID={w.workflowID}
+              />
+            </div>
           )
         )}
     </div>
diff --git a/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx b/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
index ec38f3211..7661d6adc 100644
--- a/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
+++ b/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
@@ -1,41 +1,35 @@
 import { Line } from 'rc-progress';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTheme } from '@material-ui/core/styles';
 
 interface LinearProgressBarProps {
   value: number | number[];
   isDefault?: boolean;
+  width: number;
 }
 
 const LinearProgressBar: React.FC<LinearProgressBarProps> = ({
   value,
   isDefault,
+  width,
 }) => {
-  const [color, setColor] = useState(' ');
-  const width: number = 2;
   const resultValue = (value as number) * 10;
   const theme = useTheme();
-  const changeColor = () => {
-    if (resultValue <= 30) {
-      return setColor(theme.palette.error.dark);
-    }
-    if (resultValue <= 60) {
-      return setColor(theme.palette.warning.main);
-    }
-    return setColor(theme.palette.primary.dark);
-  };
-  useEffect(() => {
-    if (isDefault === true) {
-      return setColor(theme.palette.secondary.dark);
-    }
-    return changeColor();
-  }, [resultValue]);
+
   return (
     <Line
       percent={resultValue}
       strokeWidth={width}
       trailWidth={width}
-      strokeColor={color}
+      strokeColor={
+        isDefault
+          ? theme.palette.secondary.dark
+          : resultValue > 30 && resultValue <= 60
+          ? theme.palette.warning.main
+          : resultValue > 60
+          ? theme.palette.primary.dark
+          : theme.palette.error.dark
+      }
     />
   );
 };
diff --git a/litmus-portal/frontend/src/components/SideBar/index.tsx b/litmus-portal/frontend/src/components/SideBar/index.tsx
index 47e2c782c..d3258711f 100644
--- a/litmus-portal/frontend/src/components/SideBar/index.tsx
+++ b/litmus-portal/frontend/src/components/SideBar/index.tsx
@@ -72,15 +72,17 @@ const SideBar: React.FC = () => {
         >
           <HomeIcon />
         </CustomisedListItem>
-        <CustomisedListItem
-          key="workflow"
-          handleClick={() => {
-            history.push('/workflows');
-          }}
-          label="Workflows"
-        >
-          <WorkflowsIcon />
-        </CustomisedListItem>
+        <div data-cy="workflows">
+          <CustomisedListItem
+            key="workflow"
+            handleClick={() => {
+              history.push('/workflows');
+            }}
+            label="Workflows"
+          >
+            <WorkflowsIcon />
+          </CustomisedListItem>
+        </div>
         <CustomisedListItem
           key="community"
           handleClick={() => {
@@ -91,15 +93,17 @@ const SideBar: React.FC = () => {
           <CommunityIcon />
         </CustomisedListItem>
         {userRole === 'Owner' && (
-          <CustomisedListItem
-            key="settings"
-            handleClick={() => {
-              history.push('/settings');
-            }}
-            label="Settings"
-          >
-            <SettingsIcon />
-          </CustomisedListItem>
+          <div data-cy="settings">
+            <CustomisedListItem
+              key="settings"
+              handleClick={() => {
+                history.push('/settings');
+              }}
+              label="Settings"
+            >
+              <SettingsIcon />
+            </CustomisedListItem>
+          </div>
         )}
       </List>
     </Drawer>
diff --git a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
index 13c84db2c..274910e19 100644
--- a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
+++ b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
@@ -203,6 +203,27 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
     if (activeStep === 3) {
       return (
         <div className={classes.buttonDiv}>
+          <div data-cy="backButton">
+            <ButtonOutline isDisabled={false} handleClick={handleBack}>
+              <>{t('welcomeModel.button.back')}</>
+            </ButtonOutline>
+          </div>
+          <div data-cy="startButton">
+            <ButtonFilled
+              isPrimary
+              isDisabled={isError.current}
+              handleClick={handleSubmit}
+              data-cy="Start"
+            >
+              <div>{t('welcomeModel.button.letsStart')}</div>
+            </ButtonFilled>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className={classes.buttonDiv}>
+        <div data-cy="backButton">
           <ButtonOutline
             isDisabled={false}
             handleClick={handleBack}
@@ -210,34 +231,17 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
           >
             <>{t('welcomeModel.button.back')}</>
           </ButtonOutline>
+        </div>
+        <div data-cy="startButton">
           <ButtonFilled
             isPrimary
             isDisabled={isError.current}
-            handleClick={handleSubmit}
-            data-cy="Start"
+            handleClick={handleNext}
+            data-cy="Continue"
           >
-            <div>{t('welcomeModel.button.letsStart')}</div>
+            <div>{t('welcomeModel.button.continue')}</div>
           </ButtonFilled>
         </div>
-      );
-    }
-    return (
-      <div className={classes.buttonDiv}>
-        <ButtonOutline
-          isDisabled={false}
-          handleClick={handleBack}
-          data-cy="Back"
-        >
-          <>{t('welcomeModel.button.back')}</>
-        </ButtonOutline>
-        <ButtonFilled
-          isPrimary
-          isDisabled={isError.current}
-          handleClick={handleNext}
-          data-cy="Continue"
-        >
-          <div>{t('welcomeModel.button.continue')}</div>
-        </ButtonFilled>
       </div>
     );
   };
@@ -374,7 +378,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
           <ModalPage
             renderMenu={
               <div className={classes.passwordSetterDiv}>
-                <div className={classes.inputArea} data-cy="InputName">
+                <div className={classes.inputArea} data-cy="InputEmail">
                   <InputField
                     label={t('welcomeModel.case-3.label')}
                     required
diff --git a/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx b/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
index 184ef3b60..45ace4cd6 100644
--- a/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
+++ b/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
@@ -98,7 +98,9 @@ const CardContent: React.FC<preDefinedWorkflowData> = ({
             <div className={classes.noImage}>Image</div>
           )}
           <div>
-            <div className={classes.title}>{title}</div>
+            <div data-cy="expName" className={classes.title}>
+              {title}
+            </div>
             <div className={classes.provider}>Contributed by {provider}</div>
           </div>
           {description ? (
diff --git a/litmus-portal/frontend/src/pages/LoginPage/index.tsx b/litmus-portal/frontend/src/pages/LoginPage/index.tsx
index ba491664a..debdcd081 100644
--- a/litmus-portal/frontend/src/pages/LoginPage/index.tsx
+++ b/litmus-portal/frontend/src/pages/LoginPage/index.tsx
@@ -87,52 +87,51 @@ const LoginPage = () => {
           </Typography>
           <form id="login-form" autoComplete="on" onSubmit={handleSubmit}>
             <div className={classes.inputDiv}>
-              <InputField
-                label="Username"
-                value={authData.username}
-                helperText={
-                  validateStartEmptySpacing(authData.username)
-                    ? 'Should not start with an empty space'
-                    : ''
-                }
-                validationError={validateStartEmptySpacing(authData.username)}
-                data-cy="inputEmail"
-                required
-                handleChange={(e) =>
-                  setAuthData({
-                    username: e.target.value,
-                    password: authData.password,
-                  })
-                }
-              />
-              <InputField
-                label="Password"
-                type="password"
-                required
-                value={authData.password}
-                helperText={
-                  isError
-                    ? 'Wrong Credentials - Try again with correct username or password'
-                    : ''
-                }
-                validationError={isError}
-                data-cy="inputPassword"
-                handleChange={(e) =>
-                  setAuthData({
-                    username: authData.username,
-                    password: e.target.value,
-                  })
-                }
-              />
+              <div className={classes.inputValue} data-cy="inputName">
+                <InputField
+                  label="Username"
+                  value={authData.username}
+                  helperText={
+                    validateStartEmptySpacing(authData.username)
+                      ? 'Should not start with an empty space'
+                      : ''
+                  }
+                  validationError={validateStartEmptySpacing(authData.username)}
+                  required
+                  handleChange={(e) =>
+                    setAuthData({
+                      username: e.target.value,
+                      password: authData.password,
+                    })
+                  }
+                />
+              </div>
+              <div className={classes.inputValue} data-cy="inputPassword">
+                <InputField
+                  label="Password"
+                  type="password"
+                  required
+                  value={authData.password}
+                  helperText={
+                    isError
+                      ? 'Wrong Credentials - Try again with correct username or password'
+                      : ''
+                  }
+                  validationError={isError}
+                  handleChange={(e) =>
+                    setAuthData({
+                      username: authData.username,
+                      password: e.target.value,
+                    })
+                  }
+                />
+              </div>
             </div>
             <div className={classes.loginDiv}>
-              <ButtonFilled
-                type="submit"
-                isPrimary
-                data-cy="loginButton"
-                isDisabled={isLoading}
-              >
-                {isLoading ? <Loader size={loaderSize} /> : 'Login'}
+              <ButtonFilled type="submit" isPrimary isDisabled={isLoading}>
+                <div data-cy="loginButton">
+                  {isLoading ? <Loader size={loaderSize} /> : 'Login'}
+                </div>
               </ButtonFilled>
             </div>
           </form>
diff --git a/litmus-portal/frontend/src/pages/LoginPage/styles.ts b/litmus-portal/frontend/src/pages/LoginPage/styles.ts
index a31793f89..225d92d26 100644
--- a/litmus-portal/frontend/src/pages/LoginPage/styles.ts
+++ b/litmus-portal/frontend/src/pages/LoginPage/styles.ts
@@ -59,7 +59,11 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    marginLeft: theme.spacing(-2),
+    marginLeft: theme.spacing(-2.1),
+  },
+
+  inputValue: {
+    width: '25rem',
   },
 
   linkForgotPass: {
diff --git a/litmus-portal/frontend/src/pages/Settings/index.tsx b/litmus-portal/frontend/src/pages/Settings/index.tsx
index 3731f73af..dc91d31c1 100644
--- a/litmus-portal/frontend/src/pages/Settings/index.tsx
+++ b/litmus-portal/frontend/src/pages/Settings/index.tsx
@@ -72,10 +72,14 @@ const Settings: React.FC = () => {
             },
           }}
         >
-          <Tab label="My Account" {...tabProps(0)} />
-          <Tab label="Team" {...tabProps(1)} />
+          <Tab data-cy="my-account" label="My Account" {...tabProps(0)} />
+          <Tab data-cy="teaming" label="Team" {...tabProps(1)} />
           {userData.username === 'admin' ? (
-            <Tab label="User Management" {...tabProps(2)} />
+            <Tab
+              data-cy="user-management"
+              label="User Management"
+              {...tabProps(2)}
+            />
           ) : (
             <></>
           )}
diff --git a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx b/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
index 35c19a250..bb65ab5c8 100644
--- a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
+++ b/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
@@ -80,7 +80,7 @@ const WorkflowDetails: React.FC = () => {
       {workflow ? (
         <div className={classes.root}>
           <div className={classes.workflowGraph}>
-            <Typography className={classes.heading}>
+            <Typography data-cy="wfName" className={classes.heading}>
               {workflow.workflow_name}
             </Typography>
             <Typography>{t('workflowDetails.detailedLog')}</Typography>
diff --git a/litmus-portal/frontend/src/pages/Workflows/index.tsx b/litmus-portal/frontend/src/pages/Workflows/index.tsx
index 0f8c599af..bd310c253 100644
--- a/litmus-portal/frontend/src/pages/Workflows/index.tsx
+++ b/litmus-portal/frontend/src/pages/Workflows/index.tsx
@@ -39,7 +39,7 @@ const Workflows = () => {
               isPrimary={false}
               handleClick={() => history.push('/create-workflow')}
             >
-              <>Schedule a workflow</>
+              <Typography>Schedule a workflow</Typography>
             </ButtonFilled>
           </div>
         </div>
@@ -55,10 +55,10 @@ const Workflows = () => {
           }}
           variant="fullWidth"
         >
-          <StyledTab label="Browse workflows" />
-          <StyledTab label="Schedules" />
-          <StyledTab label="Templates" />
-          <StyledTab label="Analytics" />
+          <StyledTab label="Browse workflows" data-cy="browseWorkflow" />
+          <StyledTab label="Schedules" data-cy="browseSchedule" />
+          <StyledTab label="Templates" data-cy="templates" />
+          <StyledTab label="Analytics" data-cy="analyticsWorkflow" />
         </Tabs>
       </AppBar>
       <TabPanel value={workflowTabValue} index={0}>
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx
index 53356870b..2f892af3f 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx
@@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
         <div className={classes.reliabiltyData}>
           <Typography>{data.resulting_points} Points</Typography>
           <div className={classes.progressBar}>
-            <LinearProgressBar value={data.resulting_points ?? 0} />
+            <LinearProgressBar width={2} value={data.resulting_points ?? 0} />
           </div>
         </div>
       </TableCell>
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx
index 24c4475b6..928bcac6e 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx
@@ -21,7 +21,7 @@ const ExperimentPoints: React.FC<ExperimentPointsProps> = ({
           {weight === 1 || 0 ? `${weight} point` : `${weight} points`}
         </Typography>
       </div>
-      <LinearProgressBar value={weight} />
+      <LinearProgressBar width={1} value={weight} />
     </>
   );
 };
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
index 5d3531cbd..db56e435b 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
@@ -134,6 +134,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           aria-haspopup="true"
           onClick={handleClick}
           className={classes.optionBtn}
+          data-cy="browseScheduleOptions"
         >
           <MoreVertIcon />
         </IconButton>
@@ -154,7 +155,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
                 alt="Delete Schedule"
                 className={classes.btnImg}
               />
-              <Typography className={classes.btnText}>
+              <Typography data-cy="deleteSchedule" className={classes.btnText}>
                 Delete Schedule
               </Typography>
             </div>
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
index 13b6ceeee..f34872e19 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
@@ -186,7 +186,10 @@ const BrowseSchedule = () => {
       </section>
       <section className="table section">
         {/* Table Header */}
-        <TableContainer className={classes.tableMain}>
+        <TableContainer
+          data-cy="browseScheduleTable"
+          className={classes.tableMain}
+        >
           <Table stickyHeader aria-label="simple table">
             <TableHead>
               <TableRow className={classes.tableHead}>
@@ -296,7 +299,7 @@ const BrowseSchedule = () => {
                 </TableRow>
               ) : error ? (
                 <TableRow>
-                  <TableCell colSpan={7}>
+                  <TableCell data-cy="browseScheduleError" colSpan={7}>
                     <Typography align="center">Unable to fetch data</Typography>
                   </TableCell>
                 </TableRow>
@@ -308,13 +311,16 @@ const BrowseSchedule = () => {
                       paginationData.rowsPerPage
                   )
                   .map((data: ScheduleWorkflow) => (
-                    <TableRow key={data.workflow_id}>
+                    <TableRow
+                      data-cy="browseScheduleData"
+                      key={data.workflow_id}
+                    >
                       <TableData data={data} deleteRow={deleteRow} />
                     </TableRow>
                   ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={7}>
+                  <TableCell data-cy="browseScheduleNoData" colSpan={7}>
                     <Typography align="center">No records available</Typography>
                   </TableCell>
                 </TableRow>
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
index c1247061a..e44dbbd9d 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
@@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
       fontWeight: 'bold',
       fontSize: 13,
     },
-    '& *': {
+    '& th': {
       backgroundColor: theme.palette.common.white,
     },
   },
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
index 1fc1f7c8f..1679a862a 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
@@ -15,7 +15,7 @@ const Head: React.FC<HeadProps> = ({ image, title, details }) => {
     <div className={classes.flexRow}>
       <img src={image} alt="workflowIcon" className={classes.bgIcon} />
       <div className={classes.body}>
-        <Typography className={classes.headerText}>
+        <Typography data-cy="expName" className={classes.headerText}>
           {/* Converting 'some-experiment' to 'Some Experiment' using capitalize utility */}
           {title?.split('-').map((text) => `${capitalize(text)} `)}
         </Typography>
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
index 04d63d0c6..0248a353f 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
@@ -49,7 +49,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
         <CustomStatus status={exeData.phase} />
       </TableCell>
       <TableCell className={classes.workflowNameData}>
-        <Typography>
+        <Typography data-cy="workflowName">
           <strong>{data.workflow_name}</strong>
         </Typography>
       </TableCell>
@@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
                 Overall RR: <span className={classes.failed}>0%</span>
               </Typography>
               <div className={classes.progressBar}>
-                <LinearProgressBar value={0} />
+                <LinearProgressBar width={2} value={0} />
               </div>
             </>
           ) : (
@@ -75,7 +75,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
                 Overall RR: <span className={classes.success}>100%</span>
               </Typography>
               <div className={classes.progressBar}>
-                <LinearProgressBar value={100} />
+                <LinearProgressBar width={2} value={100} />
               </div>
             </>
           )}
@@ -96,6 +96,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
           aria-haspopup="true"
           onClick={handleClick}
           className={classes.optionBtn}
+          data-cy="browseWorkflowOptions"
         >
           <MoreVertIcon />
         </IconButton>
@@ -112,7 +113,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
               history.push(`/workflows/details/${data.workflow_run_id}`)
             }
           >
-            <div className={classes.expDiv}>
+            <div className={classes.expDiv} data-cy="workflowDetails">
               <img
                 src="/icons/show-workflow.svg"
                 alt="Display Workflow"
@@ -129,7 +130,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
               history.push(`/workflows/analytics/${data.workflow_id}`)
             }
           >
-            <div className={classes.expDiv}>
+            <div className={classes.expDiv} data-cy="workflowAnalytics">
               <img
                 src="/icons/show-analytics.svg"
                 alt="Display Analytics"
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
index 7b932cafd..1d2187833 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
@@ -258,7 +258,7 @@ const BrowseWorkflow = () => {
       return <></>;
     }
     return (
-      <TableRow key={dataRow.workflow_run_id}>
+      <TableRow data-cy="browseWorkflowData" key={dataRow.workflow_run_id}>
         <TableData data={dataRow} exeData={exe_data} />
       </TableRow>
     );
@@ -285,7 +285,10 @@ const BrowseWorkflow = () => {
         />
       </section>
       <section className="table section">
-        <TableContainer className={classes.tableMain}>
+        <TableContainer
+          data-cy="browseWorkflowTable"
+          className={classes.tableMain}
+        >
           <Table stickyHeader aria-label="simple table">
             <TableHead className={classes.tableHead}>
               <TableRow>
@@ -423,7 +426,9 @@ const BrowseWorkflow = () => {
               {error ? (
                 <TableRow>
                   <TableCell colSpan={7}>
-                    <Typography align="center">Unable to fetch data</Typography>
+                    <Typography data-cy="browseWorkflowError" align="center">
+                      Unable to fetch data
+                    </Typography>
                   </TableCell>
                 </TableRow>
               ) : filteredData && filteredData.length ? (
@@ -437,7 +442,9 @@ const BrowseWorkflow = () => {
               ) : (
                 <TableRow>
                   <TableCell colSpan={7}>
-                    <Typography align="center">No records available</Typography>
+                    <Typography data-cy="browseWorkflowNoData" align="center">
+                      No records available
+                    </Typography>
                   </TableCell>
                 </TableRow>
               )}
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
index 009b28e39..31f56e43a 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
@@ -66,8 +66,6 @@ const useStyles = makeStyles((theme) => ({
     '& th': {
       fontWeight: 'bold',
       fontSize: 13,
-    },
-    '& *': {
       backgroundColor: theme.palette.common.white,
     },
   },
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
index c910edbcb..9d5c48988 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
@@ -61,7 +61,7 @@ const Templates = () => {
           </div>
           <Typography className={classes.headerSize}>Sort</Typography>
         </div> */}
-      <div className={classes.predefinedCards}>
+      <div data-cy="templatesPage" className={classes.predefinedCards}>
         <PredifinedWorkflows
           callbackOnSelectWorkflow={(index: number) => {
             selectWorkflow(index);
diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
index e475483bb..2472a7339 100644
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
@@ -106,7 +106,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
                     &nbsp; points
                     <br />
                     <div className={classes.progressBar}>
-                      <LinearProgressBar value={row.weight} />
+                      <LinearProgressBar width={2} value={row.weight} />
                     </div>
                   </TableCell>
                   <TableCell align="left" className={classes.tablePoints}>
@@ -114,7 +114,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
                     &nbsp; points
                     <br />
                     <div className={classes.progressBar}>
-                      <LinearProgressBar value={row.points} />
+                      <LinearProgressBar width={2} value={row.points} />
                     </div>
                   </TableCell>
                 </TableRow>
diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
index d8ea13a91..99153843b 100644
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
@@ -124,55 +124,59 @@ const AccountSettings: React.FC = () => {
           <div className={classes.outerPass}>
             <form className={classes.innerPass}>
               {/* Current Password */}
-              <InputField
-                required
-                value={password.currPassword}
-                handleChange={handleCurrPassword('currPassword')}
-                type="password"
-                label="Current Password"
-                validationError={false}
-              />
-
+              <div data-cy="currPassword">
+                <InputField
+                  required
+                  value={password.currPassword}
+                  handleChange={handleCurrPassword('currPassword')}
+                  type="password"
+                  label="Current Password"
+                  validationError={false}
+                />
+              </div>
               {/* New Password */}
-              <InputField
-                required
-                type="password"
-                handleChange={handleNewPassword('newPassword')}
-                success={isSuccess.current}
-                helperText={
-                  validateStartEmptySpacing(password.newPassword)
-                    ? 'Should not start with empty space'
-                    : ''
-                }
-                label="New Password"
-                validationError={validateStartEmptySpacing(
-                  password.newPassword
-                )}
-                value={password.newPassword}
-              />
-
+              <div data-cy="newPassword">
+                <InputField
+                  required
+                  type="password"
+                  handleChange={handleNewPassword('newPassword')}
+                  success={isSuccess.current}
+                  helperText={
+                    validateStartEmptySpacing(password.newPassword)
+                      ? 'Should not start with empty space'
+                      : ''
+                  }
+                  label="New Password"
+                  validationError={validateStartEmptySpacing(
+                    password.newPassword
+                  )}
+                  value={password.newPassword}
+                />
+              </div>
               {/* Confirm new password */}
-              <InputField
-                helperText={
-                  validateConfirmPassword(
+              <div data-cy="confPassword">
+                <InputField
+                  helperText={
+                    validateConfirmPassword(
+                      password.newPassword,
+                      password.confNewPassword
+                    )
+                      ? 'Password is not same'
+                      : ''
+                  }
+                  required
+                  type="password"
+                  handleChange={handleConfPassword('confNewPassword')}
+                  success={isSuccess.current}
+                  label="Confirm Password"
+                  validationError={validateConfirmPassword(
                     password.newPassword,
                     password.confNewPassword
-                  )
-                    ? 'Password is not same'
-                    : ''
-                }
-                required
-                type="password"
-                handleChange={handleConfPassword('confNewPassword')}
-                success={isSuccess.current}
-                label="Confirm Password"
-                validationError={validateConfirmPassword(
-                  password.newPassword,
-                  password.confNewPassword
-                )}
-                value={password.confNewPassword}
-              />
-              <div className={classes.buttonModal}>
+                  )}
+                  value={password.confNewPassword}
+                />
+              </div>
+              <div data-cy="change-password" className={classes.buttonModal}>
                 <ButtonFilled
                   data-cy="button"
                   isPrimary
@@ -211,7 +215,7 @@ const AccountSettings: React.FC = () => {
                         Error: {error}
                       </Typography>
                     </div>
-                    <div className={classes.buttonModal}>
+                    <div data-cy="done" className={classes.buttonModal}>
                       <ButtonFilled
                         isPrimary
                         isDisabled={false}
@@ -235,7 +239,7 @@ const AccountSettings: React.FC = () => {
                         account
                       </Typography>
                     </div>
-                    <div className={classes.buttonModal}>
+                    <div data-cy="done" className={classes.buttonModal}>
                       <ButtonFilled
                         isPrimary
                         isDisabled={false}
diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
index 2944b53a3..73a5e9e84 100644
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
@@ -94,6 +94,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
   buttonModal: {
     marginTop: theme.spacing(3.75),
+    width: '55%',
   },
   textSecondError: {
     width: '27.5rem',
diff --git a/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
index cb69d4291..9869e0e1f 100644
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@apollo/client';
-import { Button, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import ButtonFilled from '../../../../components/Button/ButtonFilled';
@@ -102,30 +102,32 @@ const PersonalDetails: React.FC = () => {
         />
 
         <div className={classes.saveButton}>
-          <ButtonFilled
-            isDisabled={!(personaData.fullName.length && !loading)}
-            isPrimary
-            handleClick={() => {
-              setLoading(true);
-              updateDetails({
-                variables: {
-                  user: {
-                    id: data?.getUser.id,
-                    name: personaData.fullName,
-                    email: personaData.email,
+          <div data-cy="save">
+            <ButtonFilled
+              isDisabled={!(personaData.fullName.length && !loading)}
+              isPrimary
+              handleClick={() => {
+                setLoading(true);
+                updateDetails({
+                  variables: {
+                    user: {
+                      id: data?.getUser.id,
+                      name: personaData.fullName,
+                      email: personaData.email,
+                    },
                   },
-                },
-              });
-            }}
-          >
-            {loading ? (
-              <div>
-                <Loader size={20} />
-              </div>
-            ) : (
-              <>Save Changes</>
-            )}
-          </ButtonFilled>
+                });
+              }}
+            >
+              {loading ? (
+                <div>
+                  <Loader size={20} />
+                </div>
+              ) : (
+                <>Save Changes</>
+              )}
+            </ButtonFilled>
+          </div>
           <Unimodal isOpen={open} handleClose={handleClose} hasCloseBtn>
             {error.length ? (
               <div className={classes.errDiv}>
@@ -141,7 +143,7 @@ const PersonalDetails: React.FC = () => {
                     Error: {error}
                   </Typography>
                 </div>
-                <div className={classes.buttonModal}>
+                <div data-cy="done" className={classes.buttonModal}>
                   <ButtonFilled
                     isPrimary
                     isDisabled={false}
@@ -164,14 +166,15 @@ const PersonalDetails: React.FC = () => {
                     Changes took effect
                   </Typography>
                 </div>
-                <Button
-                  data-cy="closeButton"
-                  variant="contained"
-                  className={classes.button}
-                  onClick={handleClose}
-                >
-                  Done
-                </Button>
+                <div data-cy="done">
+                  <ButtonFilled
+                    isPrimary
+                    isDisabled={false}
+                    handleClick={handleClose}
+                  >
+                    <Typography>Done</Typography>
+                  </ButtonFilled>
+                </div>
               </div>
             )}
           </Unimodal>
diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
index 0b20e4114..73eed7599 100644
--- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
@@ -56,40 +56,45 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
           </div>
           {/* Fields for details including Full name, email, username */}
           <div className={classes.details1}>
-            <InputField
-              required
-              helperText={
-                validateStartEmptySpacing(nameValue)
-                  ? 'Should not start with an empty space'
-                  : ''
-              }
-              value={nameValue}
-              disabled={nameIsDisabled}
-              handleChange={handleNameChange}
-              validationError={validateStartEmptySpacing(nameValue)}
-              label="Full Name"
-            />
-
-            <InputField
-              required
-              helperText={
-                validateEmail(emailValue) ? 'Should be a valid email' : ''
-              }
-              type="email"
-              value={emailValue}
-              disabled={emailIsDisabled}
-              handleChange={handleEmailChange}
-              validationError={validateEmail(emailValue)}
-              label="Email Address"
-            />
+            <div data-cy="InputName">
+              <InputField
+                required
+                helperText={
+                  validateStartEmptySpacing(nameValue)
+                    ? 'Should not start with an empty space'
+                    : ''
+                }
+                value={nameValue}
+                disabled={nameIsDisabled}
+                handleChange={handleNameChange}
+                validationError={validateStartEmptySpacing(nameValue)}
+                label="Full Name"
+              />
+            </div>
+            <div data-cy="InputEmail">
+              <InputField
+                required
+                helperText={
+                  validateEmail(emailValue) ? 'Should be a valid email' : ''
+                }
+                type="email"
+                value={emailValue}
+                disabled={emailIsDisabled}
+                handleChange={handleEmailChange}
+                validationError={validateEmail(emailValue)}
+                label="Email Address"
+              />
+            </div>
             {/* Username is not editable normal user */}
-            <InputField
-              value={userValue}
-              handleChange={handleUserChange}
-              label="Username"
-              disabled={usernameIsDisabled}
-              validationError={false}
-            />
+            <div data-cy="username">
+              <InputField
+                value={userValue}
+                handleChange={handleUserChange}
+                label="Username"
+                disabled={usernameIsDisabled}
+                validationError={false}
+              />
+            </div>
           </div>
         </div>
       </form>
diff --git a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
index c051237c5..9dec79006 100644
--- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
@@ -213,12 +213,11 @@ const UserManagement: React.FC = () => {
                       </FormControl>
                     </div>
                   </div>
-                  <div>
+                  <div data-cy="createUser">
                     <ButtonFilled
                       handleClick={() => {
                         setShowDiv(true);
                       }}
-                      data-cy="gotItButton"
                       isPrimary
                     >
                       <div>Create new user</div>