From 456c67e409833b63cda8c272e90819ed03528d0b Mon Sep 17 00:00:00 2001
From: Arkajyoti Mukherjee
 <32966391+arkajyotiMukherjee@users.noreply.github.com>
Date: Thu, 10 Sep 2020 22:40:31 +0530
Subject: [PATCH] chore: (litmus-portal) Final build bug fixes, refactoring and
 imporvements (#2029)

- refactored directory structure for frontend
- browse workflow table fixes and header notification fixes
- settings and project selection fixes
- project switching fixes, routing changes for settings and disabling buttons for release
- routes and breadcrumbs fixed
- tab switching improved with redux
Signed-off-by: arkajyotiMukherjee <arkajyoti.mukherjee@mayadata.io>
---
 .../component/LinearProgressBar.spec.tsx      |  4 +-
 .../cypress/component/passedVsFailed.spec.tsx |  5 +-
 .../semiCircularProgressBar.spec.tsx          |  4 +-
 .../cypress/component/weightSlider.spec.tsx   |  2 +-
 .../src/components/AdjustedWeights/index.tsx  |  6 +-
 .../src/components/BreadCrumbs/index.tsx      | 27 +++---
 .../Header/NotificationDropdown.tsx           | 21 ++---
 .../Header/NotificationListItem.tsx           | 20 ++---
 .../Header/ProfileDropdownItems.tsx           | 48 +++++-----
 .../Header/ProfileDropdownSection.tsx         |  4 +-
 .../Header/ProjectListItem.tsx                |  4 +-
 .../layouts => components}/Header/index.tsx   | 21 ++---
 .../layouts => components}/Header/styles.ts   |  0
 .../src/components/QuickActionCard/index.tsx  | 75 +++++++++-------
 .../layouts => components}/SideBar/index.tsx  | 32 ++++---
 .../layouts => components}/SideBar/styles.ts  |  0
 .../src/components/WorkflowStepper/index.tsx  | 12 +--
 .../frontend/src/containers/app/App.tsx       | 33 ++++---
 .../src/containers/layouts/Scaffold/index.tsx | 10 +--
 .../frontend/src/models/graphql/invite.ts     |  7 ++
 .../frontend/src/models/redux/tabs.ts         | 18 ++++
 .../frontend/src/pages/Community/index.tsx    | 18 ++--
 .../frontend/src/pages/HomePage/index.tsx     | 20 +++--
 .../frontend/src/pages/Settings/index.tsx     | 89 +++++++++++--------
 .../src/pages/WorkflowDetails/index.tsx       |  6 +-
 .../frontend/src/pages/Workflows/index.tsx    | 40 ++++++---
 .../frontend/src/redux/actions/tabs.ts        | 15 ++++
 .../frontend/src/redux/reducers/index.ts      |  4 +
 .../frontend/src/redux/reducers/tabs.ts       | 25 ++++++
 .../BrowseSchedule/TableData.tsx              |  8 +-
 .../ChaosWorkflows/BrowseSchedule/index.tsx   | 14 +--
 .../ChaosWorkflows/BrowseSchedule/styles.ts   |  1 +
 .../BrowseTemplate/ExperimentDetails.tsx      |  4 +-
 .../ChaosWorkflows/BrowseTemplate/Head.tsx    |  4 +-
 .../BrowseTemplate/Recommendation.tsx         |  0
 .../ChaosWorkflows/BrowseTemplate/index.tsx   | 12 +--
 .../ChaosWorkflows/BrowseTemplate/styles.ts   |  0
 .../BrowseWorkflow/HeaderSection.tsx          | 30 +++----
 .../BrowseWorkflow/TableData.tsx              | 14 +--
 .../ChaosWorkflows/BrowseWorkflow/index.tsx   | 10 +--
 .../ChaosWorkflows/BrowseWorkflow/styles.ts   |  1 +
 .../ChaosWorkflows/CustomStatus/Status.tsx    |  0
 .../ChaosWorkflows/CustomStatus/styles.ts     |  0
 .../ChaosWorkflows/Templates/index.tsx        | 10 +--
 .../ChaosWorkflows/Templates/styles.ts        |  0
 .../CommunityTimeSeriesPlot/index.tsx         |  8 +-
 .../CommunityTimeSeriesPlot/styles.ts         |  0
 .../Community/GeoMap/CityMap.tsx              |  2 +-
 .../Community/GeoMap/CountryMap.tsx           |  2 +-
 .../Community/GeoMap/geo.json                 |  0
 .../Community/GeoMap/index.tsx                |  2 +-
 .../CreateWorkflow/ChooseWorkflow/index.tsx   | 16 ++--
 .../CreateWorkflow/ChooseWorkflow/styles.ts   |  0
 .../ReliabilityScore/ResultTable.tsx          |  4 +-
 .../CreateWorkflow/ReliabilityScore/index.tsx | 22 ++---
 .../CreateWorkflow/ReliabilityScore/styles.ts |  0
 .../ScheduleWorkflow/SetTime/index.tsx        |  0
 .../ScheduleWorkflow/SetTime/styles.ts        |  0
 .../CreateWorkflow/ScheduleWorkflow/index.tsx |  4 +-
 .../CreateWorkflow/ScheduleWorkflow/styles.ts |  0
 .../CreateWorkflow/ToggleComponent/index.tsx  |  0
 .../CreateWorkflow/ToggleComponent/styles.ts  |  0
 .../CreateWorkflow/TuneWorkflow/index.tsx     | 12 +--
 .../CreateWorkflow/TuneWorkflow/styles.ts     |  0
 .../CreateWorkflow/VerifyCommit/index.tsx     | 26 +++---
 .../CreateWorkflow/VerifyCommit/styles.ts     |  0
 .../CreateWorkflow/WeightSlider/index.tsx     |  0
 .../CreateWorkflow/WeightSlider/styles.ts     |  0
 .../CreateWorkflow/WorkflowCluster/index.tsx  | 14 +--
 .../CreateWorkflow/WorkflowCluster/styles.ts  |  0
 .../ReturningHome/PassedVsFailed/index.tsx    |  0
 .../ReturningHome/PassedVsFailed/styles.ts    |  0
 .../ProgressBar/LinearProgressBar/index.tsx   |  0
 .../SemiCircularProgressBar/index.tsx         |  0
 .../SemiCircularProgressBar/styles.ts         |  0
 .../ReturningHome/TotalExperiments/index.tsx  |  0
 .../ReturningHome/TotalExperiments/styles.ts  |  0
 .../AccountsTab/AccountSettings/index.tsx     |  6 +-
 .../AccountsTab/AccountSettings/styles.ts     |  0
 .../AccountsTab/PersonalDetails/index.tsx     |  8 +-
 .../AccountsTab/PersonalDetails/styles.ts     |  0
 .../Invitation/ReceivedInvitations/index.tsx  | 30 +++----
 .../Invitation/ReceivedInvitations/styles.ts  |  0
 .../Invitation/SentInvitations/index.tsx      | 16 ++--
 .../Invitation/SentInvitations/styles.ts      |  0
 .../Settings/TeammingTab/Invitation/index.tsx |  4 +-
 .../Settings/TeammingTab/Invitation/styles.ts |  0
 .../InviteNew/Invite/TableData.tsx            |  7 +-
 .../TeammingTab/InviteNew/Invite/index.tsx    | 22 ++---
 .../TeammingTab/InviteNew/Invite/styles.ts    |  0
 .../Settings/TeammingTab/InviteNew/index.tsx  |  4 +-
 .../Settings/TeammingTab/InviteNew/styles.ts  |  0
 .../Settings/TeammingTab/index.tsx            | 14 +--
 .../Settings/TeammingTab/styles.ts            |  0
 .../CreateUser/NewUserModal/index.tsx         |  8 +-
 .../CreateUser/NewUserModal/styles.ts         |  0
 .../CreateUser/UserDetails/index.tsx          |  6 +-
 .../CreateUser/UserDetails/styles.ts          |  0
 .../UserManagementTab/CreateUser/index.tsx    |  4 +-
 .../UserManagementTab/CreateUser/styles.ts    |  0
 .../EditUser/DelUser/index.tsx                | 14 +--
 .../EditUser/DelUser/styles.ts                |  0
 .../EditUser/ResetModal/index.tsx             |  8 +-
 .../EditUser/ResetModal/styles.ts             |  0
 .../UserManagementTab/EditUser/index.tsx      |  4 +-
 .../UserManagementTab/EditUser/styles.ts      |  0
 .../UserManagement/index.tsx                  | 10 +--
 .../UserManagement/styles.ts                  |  0
 .../WorkflowDetails/ArgoWorkflow/index.tsx    |  8 +-
 .../WorkflowDetails/ArgoWorkflow/styles.ts    |  0
 .../WorkflowDetails/WorkflowInfo/index.tsx    |  6 +-
 .../WorkflowDetails/WorkflowInfo/styles.ts    |  0
 112 files changed, 531 insertions(+), 438 deletions(-)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/NotificationDropdown.tsx (94%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/NotificationListItem.tsx (97%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/ProfileDropdownItems.tsx (85%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/ProfileDropdownSection.tsx (96%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/ProjectListItem.tsx (95%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/index.tsx (92%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/Header/styles.ts (100%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/SideBar/index.tsx (79%)
 rename litmus-portal/frontend/src/{containers/layouts => components}/SideBar/styles.ts (100%)
 create mode 100644 litmus-portal/frontend/src/models/redux/tabs.ts
 create mode 100644 litmus-portal/frontend/src/redux/actions/tabs.ts
 create mode 100644 litmus-portal/frontend/src/redux/reducers/tabs.ts
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseSchedule/TableData.tsx (95%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseSchedule/index.tsx (96%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseSchedule/styles.ts (99%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx (94%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseTemplate/Head.tsx (95%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseTemplate/Recommendation.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseTemplate/index.tsx (83%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseTemplate/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx (97%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseWorkflow/TableData.tsx (89%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseWorkflow/index.tsx (98%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/BrowseWorkflow/styles.ts (99%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/CustomStatus/Status.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/CustomStatus/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/Templates/index.tsx (84%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ChaosWorkflows/Templates/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Community/CommunityTimeSeriesPlot/index.tsx (99%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Community/CommunityTimeSeriesPlot/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Community/GeoMap/CityMap.tsx (97%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Community/GeoMap/CountryMap.tsx (94%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Community/GeoMap/geo.json (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Community/GeoMap/index.tsx (88%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ChooseWorkflow/index.tsx (92%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ChooseWorkflow/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ReliabilityScore/ResultTable.tsx (98%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ReliabilityScore/index.tsx (86%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ReliabilityScore/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ScheduleWorkflow/SetTime/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ScheduleWorkflow/SetTime/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ScheduleWorkflow/index.tsx (98%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ScheduleWorkflow/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ToggleComponent/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/ToggleComponent/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/TuneWorkflow/index.tsx (87%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/TuneWorkflow/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/VerifyCommit/index.tsx (90%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/VerifyCommit/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/WeightSlider/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/WeightSlider/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/WorkflowCluster/index.tsx (92%)
 rename litmus-portal/frontend/src/{components/Sections => views}/CreateWorkflow/WorkflowCluster/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/PassedVsFailed/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/PassedVsFailed/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/ProgressBar/LinearProgressBar/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/ProgressBar/SemiCircularProgressBar/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/ProgressBar/SemiCircularProgressBar/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/TotalExperiments/index.tsx (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/ReturningHome/TotalExperiments/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/AccountsTab/AccountSettings/index.tsx (97%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/AccountsTab/AccountSettings/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/AccountsTab/PersonalDetails/index.tsx (94%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/AccountsTab/PersonalDetails/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx (87%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/Invitation/ReceivedInvitations/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/Invitation/SentInvitations/index.tsx (88%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/Invitation/SentInvitations/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/Invitation/index.tsx (94%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/Invitation/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/InviteNew/Invite/TableData.tsx (95%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/InviteNew/Invite/index.tsx (95%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/InviteNew/Invite/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/InviteNew/index.tsx (86%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/InviteNew/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/index.tsx (98%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/TeammingTab/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx (93%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx (94%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/CreateUser/UserDetails/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/CreateUser/index.tsx (98%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/CreateUser/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/EditUser/DelUser/index.tsx (90%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/EditUser/DelUser/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/EditUser/ResetModal/index.tsx (94%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/EditUser/ResetModal/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/EditUser/index.tsx (96%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/EditUser/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/UserManagement/index.tsx (98%)
 rename litmus-portal/frontend/src/{components/Sections => views}/Settings/UserManagementTab/UserManagement/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/WorkflowDetails/ArgoWorkflow/index.tsx (87%)
 rename litmus-portal/frontend/src/{components/Sections => views}/WorkflowDetails/ArgoWorkflow/styles.ts (100%)
 rename litmus-portal/frontend/src/{components/Sections => views}/WorkflowDetails/WorkflowInfo/index.tsx (96%)
 rename litmus-portal/frontend/src/{components/Sections => views}/WorkflowDetails/WorkflowInfo/styles.ts (100%)

diff --git a/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx b/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
index 111abb1b1..99e21af79 100644
--- a/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
+++ b/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
-import React from 'react';
 import { mount } from 'cypress-react-unit-test';
-import LinearProgressBar from '../../src/components/Sections/ReturningHome/ProgressBar/LinearProgressBar';
+import React from 'react';
+import LinearProgressBar from '../../src/views/ReturningHome/ProgressBar/LinearProgressBar';
 
 describe('Linear Progressbar Testing', () => {
   it('Progressbar stroke for value 3', () => {
diff --git a/litmus-portal/frontend/cypress/component/passedVsFailed.spec.tsx b/litmus-portal/frontend/cypress/component/passedVsFailed.spec.tsx
index a28248f18..abda1ae92 100644
--- a/litmus-portal/frontend/cypress/component/passedVsFailed.spec.tsx
+++ b/litmus-portal/frontend/cypress/component/passedVsFailed.spec.tsx
@@ -1,9 +1,8 @@
 /// <reference types="Cypress" />
 
-import React from 'react';
 import { mount } from 'cypress-react-unit-test';
-
-import PassedVsFailed from '../../src/components/Sections/ReturningHome/PassedVsFailed/index';
+import React from 'react';
+import PassedVsFailed from '../../src/views/ReturningHome/PassedVsFailed/index';
 
 // Test Suite - Passing props -> passed: 75, failed: 25
 describe('Passed Vs Failed: props -> passed: 75, failed: 25', () => {
diff --git a/litmus-portal/frontend/cypress/component/semiCircularProgressBar.spec.tsx b/litmus-portal/frontend/cypress/component/semiCircularProgressBar.spec.tsx
index 7f5f23b50..6fd1b6b4f 100644
--- a/litmus-portal/frontend/cypress/component/semiCircularProgressBar.spec.tsx
+++ b/litmus-portal/frontend/cypress/component/semiCircularProgressBar.spec.tsx
@@ -1,8 +1,8 @@
 /// <reference types="Cypress" />
 
-import React from 'react';
 import { mount } from 'cypress-react-unit-test';
-import SemiCircularProgressBar from '../../src/components/Sections/ReturningHome/ProgressBar/SemiCircularProgressBar';
+import React from 'react';
+import SemiCircularProgressBar from '../../src/views/ReturningHome/ProgressBar/SemiCircularProgressBar';
 
 // Test Suite -
 // Progress Bar props -> value = 50, 10, 100
diff --git a/litmus-portal/frontend/cypress/component/weightSlider.spec.tsx b/litmus-portal/frontend/cypress/component/weightSlider.spec.tsx
index 0a9cc3cd1..78db2b927 100644
--- a/litmus-portal/frontend/cypress/component/weightSlider.spec.tsx
+++ b/litmus-portal/frontend/cypress/component/weightSlider.spec.tsx
@@ -1,7 +1,7 @@
 /// <reference types="Cypress" />
 import { mount } from 'cypress-react-unit-test';
 import React from 'react';
-import CustomSlider from '../../src/components/Sections/CreateWorkflow/WeightSlider';
+import CustomSlider from '../../src/views/CreateWorkflow/WeightSlider';
 
 describe('Testing Custom Slider with different values', () => {
   [10, 5, 2].map((i) => {
diff --git a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx b/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
index 037584335..1a7879439 100644
--- a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
+++ b/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
-import LinearProgressBar from '../Sections/ReturningHome/ProgressBar/LinearProgressBar';
-import useStyles from './styles';
+import React from 'react';
 import capitalize from '../../utils/capitalize';
+import LinearProgressBar from '../../views/ReturningHome/ProgressBar/LinearProgressBar';
+import useStyles from './styles';
 
 interface AdjustedWeightsProps {
   testName: string;
diff --git a/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx b/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx
index 3a2ce1264..8bb892269 100644
--- a/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx
+++ b/litmus-portal/frontend/src/components/BreadCrumbs/index.tsx
@@ -1,8 +1,7 @@
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import * as React from 'react';
-import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { history } from '../../redux/configureStore';
+import capitalize from '../../utils/capitalize';
 import useStyles from './styles';
 
 interface CustomBreadcrumbsProps {
@@ -10,38 +9,32 @@ interface CustomBreadcrumbsProps {
 }
 
 const CustomBreadcrumbs: React.FC<CustomBreadcrumbsProps> = ({ location }) => {
-  const path: string[] = location.split('/');
-
-  let intermediateRoutes: string = '/';
-
+  const pathname: string[] = location.split('/');
+  let intermediateRoutes = '/';
   const classes = useStyles();
 
-  useEffect(() => {}, [path]);
-
   return (
     <Breadcrumbs aria-label="breadcrumb">
-      {path.map((path: string) => {
+      {pathname.map((path) => {
         if (path) {
           intermediateRoutes += path;
-
+          // If Template/Workflow Name is clicked [Workflow / Workflow-name / Template]
+          // it would redirect to /workflows
+          if (pathname[2] === 'template' && path === pathname[3]) {
+            return <span>{path}</span>;
+          }
           const link = (
             <Link
               key={path}
               to={intermediateRoutes}
               className={classes.breadCrumb}
-              onClick={() => {
-                history.push(`/${path}`);
-              }}
             >
-              {path.charAt(0).toUpperCase() + path.slice(1)}
+              {capitalize(path)}
             </Link>
           );
-
           intermediateRoutes += '/';
-
           return link;
         }
-
         return '';
       })}
     </Breadcrumbs>
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/NotificationDropdown.tsx b/litmus-portal/frontend/src/components/Header/NotificationDropdown.tsx
similarity index 94%
rename from litmus-portal/frontend/src/containers/layouts/Header/NotificationDropdown.tsx
rename to litmus-portal/frontend/src/components/Header/NotificationDropdown.tsx
index 866f74ea2..8dc8daa6f 100644
--- a/litmus-portal/frontend/src/containers/layouts/Header/NotificationDropdown.tsx
+++ b/litmus-portal/frontend/src/components/Header/NotificationDropdown.tsx
@@ -1,24 +1,24 @@
 /* eslint-disable no-nested-ternary */
-import React, { useState, useRef } from 'react';
 import {
-  Popover,
-  IconButton,
   AppBar,
+  Badge,
+  Box,
+  IconButton,
   List,
   ListItem,
   ListItemText,
+  Popover,
   Typography,
-  Box,
-  Badge,
 } from '@material-ui/core';
 import NotificationsOutlinedIcon from '@material-ui/icons/NotificationsOutlined';
-import NotificationListItem from './NotificationListItem';
-import useStyles from './styles';
+import React, { useRef, useState } from 'react';
 import {
   Message,
-  NotificationsCallBackType,
   NotificationIds,
-} from '../../../models/header';
+  NotificationsCallBackType,
+} from '../../models/header';
+import NotificationListItem from './NotificationListItem';
+import useStyles from './styles';
 
 interface NotificationDropdownProps {
   messages: Message[];
@@ -61,7 +61,8 @@ const NotificationsDropdown: React.FC<NotificationDropdownProps> = ({
         color="inherit"
       >
         <Badge
-          badgeContent={count === '0' ? messages.length : count}
+          // badgeContent={count === '0' ? messages.length : count}
+          badgeContent={0}
           color="secondary"
         >
           <NotificationsOutlinedIcon />
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/NotificationListItem.tsx b/litmus-portal/frontend/src/components/Header/NotificationListItem.tsx
similarity index 97%
rename from litmus-portal/frontend/src/containers/layouts/Header/NotificationListItem.tsx
rename to litmus-portal/frontend/src/components/Header/NotificationListItem.tsx
index d10990938..53585fc79 100644
--- a/litmus-portal/frontend/src/containers/layouts/Header/NotificationListItem.tsx
+++ b/litmus-portal/frontend/src/components/Header/NotificationListItem.tsx
@@ -1,17 +1,17 @@
+import {
+  IconButton,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+} from '@material-ui/core';
+import ClearIcon from '@material-ui/icons/Clear';
+import formatDistance from 'date-fns/formatDistance';
 import React, { useState } from 'react';
-import {
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-} from '@material-ui/core';
-import formatDistance from 'date-fns/formatDistance';
-import ClearIcon from '@material-ui/icons/Clear';
 import {
   Message,
-  NotificationsCallBackType,
   NotificationIds,
-} from '../../../models/header';
+  NotificationsCallBackType,
+} from '../../models/header';
 import useStyles from './styles';
 
 interface NotificationListItemProps {
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx b/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
similarity index 85%
rename from litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx
rename to litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
index 6be3f2681..6c34386d9 100644
--- a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownItems.tsx
+++ b/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
@@ -12,19 +12,20 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import config from '../../../config';
-import { GET_USER } from '../../../graphql';
+import config from '../../config';
+import { GET_USER } from '../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
   Project,
-} from '../../../models/graphql/user';
-import { ProjectsCallBackType } from '../../../models/header';
-import useActions from '../../../redux/actions';
-import * as UserActions from '../../../redux/actions/user';
-import { RootState } from '../../../redux/reducers';
-import userAvatar from '../../../utils/user';
+} from '../../models/graphql/user';
+import { ProjectsCallBackType } from '../../models/header';
+import useActions from '../../redux/actions';
+import * as UserActions from '../../redux/actions/user';
+import { history } from '../../redux/configureStore';
+import { RootState } from '../../redux/reducers';
+import userAvatar from '../../utils/user';
 import ProjectListItem from './ProjectListItem';
 import useStyles from './styles';
 
@@ -62,11 +63,9 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
     { variables: { username } }
   );
   const projects = data?.getUser.projects ?? [];
-  const [switchableProjects, setSwitchableProjects] = useState<Project[]>(
-    projects
-  );
+  const [switchableProjects, setSwitchableProjects] = useState<Project[]>([]);
   const [loggedOut, doLogout] = useState(false);
-  const { userData } = useSelector((state: RootState) => state);
+  const userData = useSelector((state: RootState) => state.userData);
 
   const logOut = () => {
     doLogout(true);
@@ -88,8 +87,6 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
       });
   };
 
-  const editProfile = () => {};
-
   const CallbackFromProjectListItem = (selectedProjectIDFromList: string) => {
     CallbackToSetSelectedProjectIDOnProfileDropdown(selectedProjectIDFromList);
   };
@@ -98,6 +95,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
     const projectsAvailableForSwitching: Project[] = [];
     projects.forEach((project) => {
       const memberList: Member[] = project.members;
+
       memberList.forEach((member) => {
         if (member.user_name === username && member.invitation === 'Accepted') {
           projectsAvailableForSwitching.push(project);
@@ -105,10 +103,6 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
       });
     });
     setSwitchableProjects(projectsAvailableForSwitching);
-  }, []);
-
-  useEffect(() => {
-    setSwitchableProjects(projects);
   }, [data]);
 
   return (
@@ -157,14 +151,16 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
               {email}
             </Typography>
 
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={editProfile}
-              className={classes.buttonEditProfile}
-            >
-              Edit Profile
-            </Button>
+            {userData.userRole === 'Owner' && (
+              <Button
+                variant="outlined"
+                size="small"
+                className={classes.buttonEditProfile}
+                onClick={() => history.push('/settings')}
+              >
+                Edit Profile
+              </Button>
+            )}
 
             <Button
               disabled={loggedOut}
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx b/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
similarity index 96%
rename from litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx
rename to litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
index 683a2b072..c574e96ba 100644
--- a/litmus-portal/frontend/src/containers/layouts/Header/ProfileDropdownSection.tsx
+++ b/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
@@ -3,8 +3,8 @@ import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreTwoToneIcon from '@material-ui/icons/ExpandMoreTwoTone';
 import React, { useRef, useState } from 'react';
-import { ProjectsCallBackType } from '../../../models/header';
-import userAvatar from '../../../utils/user';
+import { ProjectsCallBackType } from '../../models/header';
+import userAvatar from '../../utils/user';
 import ProfileInfoDropdownItems from './ProfileDropdownItems';
 import useStyles from './styles';
 
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx b/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
similarity index 95%
rename from litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx
rename to litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
index 77c3030df..ff294cbc4 100644
--- a/litmus-portal/frontend/src/containers/layouts/Header/ProjectListItem.tsx
+++ b/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
@@ -10,8 +10,8 @@ import CheckCircleSharpIcon from '@material-ui/icons/CheckCircleSharp';
 import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import React, { useState } from 'react';
-import { Project } from '../../../models/graphql/user';
-import { ProjectsCallBackType } from '../../../models/header';
+import { Project } from '../../models/graphql/user';
+import { ProjectsCallBackType } from '../../models/header';
 import useStyles from './styles';
 
 interface ProjectListItemProps {
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/index.tsx b/litmus-portal/frontend/src/components/Header/index.tsx
similarity index 92%
rename from litmus-portal/frontend/src/containers/layouts/Header/index.tsx
rename to litmus-portal/frontend/src/components/Header/index.tsx
index 943f50516..4c31f85e7 100644
--- a/litmus-portal/frontend/src/containers/layouts/Header/index.tsx
+++ b/litmus-portal/frontend/src/components/Header/index.tsx
@@ -5,18 +5,18 @@ import Toolbar from '@material-ui/core/Toolbar';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import CustomBreadCrumbs from '../../../components/BreadCrumbs';
-import { GET_USER } from '../../../graphql';
+import { GET_USER } from '../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
   Project,
-} from '../../../models/graphql/user';
-import { Message, NotificationIds } from '../../../models/header';
-import useActions from '../../../redux/actions';
-import * as UserActions from '../../../redux/actions/user';
-import { RootState } from '../../../redux/reducers';
+} from '../../models/graphql/user';
+import { Message, NotificationIds } from '../../models/header';
+import useActions from '../../redux/actions';
+import * as UserActions from '../../redux/actions/user';
+import { RootState } from '../../redux/reducers';
+import CustomBreadCrumbs from '../BreadCrumbs';
 import NotificationsDropdown from './NotificationDropdown';
 import ProfileDropdownSection from './ProfileDropdownSection';
 import useStyles from './styles';
@@ -53,17 +53,18 @@ const Header: React.FC = () => {
     projects.forEach((project) => {
       if (selectedProjectID === project.id) {
         const memberList: Member[] = project.members;
+
         memberList.forEach((member) => {
           if (member.user_name === data?.getUser.username) {
             user.updateUserDetails({
               selectedProjectID,
-              userRole: project.name,
-              selectedProjectName: member.role,
+              userRole: member.role,
+              selectedProjectName: project.name,
             });
             setSelectedProjectDetails({
               selectedProjectID,
-              selectedProjectName: project.name,
               selectedUserRole: member.role,
+              selectedProjectName: project.name,
             });
           }
         });
diff --git a/litmus-portal/frontend/src/containers/layouts/Header/styles.ts b/litmus-portal/frontend/src/components/Header/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/containers/layouts/Header/styles.ts
rename to litmus-portal/frontend/src/components/Header/styles.ts
diff --git a/litmus-portal/frontend/src/components/QuickActionCard/index.tsx b/litmus-portal/frontend/src/components/QuickActionCard/index.tsx
index a7345a91a..96b0acb61 100644
--- a/litmus-portal/frontend/src/components/QuickActionCard/index.tsx
+++ b/litmus-portal/frontend/src/components/QuickActionCard/index.tsx
@@ -1,56 +1,65 @@
 import { List, ListItem, Typography } from '@material-ui/core';
-import React from 'react';
-import { Link } from 'react-router-dom';
 import Card from '@material-ui/core/Card';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
+import { RootState } from '../../redux/reducers';
 import useStyles from './style';
 
-interface QuickActionItemsProps {
-  children: React.ReactNode;
-}
-
-const QuickActionItems: React.FC<QuickActionItemsProps> = ({ children }) => {
+const QuickActionItems: React.FC = ({ children }) => {
   const classes = useStyles();
   return <ListItem className={classes.listItems}>{children}</ListItem>;
 };
 
 const QuickActionCard = () => {
   const classes = useStyles();
+  const userRole = useSelector((state: RootState) => state.userData.userRole);
+  const tabs = useActions(TabActions);
+
   return (
     <div className={classes.quickActionCard}>
       <Card elevation={0}>
         <Typography className={classes.mainHeader}>Quick Actions</Typography>
         <List>
-          <QuickActionItems>
-            <>
-              <img src="icons/cluster.png" alt="cluster" />
-              <Link to="/" className={classes.listItem}>
-                Connect a new cluster
-              </Link>
-            </>
-          </QuickActionItems>
-          <QuickActionItems>
-            <>
+          {/* <QuickActionItems>
+            <img src="icons/cluster.png" alt="cluster" />
+            <Link to="/" className={classes.listItem}>
+              Connect a new cluster
+            </Link>
+          </QuickActionItems> */}
+          {userRole === 'Owner' && (
+            <QuickActionItems>
               <img src="icons/team.png" alt="team" />
-              <Link to="/" className={classes.listItem}>
+              <Link
+                to="/settings"
+                className={classes.listItem}
+                onClick={() => tabs.changeSettingsTabs(0)}
+              >
                 Invite a team member
               </Link>
-            </>
+            </QuickActionItems>
+          )}
+          <QuickActionItems>
+            <img src="icons/survey.png" alt="survey" />
+            <a
+              href="https://forms.gle/qMuVphRyEWCFqjD56"
+              className={classes.listItem}
+              target="_"
+            >
+              Take a quick survey
+            </a>
           </QuickActionItems>
           <QuickActionItems>
-            <>
-              <img src="icons/survey.png" alt="survey" />
-              <Link to="/" className={classes.listItem}>
-                Take a quick survey
-              </Link>
-            </>
-          </QuickActionItems>
-          <QuickActionItems>
-            <>
-              <img src="icons/docs.png" alt="docs" />
-              <Link to="/" className={classes.listItem}>
-                Read Litmus docs
-              </Link>
-            </>
+            <img src="icons/docs.png" alt="docs" />
+            <a
+              href="https://docs.litmuschaos.io/docs/getstarted/"
+              className={classes.listItem}
+              target="_"
+            >
+              Read Litmus docs
+            </a>
           </QuickActionItems>
         </List>
       </Card>
diff --git a/litmus-portal/frontend/src/containers/layouts/SideBar/index.tsx b/litmus-portal/frontend/src/components/SideBar/index.tsx
similarity index 79%
rename from litmus-portal/frontend/src/containers/layouts/SideBar/index.tsx
rename to litmus-portal/frontend/src/components/SideBar/index.tsx
index 49b15f370..010c6935a 100644
--- a/litmus-portal/frontend/src/containers/layouts/SideBar/index.tsx
+++ b/litmus-portal/frontend/src/components/SideBar/index.tsx
@@ -5,13 +5,14 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { history } from '../../../redux/configureStore';
+import { history } from '../../redux/configureStore';
+import { RootState } from '../../redux/reducers';
 import useStyles from './styles';
 
 interface CustomisedListItemProps {
   handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  children: JSX.Element;
   label: string;
 }
 
@@ -29,8 +30,9 @@ const CustomisedListItem: React.FC<CustomisedListItemProps> = ({
   );
 };
 
-const SideBar = () => {
+const SideBar: React.FC = () => {
   const classes = useStyles();
+  const userRole = useSelector((state: RootState) => state.userData.userRole);
 
   return (
     <Drawer
@@ -73,7 +75,7 @@ const SideBar = () => {
         >
           <img src="/icons/workflows.png" alt="workflow" />
         </CustomisedListItem>
-        <CustomisedListItem
+        {/* <CustomisedListItem
           key="hub"
           handleClick={() => {
             history.push('/404');
@@ -81,16 +83,7 @@ const SideBar = () => {
           label="My Hub"
         >
           <img src="/icons/hub.png" alt="hub" />
-        </CustomisedListItem>
-        <CustomisedListItem
-          key="settings"
-          handleClick={() => {
-            history.push('/settings');
-          }}
-          label="Settings"
-        >
-          <img src="/icons/setting.png" alt="settings" />
-        </CustomisedListItem>
+        </CustomisedListItem> */}
         <CustomisedListItem
           key="community"
           handleClick={() => {
@@ -100,6 +93,17 @@ const SideBar = () => {
         >
           <img src="/icons/community.png" alt="community" />
         </CustomisedListItem>
+        {userRole === 'Owner' && (
+          <CustomisedListItem
+            key="settings"
+            handleClick={() => {
+              history.push('/settings');
+            }}
+            label="Settings"
+          >
+            <img src="/icons/setting.png" alt="settings" />
+          </CustomisedListItem>
+        )}
       </List>
     </Drawer>
   );
diff --git a/litmus-portal/frontend/src/containers/layouts/SideBar/styles.ts b/litmus-portal/frontend/src/components/SideBar/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/containers/layouts/SideBar/styles.ts
rename to litmus-portal/frontend/src/components/SideBar/styles.ts
diff --git a/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx b/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx
index f74e1031e..366d2f331 100644
--- a/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx
+++ b/litmus-portal/frontend/src/components/WorkflowStepper/index.tsx
@@ -20,14 +20,14 @@ import * as WorkflowActions from '../../redux/actions/workflow';
 import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import parsed from '../../utils/yamlUtils';
+import ChooseWorkflow from '../../views/CreateWorkflow/ChooseWorkflow/index';
+import ReliablityScore from '../../views/CreateWorkflow/ReliabilityScore';
+import ScheduleWorkflow from '../../views/CreateWorkflow/ScheduleWorkflow';
+import TuneWorkflow from '../../views/CreateWorkflow/TuneWorkflow/index';
+import VerifyCommit from '../../views/CreateWorkflow/VerifyCommit';
+import ChooseAWorkflowCluster from '../../views/CreateWorkflow/WorkflowCluster';
 import ButtonFilled from '../Button/ButtonFilled';
 import ButtonOutline from '../Button/ButtonOutline';
-import ChooseWorkflow from '../Sections/CreateWorkflow/ChooseWorkflow/index';
-import ReliablityScore from '../Sections/CreateWorkflow/ReliabilityScore';
-import ScheduleWorkflow from '../Sections/CreateWorkflow/ScheduleWorkflow';
-import TuneWorkflow from '../Sections/CreateWorkflow/TuneWorkflow/index';
-import VerifyCommit from '../Sections/CreateWorkflow/VerifyCommit';
-import ChooseAWorkflowCluster from '../Sections/CreateWorkflow/WorkflowCluster';
 import QontoConnector from './quontoConnector';
 import useStyles from './styles';
 import useQontoStepIconStyles from './useQontoStepIconStyles';
diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx
index 62ec2727b..886cd8c86 100644
--- a/litmus-portal/frontend/src/containers/app/App.tsx
+++ b/litmus-portal/frontend/src/containers/app/App.tsx
@@ -16,20 +16,20 @@ const CreateWorkflow = lazy(() => import('../../pages/CreateWorkflow'));
 const LoginPage = lazy(() => import('../../pages/LoginPage'));
 const WorkflowDetails = lazy(() => import('../../pages/WorkflowDetails'));
 const BrowseTemplate = lazy(() =>
-  import('../../components/Sections/ChaosWorkflows/BrowseTemplate')
+  import('../../views/ChaosWorkflows/BrowseTemplate')
 );
 const HomePage = lazy(() => import('../../pages/HomePage'));
 const Community = lazy(() => import('../../pages/Community'));
 const Settings = lazy(() => import('../../pages/Settings'));
 const SchedulePage = lazy(() => import('../../pages/SchedulePage'));
 interface RoutesProps {
-  userData: string;
+  userData: UserData;
   isProjectAvailable: boolean;
 }
 
 const Routes: React.FC<RoutesProps> = ({ userData, isProjectAvailable }) => {
   const classes = useStyles();
-  if (userData === '') {
+  if (userData.token === '') {
     return (
       <div className={classes.content}>
         <Switch>
@@ -58,28 +58,32 @@ const Routes: React.FC<RoutesProps> = ({ userData, isProjectAvailable }) => {
         <Route exact path="/login" component={LoginPage} />
         <Route exact path="/workflows" component={Workflows} />
         <Route exact path="/create-workflow" component={CreateWorkflow} />
+
+        {/* Redirects */}
+        <Redirect exact path="/workflows/details" to="/workflows" />
+        <Redirect exact path="/workflows/schedule" to="/workflows" />
+        <Redirect exact path="/workflows/template" to="/workflows" />
         <Route
           exact
-          path="/workflows/:workflowName"
+          path="/workflows/details/:workflowRunId"
           component={WorkflowDetails}
         />
         <Route
           exact
-          path="/workflows/:workflowName/details"
-          component={WorkflowDetails}
-        />
-        <Route
-          exact
-          path="/workflows/:scheduleId/schedule"
+          path="/workflows/schedule/:scheduleId"
           component={SchedulePage}
         />
         <Route
           exact
-          path="/workflows/:templateName/template"
+          path="/workflows/template/:templateName"
           component={BrowseTemplate}
         />
         <Route exact path="/community" component={Community} />
-        <Route exact path="/settings" component={Settings} />
+        {userData.userRole === 'Owner' ? (
+          <Route exact path="/settings" component={Settings} />
+        ) : (
+          <Redirect to="/" />
+        )}
         <Route exact path="/404" component={ErrorPage} />
         <Redirect to="/404" />
       </Switch>
@@ -90,10 +94,11 @@ const Routes: React.FC<RoutesProps> = ({ userData, isProjectAvailable }) => {
 function App() {
   const classes = useStyles();
   const analyticsAction = useActions(AnalyticsActions);
-  const userData: UserData = useSelector((state: RootState) => state.userData);
+  const userData = useSelector((state: RootState) => state.userData);
   useEffect(() => {
     if (userData.token !== '') analyticsAction.loadCommunityAnalytics();
   }, [userData.token]);
+
   return (
     <Suspense fallback={<Loader />}>
       <Router history={history}>
@@ -101,7 +106,7 @@ function App() {
           <div className={classes.appFrame}>
             {/* <Routes /> */}
             <Routes
-              userData={userData.token}
+              userData={userData}
               isProjectAvailable={!!userData.selectedProjectID}
             />
           </div>
diff --git a/litmus-portal/frontend/src/containers/layouts/Scaffold/index.tsx b/litmus-portal/frontend/src/containers/layouts/Scaffold/index.tsx
index 84cfc19b5..696291cc7 100644
--- a/litmus-portal/frontend/src/containers/layouts/Scaffold/index.tsx
+++ b/litmus-portal/frontend/src/containers/layouts/Scaffold/index.tsx
@@ -1,14 +1,10 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import React from 'react';
-import Header from '../Header';
-import SideBar from '../SideBar';
+import Header from '../../../components/Header';
+import SideBar from '../../../components/SideBar';
 import useStyles from './styles';
 
-interface ScaffoldProps {
-  children: React.ReactNode;
-}
-
-const Scaffold: React.FC<ScaffoldProps> = ({ children }) => {
+const Scaffold: React.FC = ({ children }) => {
   const classes = useStyles();
 
   return (
diff --git a/litmus-portal/frontend/src/models/graphql/invite.ts b/litmus-portal/frontend/src/models/graphql/invite.ts
index b07743641..7e2696129 100644
--- a/litmus-portal/frontend/src/models/graphql/invite.ts
+++ b/litmus-portal/frontend/src/models/graphql/invite.ts
@@ -12,3 +12,10 @@ export interface MemberInviteNew {
     role: string;
   };
 }
+
+export interface UserInvite {
+  id: string;
+  name: string;
+  username: string;
+  email: string;
+}
diff --git a/litmus-portal/frontend/src/models/redux/tabs.ts b/litmus-portal/frontend/src/models/redux/tabs.ts
new file mode 100644
index 000000000..1661f351d
--- /dev/null
+++ b/litmus-portal/frontend/src/models/redux/tabs.ts
@@ -0,0 +1,18 @@
+export interface TabState {
+  workflows: number;
+  settings: number;
+}
+
+export enum TabActions {
+  CHANGE_WORKFLOWS_TAB = 'CHANGE_WORKFLOWS_TAB',
+  CHANGE_SETTINGS_TAB = 'CHANGE_SETTINGS_TAB',
+}
+
+interface TabActionType<T, P> {
+  type: T;
+  payload: P;
+}
+
+export type TabAction =
+  | TabActionType<typeof TabActions.CHANGE_WORKFLOWS_TAB, number>
+  | TabActionType<typeof TabActions.CHANGE_SETTINGS_TAB, number>;
diff --git a/litmus-portal/frontend/src/pages/Community/index.tsx b/litmus-portal/frontend/src/pages/Community/index.tsx
index 6ef4866ea..aaa7b74f2 100644
--- a/litmus-portal/frontend/src/pages/Community/index.tsx
+++ b/litmus-portal/frontend/src/pages/Community/index.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper'; // Temporary -> Should be replaced with Chart
+import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import { Link } from 'react-router-dom';
+import Paper from '@material-ui/core/Paper'; // Temporary -> Should be replaced with Chart
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import InfoFilledWrap from '../../components/InfoFilled/index';
-import Scaffold from '../../containers/layouts/Scaffold/index';
-import useStyles from './styles';
 import QuickActionCard from '../../components/QuickActionCard';
-import GeoMap from '../../components/Sections/Community/GeoMap/index';
-import CommunityAnalyticsPlot from '../../components/Sections/Community/CommunityTimeSeriesPlot';
+import Scaffold from '../../containers/layouts/Scaffold/index';
+import CommunityAnalyticsPlot from '../../views/Community/CommunityTimeSeriesPlot';
+import GeoMap from '../../views/Community/GeoMap/index';
+import useStyles from './styles';
 
 // Reusable Header Component
 const Header2: React.FC = ({ children }) => {
diff --git a/litmus-portal/frontend/src/pages/HomePage/index.tsx b/litmus-portal/frontend/src/pages/HomePage/index.tsx
index d742c0a48..7aa1b7940 100644
--- a/litmus-portal/frontend/src/pages/HomePage/index.tsx
+++ b/litmus-portal/frontend/src/pages/HomePage/index.tsx
@@ -4,7 +4,7 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Link, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import InfoFilledWrap from '../../components/InfoFilled';
 import Loader from '../../components/Loader';
 import QuickActionCard from '../../components/QuickActionCard';
@@ -18,24 +18,21 @@ import {
   Project,
 } from '../../models/graphql/user';
 import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
 import * as UserActions from '../../redux/actions/user';
+import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import useStyles from './style';
 
 const CreateWorkflowCard = () => {
   const { t } = useTranslation();
   const classes = useStyles();
-  const history = useHistory();
-  const routeChange = () => {
-    history.push('/create-workflow');
-  };
+
   return (
     <Card
       elevation={3}
       className={classes.createWorkflowCard}
-      onClick={() => {
-        routeChange();
-      }}
+      onClick={() => history.push('/create-workflow')}
       data-cy="createWorkflow"
     >
       <CardActionArea>
@@ -57,6 +54,7 @@ const HomePage = () => {
   const classes = useStyles();
   const { t } = useTranslation();
   const user = useActions(UserActions);
+  const tabs = useActions(TabActions);
 
   // Query to get user details
   const { data, loading } = useQuery<
@@ -109,7 +107,7 @@ const HomePage = () => {
             <div className={classes.root}>
               <Typography className={classes.userName}>
                 {t('home.heading')}
-                <strong>{name}</strong>
+                <strong>{` ${name}`}</strong>
               </Typography>
               <div className={classes.headingDiv}>
                 <div className={classes.mainDiv}>
@@ -126,6 +124,10 @@ const HomePage = () => {
                     <Button
                       variant="contained"
                       className={classes.predefinedBtn}
+                      onClick={() => {
+                        tabs.changeWorkflowsTabs(2);
+                        history.push('/workflows');
+                      }}
                     >
                       <Typography variant="subtitle1">
                         {t('home.button1')}
diff --git a/litmus-portal/frontend/src/pages/Settings/index.tsx b/litmus-portal/frontend/src/pages/Settings/index.tsx
index 11edc62b4..d51d30fd2 100644
--- a/litmus-portal/frontend/src/pages/Settings/index.tsx
+++ b/litmus-portal/frontend/src/pages/Settings/index.tsx
@@ -1,11 +1,13 @@
 import { Box, Paper, Tab, Tabs, Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import AccountSettings from '../../components/Sections/Settings/AccountsTab/AccountSettings';
-import TeammingTab from '../../components/Sections/Settings/TeammingTab';
-import UserManagement from '../../components/Sections/Settings/UserManagementTab/UserManagement';
+import Center from '../../containers/layouts/Center';
 import Scaffold from '../../containers/layouts/Scaffold';
+import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
 import { RootState } from '../../redux/reducers';
+import TeammingTab from '../../views/Settings/TeammingTab';
+import UserManagement from '../../views/Settings/UserManagementTab/UserManagement';
 import useStyles from './styles';
 
 interface TabPanelProps {
@@ -40,48 +42,57 @@ function tabProps(index: any) {
 }
 
 const Settings: React.FC = () => {
-  const [activeTab, setActiveTab] = React.useState(0);
   const classes = useStyles();
-  const handleChange = (event: React.ChangeEvent<{}>, actTab: number) => {
-    setActiveTab(actTab);
+
+  const settingsTabValue = useSelector(
+    (state: RootState) => state.tabNumber.settings
+  );
+  const userData = useSelector((state: RootState) => state.userData);
+  const tabs = useActions(TabActions);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    tabs.changeSettingsTabs(newValue);
   };
 
-  const { userData } = useSelector((state: RootState) => state);
   return (
     <Scaffold>
-      <div>
-        <Typography className={classes.Head}>Settings </Typography>
-        <Paper className={classes.root} elevation={0}>
-          <Tabs
-            className={classes.tab}
-            value={activeTab}
-            onChange={handleChange}
-            indicatorColor="secondary"
-            textColor="secondary"
-          >
-            <Tab label="My Account" {...tabProps(0)} />
-            <Tab label="Team" {...tabProps(1)} />
-            {userData.username === 'admin' ? (
-              <Tab label="User Management" {...tabProps(2)} />
-            ) : (
-              <></>
-            )}
-          </Tabs>
-        </Paper>
-        <TabPanel value={activeTab} index={0}>
-          <AccountSettings />
+      <Typography className={classes.Head}>Settings </Typography>
+      <Paper className={classes.root} elevation={0}>
+        <Tabs
+          className={classes.tab}
+          value={settingsTabValue}
+          onChange={handleChange}
+          indicatorColor="secondary"
+          textColor="secondary"
+        >
+          <Tab label="Team" {...tabProps(0)} />
+          {userData.username === 'admin' ? (
+            <Tab label="User Management" {...tabProps(1)} />
+          ) : (
+            <></>
+          )}
+          <Tab label="My Account" {...tabProps(2)} />
+        </Tabs>
+      </Paper>
+
+      <TabPanel value={settingsTabValue} index={0}>
+        <TeammingTab />
+      </TabPanel>
+      {userData.username === 'admin' ? (
+        <TabPanel value={settingsTabValue} index={1}>
+          <UserManagement />
         </TabPanel>
-        <TabPanel value={activeTab} index={1}>
-          <TeammingTab />
-        </TabPanel>
-        {userData.username === 'admin' ? (
-          <TabPanel value={activeTab} index={2}>
-            <UserManagement />
-          </TabPanel>
-        ) : (
-          <></>
-        )}
-      </div>
+      ) : (
+        <></>
+      )}
+      <TabPanel value={settingsTabValue} index={2}>
+        {/* <AccountSettings /> */}
+        <Center>
+          <Typography variant="h3" align="center">
+            My Account Page comming soon
+          </Typography>
+        </Center>
+      </TabPanel>
     </Scaffold>
   );
 };
diff --git a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx b/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
index e36965afd..07dcdb635 100644
--- a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
+++ b/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
@@ -4,8 +4,6 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import Loader from '../../components/Loader';
-import ArgoWorkflow from '../../components/Sections/WorkflowDetails/ArgoWorkflow';
-import WorkflowInfo from '../../components/Sections/WorkflowDetails/WorkflowInfo';
 import Scaffold from '../../containers/layouts/Scaffold';
 import { WORKFLOW_DETAILS, WORKFLOW_EVENTS } from '../../graphql';
 import {
@@ -15,13 +13,15 @@ import {
   WorkflowSubscription,
 } from '../../models/graphql/workflowData';
 import { RootState } from '../../redux/reducers';
+import ArgoWorkflow from '../../views/WorkflowDetails/ArgoWorkflow';
+import WorkflowInfo from '../../views/WorkflowDetails/WorkflowInfo';
 import useStyles from './styles';
 
 const WorkflowDetails: React.FC = () => {
   const classes = useStyles();
   const { pathname } = useLocation();
   // Getting the workflow nome from the pathname
-  const workflowRunId = pathname.split('/')[2];
+  const workflowRunId = pathname.split('/')[3];
 
   // get ProjectID
   const selectedProjectID = useSelector(
diff --git a/litmus-portal/frontend/src/pages/Workflows/index.tsx b/litmus-portal/frontend/src/pages/Workflows/index.tsx
index 15b91b562..9e7aefa4d 100644
--- a/litmus-portal/frontend/src/pages/Workflows/index.tsx
+++ b/litmus-portal/frontend/src/pages/Workflows/index.tsx
@@ -1,21 +1,28 @@
 import { AppBar, Typography } from '@material-ui/core';
 import Tabs from '@material-ui/core/Tabs';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import ButtonFilled from '../../components/Button/ButtonFilled';
-import BrowseSchedule from '../../components/Sections/ChaosWorkflows/BrowseSchedule';
-import BrowseWorkflow from '../../components/Sections/ChaosWorkflows/BrowseWorkflow';
-import Templates from '../../components/Sections/ChaosWorkflows/Templates';
 import { StyledTab, TabPanel } from '../../components/Tabs';
+import Center from '../../containers/layouts/Center';
 import Scaffold from '../../containers/layouts/Scaffold';
+import useActions from '../../redux/actions';
+import * as TabActions from '../../redux/actions/tabs';
 import { history } from '../../redux/configureStore';
+import { RootState } from '../../redux/reducers';
+import BrowseWorkflow from '../../views/ChaosWorkflows/BrowseWorkflow';
+import Templates from '../../views/ChaosWorkflows/Templates';
 import useStyles from './styles';
 
 const Workflows = () => {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
+  const workflowTabValue = useSelector(
+    (state: RootState) => state.tabNumber.workflows
+  );
+  const tabs = useActions(TabActions);
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    setValue(newValue);
+    tabs.changeWorkflowsTabs(newValue);
   };
 
   return (
@@ -35,7 +42,7 @@ const Workflows = () => {
       </section>
       <AppBar position="static" color="default" className={classes.appBar}>
         <Tabs
-          value={value}
+          value={workflowTabValue}
           onChange={handleChange}
           indicatorColor="secondary"
           textColor="secondary"
@@ -47,17 +54,26 @@ const Workflows = () => {
           <StyledTab label="Analytics" />
         </Tabs>
       </AppBar>
-      <TabPanel value={value} index={0}>
+      <TabPanel value={workflowTabValue} index={0}>
         <BrowseWorkflow />
       </TabPanel>
-      <TabPanel value={value} index={1}>
-        <BrowseSchedule />
+      <TabPanel value={workflowTabValue} index={1}>
+        {/* <BrowseSchedule /> */}
+        <Center>
+          <Typography variant="h3" align="center">
+            Schedule comming soon
+          </Typography>
+        </Center>
       </TabPanel>
-      <TabPanel value={value} index={2}>
+      <TabPanel value={workflowTabValue} index={2}>
         <Templates />
       </TabPanel>
-      <TabPanel value={value} index={3}>
-        Analytics comming soon
+      <TabPanel value={workflowTabValue} index={3}>
+        <Center>
+          <Typography variant="h3" align="center">
+            Analytics comming soon
+          </Typography>
+        </Center>
       </TabPanel>
     </Scaffold>
   );
diff --git a/litmus-portal/frontend/src/redux/actions/tabs.ts b/litmus-portal/frontend/src/redux/actions/tabs.ts
new file mode 100644
index 000000000..4c260dbcd
--- /dev/null
+++ b/litmus-portal/frontend/src/redux/actions/tabs.ts
@@ -0,0 +1,15 @@
+import { TabAction, TabActions } from '../../models/redux/tabs';
+
+export function changeWorkflowsTabs(tabNumber: number): TabAction {
+  return {
+    type: TabActions.CHANGE_WORKFLOWS_TAB,
+    payload: tabNumber,
+  };
+}
+
+export function changeSettingsTabs(tabNumber: number): TabAction {
+  return {
+    type: TabActions.CHANGE_SETTINGS_TAB,
+    payload: tabNumber,
+  };
+}
diff --git a/litmus-portal/frontend/src/redux/reducers/index.ts b/litmus-portal/frontend/src/redux/reducers/index.ts
index 883fa16a3..7f65a92d3 100644
--- a/litmus-portal/frontend/src/redux/reducers/index.ts
+++ b/litmus-portal/frontend/src/redux/reducers/index.ts
@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import { Node } from '../../models/graphql/workflowData';
 import { CommunityData } from '../../models/redux/analytics';
+import { TabState } from '../../models/redux/tabs';
 import { UserData } from '../../models/redux/user';
 import { WorkflowData } from '../../models/redux/workflow';
 import * as analyticsReducer from './analytics';
 import * as nodeSelectionReducer from './nodeSelection';
+import * as tabsReducer from './tabs';
 import * as userReducer from './user';
 import * as workflowReducer from './workflow';
 
@@ -13,6 +15,7 @@ export interface RootState {
   userData: UserData;
   workflowData: WorkflowData;
   selectedNode: Node;
+  tabNumber: TabState;
 }
 
 export default () =>
@@ -21,4 +24,5 @@ export default () =>
     ...userReducer,
     ...workflowReducer,
     ...nodeSelectionReducer,
+    ...tabsReducer,
   });
diff --git a/litmus-portal/frontend/src/redux/reducers/tabs.ts b/litmus-portal/frontend/src/redux/reducers/tabs.ts
new file mode 100644
index 000000000..7970fb834
--- /dev/null
+++ b/litmus-portal/frontend/src/redux/reducers/tabs.ts
@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+import { TabAction, TabActions, TabState } from '../../models/redux/tabs';
+import createReducer from './createReducer';
+
+const initialState: TabState = {
+  workflows: 0,
+  settings: 0,
+};
+
+export const tabNumber = createReducer<TabState>(initialState, {
+  [TabActions.CHANGE_WORKFLOWS_TAB](state: TabState, action: TabAction) {
+    return {
+      ...state,
+      workflows: action.payload,
+    };
+  },
+  [TabActions.CHANGE_SETTINGS_TAB](state: TabState, action: TabAction) {
+    return {
+      ...state,
+      settings: action.payload,
+    };
+  },
+});
+
+export default tabNumber;
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
similarity index 95%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
index d257cbd2b..1650ddf30 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
@@ -12,8 +12,8 @@ import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import moment from 'moment';
 import React from 'react';
-import { WorkflowRun } from '../../../../models/graphql/workflowData';
-import { history } from '../../../../redux/configureStore';
+import { WorkflowRun } from '../../../models/graphql/workflowData';
+import { history } from '../../../redux/configureStore';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import useStyles from './styles';
 
@@ -77,7 +77,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
   ];
   return (
     <>
-      <TableCell align="center" className={classes.workflowNameData}>
+      <TableCell className={classes.workflowNameData}>
         <Typography>
           <strong>{data.workflow_name}</strong>
         </Typography>
@@ -170,7 +170,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           <MenuItem
             value="Workflow"
             onClick={() =>
-              history.push(`/workflows/${data.workflow_run_id}/schedule`)
+              history.push(`/workflows/schedule/${data.workflow_run_id}`)
             }
           >
             <div className={classes.expDiv}>
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
similarity index 96%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
index c31fa1ee0..36fbfa991 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
@@ -21,21 +21,21 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SearchIcon from '@material-ui/icons/Search';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { WORKFLOW_DETAILS } from '../../../../graphql';
+import Loader from '../../../components/Loader';
+import { WORKFLOW_DETAILS } from '../../../graphql';
 import {
   ExecutionData,
   Workflow,
   WorkflowDataVars,
   WorkflowRun,
-} from '../../../../models/graphql/workflowData';
-import { RootState } from '../../../../redux/reducers';
+} from '../../../models/graphql/workflowData';
+import { RootState } from '../../../redux/reducers';
 import {
   sortAlphaAsc,
   sortAlphaDesc,
   sortNumAsc,
   sortNumDesc,
-} from '../../../../utils/sort';
-import Loader from '../../../Loader';
+} from '../../../utils/sort';
 import useStyles from './styles';
 import TableData from './TableData';
 
@@ -159,8 +159,8 @@ const BrowseSchedule = () => {
               className={classes.selectText}
             >
               <MenuItem value="All">All</MenuItem>
-              <MenuItem value="Predefined">Cluset pre-defined</MenuItem>
-              <MenuItem value="Kubernetes">Kubernetes Cluster</MenuItem>
+              <MenuItem value="Internal">Internal</MenuItem>
+              <MenuItem value="External">External</MenuItem>
             </Select>
           </FormControl>
         </div>
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
similarity index 99%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/styles.ts
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
index 7f045ffd3..538a1f6ae 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
@@ -75,6 +75,7 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(1.25),
   },
   workflowNameData: {
+    maxWidth: '15.625rem',
     borderRight: `1px solid ${theme.palette.customColors.black(0.1)}`,
   },
   regularity: {
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx
similarity index 94%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx
index dbaeb9a07..94f8ef451 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
-import AdjustedWeight from '../../../AdjustedWeights';
+import React from 'react';
+import AdjustedWeight from '../../../components/AdjustedWeights';
 import useStyles from './styles';
 
 interface ExperimentDetailsProps {
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/Head.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
similarity index 95%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/Head.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
index 0576e35bf..b9a6e90ec 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/Head.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import { Typography } from '@material-ui/core';
+import React from 'react';
+import capitalize from '../../../utils/capitalize';
 import useStyles from './styles';
-import capitalize from '../../../../utils/capitalize';
 
 interface HeadProps {
   image?: string;
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/Recommendation.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Recommendation.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/Recommendation.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Recommendation.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx
similarity index 83%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/index.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx
index be398c53e..b99d52cd8 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx
@@ -1,11 +1,11 @@
 import { Divider, Typography } from '@material-ui/core';
 import React from 'react';
-import Scaffold from '../../../../containers/layouts/Scaffold';
-import { preDefinedWorkflowData } from '../../../../models/predefinedWorkflow';
-import { LocationState } from '../../../../models/routerModel';
-import { history } from '../../../../redux/configureStore';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutlined from '../../../Button/ButtonOutline';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutlined from '../../../components/Button/ButtonOutline';
+import Scaffold from '../../../containers/layouts/Scaffold';
+import { preDefinedWorkflowData } from '../../../models/predefinedWorkflow';
+import { LocationState } from '../../../models/routerModel';
+import { history } from '../../../redux/configureStore';
 import ExperimentDetails from './ExperimentDetails';
 import Head from './Head';
 import Recommendation from './Recommendation';
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseTemplate/styles.ts
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx
similarity index 97%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx
index e1b5290a1..e72267de7 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx
@@ -1,23 +1,23 @@
-import React, { useState } from 'react';
 import {
-  InputBase,
-  InputAdornment,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  Typography,
-  IconButton,
-  Popover,
   Button,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputBase,
+  InputLabel,
+  MenuItem,
+  Popover,
+  Select,
+  Typography,
 } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import SearchIcon from '@material-ui/icons/Search';
+import React, { useState } from 'react';
 import { DateRangePicker } from 'react-date-range';
-import useStyles from './styles';
 import 'react-date-range/dist/styles.css'; // main css file
 import 'react-date-range/dist/theme/default.css'; // theme css file
+import useStyles from './styles';
 
 interface HeaderSectionProps {
   searchValue: string;
@@ -130,8 +130,8 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
             className={classes.selectText}
           >
             <MenuItem value="All">All</MenuItem>
-            <MenuItem value="Predefined">Cluset pre-defined</MenuItem>
-            <MenuItem value="Kubernetes">Kubernetes Cluster</MenuItem>
+            <MenuItem value="Internal">Internal</MenuItem>
+            <MenuItem value="External">External</MenuItem>
           </Select>
         </FormControl>
 
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
similarity index 89%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
index 7477f8c3c..7468d918c 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
@@ -10,9 +10,9 @@ import React from 'react';
 import {
   ExecutionData,
   WorkflowRun,
-} from '../../../../models/graphql/workflowData';
-import { history } from '../../../../redux/configureStore';
-import timeDifferenceForDate from '../../../../utils/datesModifier';
+} from '../../../models/graphql/workflowData';
+import { history } from '../../../redux/configureStore';
+import timeDifferenceForDate from '../../../utils/datesModifier';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import CustomStatus from '../CustomStatus/Status';
 import useStyles from './styles';
@@ -102,17 +102,17 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
           <MenuItem
             value="Workflow"
             onClick={() =>
-              history.push(`/workflows/${data.workflow_run_id}/details`)
+              history.push(`/workflows/details/${data.workflow_run_id}`)
             }
           >
             Show the workflow
           </MenuItem>
           <MenuItem value="Analysis" onClick={handleMenu}>
-            Show the analysis
+            Show the analytics
           </MenuItem>
-          <MenuItem value="Scheduler" onClick={handleMenu}>
+          {/* <MenuItem value="Scheduler" onClick={handleMenu}>
             Show the scheduler
-          </MenuItem>
+          </MenuItem> */}
         </Menu>
       </TableCell>
     </>
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
similarity index 98%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
index 55b9a1097..f6fc0fdbb 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
@@ -15,21 +15,21 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { WORKFLOW_DETAILS, WORKFLOW_EVENTS } from '../../../../graphql';
+import { WORKFLOW_DETAILS, WORKFLOW_EVENTS } from '../../../graphql';
 import {
   ExecutionData,
   Workflow,
   WorkflowDataVars,
   WorkflowRun,
   WorkflowSubscription,
-} from '../../../../models/graphql/workflowData';
-import { RootState } from '../../../../redux/reducers';
+} from '../../../models/graphql/workflowData';
+import { RootState } from '../../../redux/reducers';
 import {
   sortAlphaAsc,
   sortAlphaDesc,
   sortNumAsc,
   sortNumDesc,
-} from '../../../../utils/sort';
+} from '../../../utils/sort';
 import HeaderSection from './HeaderSection';
 import useStyles from './styles';
 import TableData from './TableData';
@@ -156,7 +156,7 @@ const BrowseWorkflow = () => {
     .filter((dataRow) =>
       filters.cluster === 'All'
         ? true
-        : dataRow.cluster_name.toLowerCase().includes(filters.cluster)
+        : dataRow.cluster_name.includes(filters.cluster)
     )
     .filter((dataRow) => {
       return dateRange.fromDate && dateRange.toDate === undefined
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
similarity index 99%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/styles.ts
rename to litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
index d31558a7e..b8ce6398e 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
@@ -87,6 +87,7 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(5.625),
   },
   workflowNameData: {
+    maxWidth: '15.625rem',
     borderRight: `1px solid ${theme.palette.customColors.black(0.1)}`,
   },
   targetCluster: {
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/CustomStatus/Status.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/CustomStatus/Status.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/CustomStatus/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/CustomStatus/styles.ts
rename to litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/Templates/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
similarity index 84%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/Templates/index.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
index b6e25153f..109903f3c 100644
--- a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/Templates/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { history } from '../../../../redux/configureStore';
-import parsed from '../../../../utils/yamlUtils';
-import PredifinedWorkflows from '../../../PredifinedWorkflows';
-import workflowData from '../../../PredifinedWorkflows/data';
+import PredifinedWorkflows from '../../../components/PredifinedWorkflows';
+import workflowData from '../../../components/PredifinedWorkflows/data';
+import { history } from '../../../redux/configureStore';
+import parsed from '../../../utils/yamlUtils';
 import useStyles from './styles';
 
 const Templates = () => {
@@ -24,7 +24,7 @@ const Templates = () => {
             testWeights.push(10);
           });
           history.push({
-            pathname: `/workflows/${workflowData[index].title}/template`,
+            pathname: `/workflows/template/${workflowData[index].title}`,
             state: {
               workflowData: workflowData[index],
               testNames,
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/Templates/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ChaosWorkflows/Templates/styles.ts
rename to litmus-portal/frontend/src/views/ChaosWorkflows/Templates/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Community/CommunityTimeSeriesPlot/index.tsx b/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx
similarity index 99%
rename from litmus-portal/frontend/src/components/Sections/Community/CommunityTimeSeriesPlot/index.tsx
rename to litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx
index cf4b487e4..3393807fe 100644
--- a/litmus-portal/frontend/src/components/Sections/Community/CommunityTimeSeriesPlot/index.tsx
+++ b/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/index.tsx
@@ -1,13 +1,13 @@
 /* eslint-disable no-empty-pattern */
 /* eslint-disable no-return-assign */
 /* eslint-disable no-param-reassign */
-import React, { useEffect } from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
 import Plotly from 'plotly.js';
+import { string } from 'prop-types';
+import React, { useEffect } from 'react';
 import createPlotlyComponent from 'react-plotly.js/factory';
 import { useSelector } from 'react-redux';
-import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
-import { string } from 'prop-types';
-import { RootState } from '../../../../redux/reducers';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 const Plot = createPlotlyComponent(Plotly);
diff --git a/litmus-portal/frontend/src/components/Sections/Community/CommunityTimeSeriesPlot/styles.ts b/litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Community/CommunityTimeSeriesPlot/styles.ts
rename to litmus-portal/frontend/src/views/Community/CommunityTimeSeriesPlot/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/CityMap.tsx b/litmus-portal/frontend/src/views/Community/GeoMap/CityMap.tsx
similarity index 97%
rename from litmus-portal/frontend/src/components/Sections/Community/GeoMap/CityMap.tsx
rename to litmus-portal/frontend/src/views/Community/GeoMap/CityMap.tsx
index 8d19ad102..25bbb9c1b 100644
--- a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/CityMap.tsx
+++ b/litmus-portal/frontend/src/views/Community/GeoMap/CityMap.tsx
@@ -7,7 +7,7 @@ import {
   Marker,
   ZoomableGroup,
 } from 'react-simple-maps';
-import { RootState } from '../../../../redux/reducers';
+import { RootState } from '../../../redux/reducers';
 import datageo from './geo.json';
 
 const geoUrl = datageo;
diff --git a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/CountryMap.tsx b/litmus-portal/frontend/src/views/Community/GeoMap/CountryMap.tsx
similarity index 94%
rename from litmus-portal/frontend/src/components/Sections/Community/GeoMap/CountryMap.tsx
rename to litmus-portal/frontend/src/views/Community/GeoMap/CountryMap.tsx
index 69a54b1f7..d3b94083a 100644
--- a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/CountryMap.tsx
+++ b/litmus-portal/frontend/src/views/Community/GeoMap/CountryMap.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Chart from 'react-google-charts';
 import { useSelector } from 'react-redux';
-import { RootState } from '../../../../redux/reducers';
+import { RootState } from '../../../redux/reducers';
 
 /* Country geo Map is used for location of users with Country and 
 respective count of users wise to present it on map */
diff --git a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/geo.json b/litmus-portal/frontend/src/views/Community/GeoMap/geo.json
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Community/GeoMap/geo.json
rename to litmus-portal/frontend/src/views/Community/GeoMap/geo.json
diff --git a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/index.tsx b/litmus-portal/frontend/src/views/Community/GeoMap/index.tsx
similarity index 88%
rename from litmus-portal/frontend/src/components/Sections/Community/GeoMap/index.tsx
rename to litmus-portal/frontend/src/views/Community/GeoMap/index.tsx
index 34b569966..188f87321 100644
--- a/litmus-portal/frontend/src/components/Sections/Community/GeoMap/index.tsx
+++ b/litmus-portal/frontend/src/views/Community/GeoMap/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import BinarySwitch from '../../../Button/BinarySwitch';
+import BinarySwitch from '../../../components/Button/BinarySwitch';
 import CityMap from './CityMap';
 import CountryMap from './CountryMap';
 
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
similarity index 92%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
index b6ffaa39d..c021a49e6 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/index.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react';
 import { Typography } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
+import React, { useEffect, useState } from 'react';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../components/Button/ButtonOutline';
+import PredifinedWorkflows from '../../../components/PredifinedWorkflows';
+import workflowsList from '../../../components/PredifinedWorkflows/data';
+import Unimodal from '../../../containers/layouts/Unimodal';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
 import useStyles, { CssTextField } from './styles';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import PredifinedWorkflows from '../../../PredifinedWorkflows';
-import workflowsList from '../../../PredifinedWorkflows/data';
-import Unimodal from '../../../../containers/layouts/Unimodal';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutline from '../../../Button/ButtonOutline';
 // import { getWkfRunCount } from "../../utils";
 
 const ChooseWorkflow: React.FC = () => {
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ChooseWorkflow/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/ResultTable.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
similarity index 98%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/ResultTable.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
index 43a842ecf..4698beda2 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/ResultTable.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
@@ -6,11 +6,11 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import React from 'react';
+import InfoTooltip from '../../../components/InfoTooltip';
+import Center from '../../../containers/layouts/Center';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import ToggleComponent from '../ToggleComponent';
 import useStyles from './styles';
-import InfoTooltip from '../../../InfoTooltip';
-import Center from '../../../../containers/layouts/Center';
 
 function createData(
   name: string,
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/index.tsx
similarity index 86%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/index.tsx
index 3acc505ec..270c70dba 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/index.tsx
@@ -1,18 +1,18 @@
 import { Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import Center from '../../../../containers/layouts/Center';
-import Unimodal from '../../../../containers/layouts/Unimodal';
-import { experimentMap, WorkflowData } from '../../../../models/redux/workflow';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutline from '../../../Button/ButtonOutline';
-import InfoTooltip from '../../../InfoTooltip';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../components/Button/ButtonOutline';
+import Center from '../../../containers/layouts/Center';
+import Unimodal from '../../../containers/layouts/Unimodal';
+import { experimentMap, WorkflowData } from '../../../models/redux/workflow';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import WeightSlider from '../WeightSlider';
 import ResultTable from './ResultTable';
 import useStyles from './styles';
+// import InfoTooltip from '../../../components/InfoTooltip';
 
 const ReliablityScore = () => {
   const classes = useStyles();
@@ -99,9 +99,9 @@ const ReliablityScore = () => {
                   </Typography>
                 </div>
               </ButtonOutline>
-              <div className={classes.toolTipDiv}>
+              {/* <div className={classes.toolTipDiv}>
                 <InfoTooltip value="Text Default" />
-              </div>
+                </div> */}
               <Unimodal
                 isOpen={open}
                 handleClose={() => setOpen(false)}
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/SetTime/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/SetTime/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/SetTime/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/SetTime/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/SetTime/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/SetTime/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/SetTime/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/SetTime/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/index.tsx
similarity index 98%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/index.tsx
index 9591965a8..0e87b2ea4 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/index.tsx
@@ -8,8 +8,8 @@ import {
   Typography,
 } from '@material-ui/core';
 import React from 'react';
-import CustomDate from '../../../DateTime/CustomDate/index';
-import CustomTime from '../../../DateTime/CustomTime/index';
+import CustomDate from '../../../components/DateTime/CustomDate/index';
+import CustomTime from '../../../components/DateTime/CustomTime/index';
 import SetTime from './SetTime/index';
 import useStyles from './styles';
 
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ScheduleWorkflow/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/ScheduleWorkflow/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ToggleComponent/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/ToggleComponent/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ToggleComponent/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/ToggleComponent/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ToggleComponent/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/ToggleComponent/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/ToggleComponent/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/ToggleComponent/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
similarity index 87%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
index 7b653b758..ad0170f72 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
@@ -3,12 +3,12 @@ import Divider from '@material-ui/core/Divider';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import YAML from 'yaml';
-import { WorkflowData } from '../../../../models/redux/workflow';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import Loader from '../../../Loader';
-import YamlEditor from '../../../YamlEditor/Editor';
+import Loader from '../../../components/Loader';
+import YamlEditor from '../../../components/YamlEditor/Editor';
+import { WorkflowData } from '../../../models/redux/workflow';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 const TuneWorkflow: React.FC = () => {
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
similarity index 90%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
index c96eec92f..d7acdc445 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/index.tsx
@@ -1,22 +1,22 @@
 import { Divider, Typography } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import Unimodal from '../../../../containers/layouts/Unimodal';
-import { experimentMap, WorkflowData } from '../../../../models/redux/workflow';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import AdjustedWeights from '../../../AdjustedWeights';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutline from '../../../Button/ButtonOutline/index';
-import CustomText from '../../../CustomText';
-import CustomDate from '../../../DateTime/CustomDate';
-import CustomTime from '../../../DateTime/CustomTime';
-import YamlEditor from '../../../YamlEditor/Editor';
+import AdjustedWeights from '../../../components/AdjustedWeights';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../components/Button/ButtonOutline/index';
+import CustomText from '../../../components/CustomText';
+import CustomDate from '../../../components/DateTime/CustomDate';
+import CustomTime from '../../../components/DateTime/CustomTime';
+import YamlEditor from '../../../components/YamlEditor/Editor';
 import {
   AceValidations,
   parseYamlValidations,
-} from '../../../YamlEditor/Validations';
+} from '../../../components/YamlEditor/Validations';
+import Unimodal from '../../../containers/layouts/Unimodal';
+import { experimentMap, WorkflowData } from '../../../models/redux/workflow';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 interface VerifyCommitProps {
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/VerifyCommit/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/WeightSlider/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/WeightSlider/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/WeightSlider/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/WeightSlider/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/WeightSlider/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/WeightSlider/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/WeightSlider/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/WeightSlider/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/WorkflowCluster/index.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/index.tsx
similarity index 92%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/WorkflowCluster/index.tsx
rename to litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/index.tsx
index 49684b39a..7da9dffcc 100644
--- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/WorkflowCluster/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/index.tsx
@@ -3,18 +3,18 @@ import {
   FormControl,
   FormControlLabel,
   RadioGroup,
-  Typography,
   Snackbar,
+  Typography,
 } from '@material-ui/core';
 import Radio from '@material-ui/core/Radio';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { GET_CLUSTER } from '../../../../graphql';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import { RootState } from '../../../../redux/reducers';
-import ButtonFilled from '../../../Button/ButtonFilled';
-import ButtonOutLine from '../../../Button/ButtonOutline';
+import ButtonFilled from '../../../components/Button/ButtonFilled';
+import ButtonOutLine from '../../../components/Button/ButtonOutline';
+import { GET_CLUSTER } from '../../../graphql';
+import useActions from '../../../redux/actions';
+import * as WorkflowActions from '../../../redux/actions/workflow';
+import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
 
 /*
diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/WorkflowCluster/styles.ts b/litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/CreateWorkflow/WorkflowCluster/styles.ts
rename to litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/PassedVsFailed/index.tsx b/litmus-portal/frontend/src/views/ReturningHome/PassedVsFailed/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/PassedVsFailed/index.tsx
rename to litmus-portal/frontend/src/views/ReturningHome/PassedVsFailed/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/PassedVsFailed/styles.ts b/litmus-portal/frontend/src/views/ReturningHome/PassedVsFailed/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/PassedVsFailed/styles.ts
rename to litmus-portal/frontend/src/views/ReturningHome/PassedVsFailed/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/ProgressBar/LinearProgressBar/index.tsx b/litmus-portal/frontend/src/views/ReturningHome/ProgressBar/LinearProgressBar/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/ProgressBar/LinearProgressBar/index.tsx
rename to litmus-portal/frontend/src/views/ReturningHome/ProgressBar/LinearProgressBar/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/ProgressBar/SemiCircularProgressBar/index.tsx b/litmus-portal/frontend/src/views/ReturningHome/ProgressBar/SemiCircularProgressBar/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/ProgressBar/SemiCircularProgressBar/index.tsx
rename to litmus-portal/frontend/src/views/ReturningHome/ProgressBar/SemiCircularProgressBar/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/ProgressBar/SemiCircularProgressBar/styles.ts b/litmus-portal/frontend/src/views/ReturningHome/ProgressBar/SemiCircularProgressBar/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/ProgressBar/SemiCircularProgressBar/styles.ts
rename to litmus-portal/frontend/src/views/ReturningHome/ProgressBar/SemiCircularProgressBar/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/TotalExperiments/index.tsx b/litmus-portal/frontend/src/views/ReturningHome/TotalExperiments/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/TotalExperiments/index.tsx
rename to litmus-portal/frontend/src/views/ReturningHome/TotalExperiments/index.tsx
diff --git a/litmus-portal/frontend/src/components/Sections/ReturningHome/TotalExperiments/styles.ts b/litmus-portal/frontend/src/views/ReturningHome/TotalExperiments/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/ReturningHome/TotalExperiments/styles.ts
rename to litmus-portal/frontend/src/views/ReturningHome/TotalExperiments/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/AccountSettings/index.tsx b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
similarity index 97%
rename from litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/AccountSettings/index.tsx
rename to litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
index 7b9985a58..30719c466 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/AccountSettings/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
@@ -1,11 +1,11 @@
 import { Button, Divider, Typography } from '@material-ui/core';
 import React, { useRef } from 'react';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
+import InputField from '../../../../components/InputField';
+import Unimodal from '../../../../containers/layouts/Unimodal';
 import {
   validateConfirmPassword,
   validateStartEmptySpacing,
-} from '../../../../../utils/validate';
-import InputField from '../../../../InputField';
+} from '../../../../utils/validate';
 import PersonalDetails from '../PersonalDetails';
 import useStyles from './styles';
 
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/AccountSettings/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/AccountSettings/styles.ts
rename to litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
similarity index 94%
rename from litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx
rename to litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
index 41a591662..02d232c7c 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
@@ -2,13 +2,13 @@ import { useQuery } from '@apollo/client';
 import { Button, Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import { GET_USER } from '../../../../../graphql';
+import Unimodal from '../../../../containers/layouts/Unimodal';
+import { GET_USER } from '../../../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../models/graphql/user';
-import { RootState } from '../../../../../redux/reducers';
+} from '../../../../models/graphql/user';
+import { RootState } from '../../../../redux/reducers';
 import UserDetails from '../../UserManagementTab/CreateUser/UserDetails';
 import useStyles from './styles';
 
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/styles.ts b/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/styles.ts
rename to litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx
similarity index 87%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx
index 2cc4f6c79..174104e13 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx
@@ -9,20 +9,20 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../../../components/Button/ButtonOutline';
 import {
   ACCEPT_INVITE,
   DECLINE_INVITE,
   GET_USER,
-} from '../../../../../../graphql';
-import { MemberInvitation } from '../../../../../../models/graphql/invite';
+} from '../../../../../graphql';
+import { MemberInvitation } from '../../../../../models/graphql/invite';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../../models/graphql/user';
-import { RootState } from '../../../../../../redux/reducers';
-import userAvatar from '../../../../../../utils/user';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
-import ButtonOutline from '../../../../../Button/ButtonOutline';
+} from '../../../../../models/graphql/user';
+import { RootState } from '../../../../../redux/reducers';
+import userAvatar from '../../../../../utils/user';
 import useStyles from './styles';
 
 interface ReceivedInvitation {
@@ -46,11 +46,7 @@ const ReceivedInvitations: React.FC = () => {
   // mutation to accept the invitation
   const [acceptInvite] = useMutation<MemberInvitation>(ACCEPT_INVITE, {
     onCompleted: () => {
-      setRows(
-        rows.filter(function (row) {
-          return row.username !== acceptDecline;
-        })
-      );
+      setRows(rows.filter((row) => row.username !== acceptDecline));
     },
     onError: () => {},
     refetchQueries: [{ query: GET_USER, variables: { username } }],
@@ -59,11 +55,7 @@ const ReceivedInvitations: React.FC = () => {
   // mutation to decline the invitation
   const [declineInvite] = useMutation<MemberInvitation>(DECLINE_INVITE, {
     onCompleted: () => {
-      setRows(
-        rows.filter(function (row) {
-          return row.username !== acceptDecline;
-        })
-      );
+      setRows(rows.filter((row) => row.username !== acceptDecline));
     },
     onError: () => {},
     refetchQueries: [{ query: GET_USER, variables: { username } }],
@@ -78,7 +70,7 @@ const ReceivedInvitations: React.FC = () => {
   useEffect(() => {
     if (data?.getUser.username === username) {
       const projectList = data?.getUser.projects;
-      let users: ReceivedInvitation[] = [];
+      const users: ReceivedInvitation[] = [];
 
       let flag = 0;
 
@@ -95,7 +87,7 @@ const ReceivedInvitations: React.FC = () => {
         if (flag === 1) {
           project.members.forEach((member) => {
             if (member.user_name !== username && member.role === 'Owner') {
-              users = users.concat(rows, {
+              users.push({
                 username: member.user_name,
                 role: member.role,
                 projectName: project.name,
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/ReceivedInvitations/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/styles.ts
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/ReceivedInvitations/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/SentInvitations/index.tsx
similarity index 88%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/SentInvitations/index.tsx
index 1e372091f..27102ce9d 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/SentInvitations/index.tsx
@@ -9,15 +9,15 @@ import {
 } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { GET_USER } from '../../../../../../graphql';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import { GET_USER } from '../../../../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
-} from '../../../../../../models/graphql/user';
-import { RootState } from '../../../../../../redux/reducers';
-import userAvatar from '../../../../../../utils/user';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
+} from '../../../../../models/graphql/user';
+import { RootState } from '../../../../../redux/reducers';
+import userAvatar from '../../../../../utils/user';
 import useStyles from './styles';
 
 const SentInvitations: React.FC = () => {
@@ -34,7 +34,7 @@ const SentInvitations: React.FC = () => {
   );
 
   let memberList: Member[];
-  let users: Member[] = [];
+  const users: Member[] = [];
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
       const projectList = data?.getUser.projects;
@@ -47,12 +47,12 @@ const SentInvitations: React.FC = () => {
 
       memberList.forEach((member) => {
         if (member.invitation === 'Pending') {
-          users = users.concat(rows, member);
+          users.push(member);
         }
         setRows(users);
       });
     }
-  }, [data]);
+  }, [data, userData.selectedProjectID]);
 
   return (
     <div>
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/SentInvitations/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/styles.ts
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/SentInvitations/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/index.tsx
similarity index 94%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/index.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/index.tsx
index cc25b429f..172f726b2 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Paper, Tab, Tabs, Typography } from '@material-ui/core';
 import React from 'react';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import ButtonOutline from '../../../../Button/ButtonOutline';
+import ButtonOutline from '../../../../components/Button/ButtonOutline';
+import Unimodal from '../../../../containers/layouts/Unimodal';
 import ReceivedInvitations from './ReceivedInvitations';
 import SentInvitations from './SentInvitations';
 import useStyles from './styles';
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/Invitation/styles.ts
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/Invitation/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/TableData.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/TableData.tsx
similarity index 95%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/TableData.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/TableData.tsx
index 6b5ee1a5b..c781cf35c 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/TableData.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/TableData.tsx
@@ -8,13 +8,14 @@ import {
   Typography,
 } from '@material-ui/core';
 import React, { useState } from 'react';
-import userAvatar from '../../../../../../utils/user';
+import { UserInvite } from '../../../../../models/graphql/invite';
+import userAvatar from '../../../../../utils/user';
 import useStyles from './styles';
 
 interface TableDataProps {
-  row: any;
+  row: UserInvite;
   labelId: string;
-  handleCheck: (event: React.MouseEvent<unknown>, name: any) => void;
+  handleCheck: (event: React.MouseEvent<unknown>, row: UserInvite) => void;
   isItemSelected: boolean;
   sendInvite: (username: string, role: string) => void;
 }
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx
similarity index 95%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx
index 4381b12d4..e937aab33 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/index.tsx
@@ -11,26 +11,22 @@ import {
 } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ALL_USERS, GET_USER, SEND_INVITE } from '../../../../../../graphql';
-import { MemberInviteNew } from '../../../../../../models/graphql/invite';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import Loader from '../../../../../components/Loader';
+import { ALL_USERS, GET_USER, SEND_INVITE } from '../../../../../graphql';
+import {
+  MemberInviteNew,
+  UserInvite,
+} from '../../../../../models/graphql/invite';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Project,
-} from '../../../../../../models/graphql/user';
-import { RootState } from '../../../../../../redux/reducers';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
-import Loader from '../../../../../Loader';
+} from '../../../../../models/graphql/user';
+import { RootState } from '../../../../../redux/reducers';
 import useStyles from './styles';
 import TableData from './TableData';
 
-interface UserInvite {
-  id: string;
-  name: string;
-  username: string;
-  email: string;
-}
-
 interface FilterOptions {
   search: string;
 }
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/styles.ts
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/Invite/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/index.tsx
similarity index 86%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/index.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/index.tsx
index 5e379482f..15143a4ae 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import ButtonFilled from '../../../../Button/ButtonFilled';
+import ButtonFilled from '../../../../components/Button/ButtonFilled';
+import Unimodal from '../../../../containers/layouts/Unimodal';
 import Invite from './Invite';
 import useStyles from './styles';
 
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/styles.ts
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/InviteNew/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx b/litmus-portal/frontend/src/views/Settings/TeammingTab/index.tsx
similarity index 98%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/index.tsx
index 93b0f464c..db41f6ef2 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/TeammingTab/index.tsx
@@ -26,14 +26,14 @@ import SearchIcon from '@material-ui/icons/Search';
 import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { GET_USER } from '../../../../graphql';
+import { GET_USER } from '../../../graphql';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
   Member,
-} from '../../../../models/graphql/user';
-import { RootState } from '../../../../redux/reducers';
-import userAvatar from '../../../../utils/user';
+} from '../../../models/graphql/user';
+import { RootState } from '../../../redux/reducers';
+import userAvatar from '../../../utils/user';
 import DelUser from '../UserManagementTab/EditUser/DelUser';
 import Invitation from './Invitation';
 import InviteNew from './InviteNew';
@@ -91,7 +91,7 @@ const TeammingTab: React.FC = () => {
 
   // logic for displaying the team members of the user
   let memberList: Member[] = [];
-  let users: Member[] = [];
+  const users: Member[] = [];
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
       const projectList = data?.getUser.projects;
@@ -107,13 +107,13 @@ const TeammingTab: React.FC = () => {
           member.invitation === 'Accepted' &&
           member.user_name !== userData.username
         ) {
-          users = users.concat(rows, member);
+          users.push(member);
         }
 
         setRows(users);
       });
     }
-  }, [data]);
+  }, [data, userData.selectedProjectID]);
 
   // for data filtering based on user role
   const filteredData =
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/styles.ts b/litmus-portal/frontend/src/views/Settings/TeammingTab/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/styles.ts
rename to litmus-portal/frontend/src/views/Settings/TeammingTab/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx
similarity index 93%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx
index d24ab19a6..879d91c85 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/index.tsx
@@ -1,10 +1,10 @@
 import { Typography } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import config from '../../../../../../config';
-import Unimodal from '../../../../../../containers/layouts/Unimodal';
-import { RootState } from '../../../../../../redux/reducers';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import config from '../../../../../config';
+import Unimodal from '../../../../../containers/layouts/Unimodal';
+import { RootState } from '../../../../../redux/reducers';
 import useStyles from './styles';
 
 // Props for NewUserModal component
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/NewUserModal/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
similarity index 94%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
index 0d5eb550b..e8773025f 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
@@ -1,11 +1,11 @@
 import { Avatar, Typography } from '@material-ui/core';
 import React from 'react';
-import userAvatar from '../../../../../../utils/user';
+import InputField from '../../../../../components/InputField';
+import userAvatar from '../../../../../utils/user';
 import {
   validateEmail,
   validateStartEmptySpacing,
-} from '../../../../../../utils/validate';
-import InputField from '../../../../../InputField';
+} from '../../../../../utils/validate';
 import useStyles from './styles';
 
 interface PersonalDetailsProps {
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/UserDetails/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/UserDetails/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx
similarity index 98%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx
index a971c1d6c..aea15a4d3 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/index.tsx
@@ -1,10 +1,10 @@
 import { Divider, IconButton, Typography } from '@material-ui/core';
 import React from 'react';
+import InputField from '../../../../components/InputField';
 import {
   validateLength,
   validateStartEmptySpacing,
-} from '../../../../../utils/validate';
-import InputField from '../../../../InputField';
+} from '../../../../utils/validate';
 import NewUserModal from './NewUserModal';
 import useStyles from './styles';
 import UserDetails from './UserDetails';
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/CreateUser/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/DelUser/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/DelUser/index.tsx
similarity index 90%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/DelUser/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/DelUser/index.tsx
index d6c9a0f59..68a7745bc 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/DelUser/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/DelUser/index.tsx
@@ -1,8 +1,8 @@
-import { IconButton, MenuItem, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import React from 'react';
-import Unimodal from '../../../../../../containers/layouts/Unimodal';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
-import ButtonOutline from '../../../../../Button/ButtonOutline';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import ButtonOutline from '../../../../../components/Button/ButtonOutline';
+import Unimodal from '../../../../../containers/layouts/Unimodal';
 import useStyles from './styles';
 // props for DelUser component
 interface DelUserProps {
@@ -19,7 +19,7 @@ const DelUser: React.FC<DelUserProps> = ({
   tableDelete,
   teammingDel,
   handleTable,
-  disabled,
+  // disabled,
 }) => {
   const classes = useStyles();
 
@@ -32,7 +32,7 @@ const DelUser: React.FC<DelUserProps> = ({
 
   return (
     <div>
-      {tableDelete ? (
+      {/* {tableDelete ? (
         <>
           <MenuItem
             value="delete"
@@ -76,7 +76,7 @@ const DelUser: React.FC<DelUserProps> = ({
             </div>
           )}
         </>
-      )}
+      )} */}
       <Unimodal isOpen={open} handleClose={handleClose} hasCloseBtn={false}>
         <div className={classes.body}>
           <img src="./icons/userDel.svg" alt="lock" />
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/DelUser/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/DelUser/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/DelUser/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/DelUser/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/ResetModal/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/index.tsx
similarity index 94%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/ResetModal/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/index.tsx
index c300e80a6..4255010be 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/ResetModal/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/index.tsx
@@ -2,11 +2,11 @@ import { Typography } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import config from '../../../../../../config';
-import { RootState } from '../../../../../../redux/reducers';
-import ButtonFilled from '../../../../../Button/ButtonFilled';
+import ButtonFilled from '../../../../../components/Button/ButtonFilled';
+import config from '../../../../../config';
+import Unimodal from '../../../../../containers/layouts/Unimodal';
+import { RootState } from '../../../../../redux/reducers';
 import useStyles from './styles';
-import Unimodal from '../../../../../../containers/layouts/Unimodal';
 
 // props for ResetModal component
 interface ResetModalProps {
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/ResetModal/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/ResetModal/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/ResetModal/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/index.tsx
similarity index 96%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/index.tsx
index 261d88f97..5f767c88e 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/index.tsx
@@ -1,7 +1,7 @@
 import { Divider, IconButton, Typography } from '@material-ui/core';
 import React from 'react';
-import { validateLength } from '../../../../../utils/validate';
-import InputField from '../../../../InputField';
+import InputField from '../../../../components/InputField';
+import { validateLength } from '../../../../utils/validate';
 import UserDetails from '../CreateUser/UserDetails';
 import DelUser from './DelUser';
 import ResetModal from './ResetModal';
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/EditUser/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/EditUser/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/UserManagement/index.tsx b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
similarity index 98%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/UserManagement/index.tsx
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
index fd37d104f..379967f82 100644
--- a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/UserManagement/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
@@ -2,8 +2,8 @@ import {
   createStyles,
   FormControl,
   IconButton,
-  InputBase,
   InputAdornment,
+  InputBase,
   Menu,
   MenuItem,
   Paper,
@@ -22,12 +22,12 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import SearchIcon from '@material-ui/icons/Search';
+import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import moment from 'moment';
-import config from '../../../../../config';
-import { RootState } from '../../../../../redux/reducers';
-import ButtonFilled from '../../../../Button/ButtonFilled';
+import ButtonFilled from '../../../../components/Button/ButtonFilled';
+import config from '../../../../config';
+import { RootState } from '../../../../redux/reducers';
 import CreateUser from '../CreateUser';
 import EditUser from '../EditUser';
 import useStyles from './styles';
diff --git a/litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/UserManagement/styles.ts b/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/Settings/UserManagementTab/UserManagement/styles.ts
rename to litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx b/litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/index.tsx
similarity index 87%
rename from litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx
rename to litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/index.tsx
index dad0c413c..7d7f65c6f 100644
--- a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx
+++ b/litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Nodes } from '../../../../models/graphql/workflowData';
-import useActions from '../../../../redux/actions';
-import * as NodeSelectionActions from '../../../../redux/actions/nodeSelection';
-import DagreGraph, { d3Link, d3Node } from '../../../DagreGraph';
+import DagreGraph, { d3Link, d3Node } from '../../../components/DagreGraph';
+import { Nodes } from '../../../models/graphql/workflowData';
+import useActions from '../../../redux/actions';
+import * as NodeSelectionActions from '../../../redux/actions/nodeSelection';
 import useStyles from './styles';
 
 interface GraphData {
diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/styles.ts b/litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/styles.ts
rename to litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/styles.ts
diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx b/litmus-portal/frontend/src/views/WorkflowDetails/WorkflowInfo/index.tsx
similarity index 96%
rename from litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx
rename to litmus-portal/frontend/src/views/WorkflowDetails/WorkflowInfo/index.tsx
index 670410d25..5acae5790 100644
--- a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx
+++ b/litmus-portal/frontend/src/views/WorkflowDetails/WorkflowInfo/index.tsx
@@ -3,9 +3,9 @@
 import { Typography } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ExecutionData } from '../../../../models/graphql/workflowData';
-import { RootState } from '../../../../redux/reducers';
-import timeDifference from '../../../../utils/datesModifier';
+import { ExecutionData } from '../../../models/graphql/workflowData';
+import { RootState } from '../../../redux/reducers';
+import timeDifference from '../../../utils/datesModifier';
 import useStyles from './styles';
 
 interface WorkflowInfoProps {
diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/styles.ts b/litmus-portal/frontend/src/views/WorkflowDetails/WorkflowInfo/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/styles.ts
rename to litmus-portal/frontend/src/views/WorkflowDetails/WorkflowInfo/styles.ts