diff --git a/api/accounts/accountUtil.ts b/api/accounts/accountUtil.ts
new file mode 100644
index 000000000..ab053d010
--- /dev/null
+++ b/api/accounts/accountUtil.ts
@@ -0,0 +1,29 @@
+import { FeeAccount } from "../interfaces/feeAccountPayload"
+import { http } from '../lib/http'
+
+export function getAccountUrl(baseUrl: string, accountName: string) {
+    return `${baseUrl}/accounts/${accountName}`
+}
+
+export function getAccount(accountNumber: string, url: string): Promise<any> {
+    return new Promise((resolve, reject) => {
+        http.get(url)
+        .then(account => {
+            resolve(account)
+        })
+        .catch(err => {
+            err && err.status && err.status === 404 ? resolve({data: getMissingFeeAccount(accountNumber), status: 404}) : reject(err)
+        })
+    })
+}
+
+export function getMissingFeeAccount(accountNumber: string): FeeAccount {
+    return {
+        account_number: accountNumber,
+        account_name: null,
+        credit_limit: null,
+        available_balance: 0,
+        status: null,
+        effective_date: new Date(),
+    }
+}
diff --git a/api/accounts/index.ts b/api/accounts/index.ts
index bd2474ce8..94a328deb 100644
--- a/api/accounts/index.ts
+++ b/api/accounts/index.ts
@@ -1,51 +1,54 @@
 import { AxiosPromise } from 'axios'
 import * as express from 'express'
+import { FeeAccount } from '../interfaces/feeAccountPayload'
 import { config } from '../lib/config'
-import { http } from '../lib/http'
+import { getAccount, getAccountUrl } from './accountUtil'
 
 async function handleAddressRoute(req, res) {
     let errReport: any
     if (!req.query.accountNames) {
         errReport = {
             apiError: 'Account is missing',
-            apiStatusCode: '400',
+            apiStatusCode: 400,
             message: 'Fee And Pay route error',
         }
-        res.status(500).send(errReport)
+        res.status(errReport.apiStatusCode).send(errReport)
     }
     const accountNames = req.query.accountNames.split(',')
-    console.log('accountNames', accountNames)
-    const accounts = new Array()
+    const accounts = new Array<FeeAccount>()
     const accountPromises = new Array<AxiosPromise<any>>()
-    accountNames.forEach((accountName: string) => accountPromises.push(getAccount(accountName)))
 
+    accountNames.forEach((accountNumber: string) => {
+        const url = getAccountUrl(config.services.feeAndPayApi, accountNumber)
+        accountPromises.push(getAccount(accountNumber, url))
+    })
+    let responseStatusCode
     try {
-        await Promise.all(accountPromises).then(allAccounts => {
-            allAccounts.forEach(account => {
-                accounts.push(account.data)
+            await Promise.all(accountPromises).then(allAccounts => {
+                allAccounts.forEach(account => {
+                    if (account.status === 404) {
+                        responseStatusCode = 404
+                    }
+                    accounts.push(account.data)
+                })
             })
-        })
         } catch (error) {
-            console.error(error)
             errReport = {
                 apiError: error && error.data && error.data.message ? error.data.message : error,
                 apiStatusCode: error && error.status ? error.status : '',
                 message: `Fee And Pay route error `,
             }
-            res.status(500).send(errReport)
+            res.status(error.status).send(errReport)
             return
         }
-    res.send(accounts)
-}
 
-function getAccount(accountName: string): AxiosPromise<any> {
-    const url = `${config.services.feeAndPayApi}/accounts/${accountName}`
-    const promise = http.get(url)
-    return promise
+    if (responseStatusCode) {
+        res.status(responseStatusCode).send(accounts)
+    } else {
+        res.send(accounts)
     }
+}
 
 export const router = express.Router({ mergeParams: true })
-
 router.get('', handleAddressRoute)
-
 export default router
diff --git a/api/editUserPermissions/index.ts b/api/editUserPermissions/index.ts
new file mode 100644
index 000000000..df85a401a
--- /dev/null
+++ b/api/editUserPermissions/index.ts
@@ -0,0 +1,44 @@
+import * as express from 'express'
+import { ErrorReport } from '../interfaces/errorReport'
+import { config } from '../lib/config'
+import { http } from '../lib/http'
+import * as log4jui from '../lib/log4jui'
+
+export const router = express.Router({ mergeParams: true })
+const logger = log4jui.getLogger('outgoing')
+
+router.put('', inviteUserRoute)
+
+async function inviteUserRoute(req, res) {
+    let errReport: ErrorReport
+    if (!req.params.userId) {
+        errReport = getErrorReport('UserId is missing', '400', 'User Permissions route error')
+        res.status(400).send(errReport)
+        return
+    }
+    const payload = req.body
+    try {
+      const response = await http.put(getEditPermissionsUrl(config.services.rdProfessionalApi, req.params.userId), payload)
+      logger.info('response::', response.data)
+      res.send(response.data)
+    } catch (error) {
+        logger.info('error', error)
+        errReport = getErrorReport(getErrorMessage(error), error.status, getErrorMessage(error))
+        res.status(error.status).send(errReport)
+    }
+}
+
+function getErrorMessage(error: any): string {
+    return error && error.data ? error.data.message : ''
+}
+function getErrorReport(apiError: string, apiStatusCode: string, message: string): ErrorReport {
+    return {
+        apiError,
+        apiStatusCode,
+        message,
+    }
+}
+function getEditPermissionsUrl(rdProfessionalApiUrl: string, userId: string): string {
+    return `${rdProfessionalApiUrl}/refdata/external/v1/organisations/users/${userId}`
+}
+export default router
diff --git a/api/interfaces/errorReport.ts b/api/interfaces/errorReport.ts
new file mode 100644
index 000000000..4f3765da7
--- /dev/null
+++ b/api/interfaces/errorReport.ts
@@ -0,0 +1,5 @@
+export interface ErrorReport {
+    apiError: string
+    apiStatusCode: string
+    message: string
+}
diff --git a/api/interfaces/feeAccountPayload.ts b/api/interfaces/feeAccountPayload.ts
new file mode 100644
index 000000000..f69772ae9
--- /dev/null
+++ b/api/interfaces/feeAccountPayload.ts
@@ -0,0 +1,8 @@
+export interface FeeAccount {
+    account_number: string
+    account_name: string
+    credit_limit: number
+    available_balance: number
+    status: string
+    effective_date: Date
+}
diff --git a/api/lib/config/environments/demo.config.ts b/api/lib/config/environments/demo.config.ts
index 2bad34abc..eab0fdd65 100644
--- a/api/lib/config/environments/demo.config.ts
+++ b/api/lib/config/environments/demo.config.ts
@@ -2,40 +2,36 @@ export default {
   services: {
     ccdDataApi: 'http://ccd-data-store-api-demo.service.core-compute-demo.internal',
     ccdDefApi: 'http://ccd-definition-store-api-demo.service.core-compute-demo.internal',
-    idamWeb: 'https://idam-web-public.aat.platform.hmcts.net',
-    idamApi: 'https://idam-api.aat.platform.hmcts.net',
-    s2s: 'http://rpe-service-auth-provider-aat.service.core-compute-aat.internal',
-    rdProfessionalApi: 'http://rd-professional-api-aat.service.core-compute-aat.internal',
-    feeAndPayApi: 'https://payment-api-demo.service.core-compute-demo.internal',
+    idamWeb: 'https://idam-web-public.demo.platform.hmcts.net',
+    idamApi: 'https://idam-api.demo.platform.hmcts.net',
+    s2s: 'http://rpe-service-auth-provider-demo.service.core-compute-demo.internal',
+    rdProfessionalApi: 'http://rd-professional-api-demo.service.core-compute-demo.internal',
+    feeAndPayApi: 'http://payment-api-demo.service.core-compute-demo.internal',
   },
   health: {
     ccdDataApi: 'http://ccd-data-store-api-demo.service.core-compute-demo.internal/health',
     ccdDefApi: 'http://ccd-definition-store-api-demo.service.core-compute-demo.internal/health',
-    idamWeb: 'https://idam-web-public.aat.platform.hmcts.net/health',
-    idamApi: 'https://idam-api.aat.platform.hmcts.net/health',
-    s2s: 'http://rpe-service-auth-provider-aat.service.core-compute-aat.internal/health',
-    rdProfessionalApi: 'http://rd-professional-api-aat.service.core-compute-aat.internal/health',
-    feeAndPayApi: 'https://payment-api-demo.service.core-compute-demo.internal/health',
+    idamWeb: 'https://idam-web-public.demo.platform.hmcts.net/health',
+    idamApi: 'https://idam-api.demo.platform.hmcts.net/health',
+    s2s: 'http://rpe-service-auth-provider-demo.service.core-compute-demo.internal/health',
+    rdProfessionalApi: 'http://rd-professional-api-demo.service.core-compute-demo.internal/health',
+    feeAndPayApi: 'http://payment-api-demo.service.core-compute-demo.internal/health',
 
   },
-    proxy: {
-        host: '172.16.0.7',
-        port: 8080,
-    },
-    protocol: 'http',
-    secureCookie: false,
-    sessionSecret: 'secretSauce',
-    logging: 'debug',
-    jurisdictions: [
-      {id: 'SSCS'},
-      {id: 'AUTOTEST1'},
-      {id: 'DIVORCE'},
-      {id: 'PROBATE'},
-      {id: 'PUBLICLAW'},
-      {id: 'bulkscan'},
-      {id: 'BULKSCAN'},
-      {id: 'IA'},
-      {id: 'EMPLOYMENT'},
-      {id: 'CMC'},
-    ],
+  useProxy: false,
+  secureCookie: false,
+  sessionSecret: 'secretSauce',
+  logging: 'debug',
+  jurisdictions: [
+    {id: 'SSCS'},
+    {id: 'AUTOTEST1'},
+    {id: 'DIVORCE'},
+    {id: 'PROBATE'},
+    {id: 'PUBLICLAW'},
+    {id: 'bulkscan'},
+    {id: 'BULKSCAN'},
+    {id: 'IA'},
+    {id: 'EMPLOYMENT'},
+    {id: 'CMC'}
+      ],
 }
diff --git a/api/payments/index.ts b/api/payments/index.ts
index d307ec7d9..38412cf24 100644
--- a/api/payments/index.ts
+++ b/api/payments/index.ts
@@ -10,7 +10,7 @@ async function handleAddressRoute(req, res) {
             apiStatusCode: '400',
             message: 'Fee And Pay route error',
         }
-        res.status(500).send(errReport)
+        res.status(errReport.apiStatusCode).send(errReport)
     }
     try {
         const response = await http.get(
@@ -23,7 +23,7 @@ async function handleAddressRoute(req, res) {
             apiStatusCode: error.status,
             message: 'Fee And Pay route error',
         }
-        res.status(500).send(errReport)
+        res.status(errReport.apiStatusCode).send(errReport)
     }
 }
 
diff --git a/api/routes.ts b/api/routes.ts
index 0f9696bce..24ab138bd 100644
--- a/api/routes.ts
+++ b/api/routes.ts
@@ -1,11 +1,13 @@
 import * as express from 'express'
 import accountsRouter from './accounts'
 import * as auth from './auth'
+import editUserPermissions from './editUserPermissions'
 import healthCheck from './healthCheck'
 import inviteUser from './inviteUser'
 import getJurisdictions from './jurisdictions'
 import organisationRouter from './organisation'
 import payments from './payments'
+import suspendUser from './suspendUser'
 import userDetailsRouter from './user'
 import getUserList from './userList'
 
@@ -21,5 +23,7 @@ router.use('/userList', getUserList)
 router.use('/userDetails', getUserList)
 router.use('/jurisdictions', getJurisdictions)
 router.use('/payments/:account', payments)
+router.use('/user/:userId/suspend', suspendUser)
 
+router.use('/editUserPermissions/users/:userId', editUserPermissions)
 export default router
diff --git a/api/suspendUser/index.ts b/api/suspendUser/index.ts
new file mode 100644
index 000000000..1f448780d
--- /dev/null
+++ b/api/suspendUser/index.ts
@@ -0,0 +1,27 @@
+import * as express from 'express'
+import { config } from '../lib/config'
+import { http } from '../lib/http'
+import * as log4jui from '../lib/log4jui'
+
+export const router = express.Router({ mergeParams: true })
+const logger = log4jui.getLogger('outgoing')
+
+router.put('/', suspendUser)
+
+async function suspendUser(req, res) {
+    const payload = req.body
+    try {
+        const response = await http.put(`${config.services.rdProfessionalApi}/refdata/external/v1/organisations/users/${req.params.userId}`, payload)
+        logger.info('response::', response.data)
+        res.send(response.data)
+    } catch (error) {
+        logger.info('error', error)
+        const errReport = {
+            apiError: error.data.message,
+            apiStatusCode: error.status,
+            message: error.data.message,
+        }
+        res.status(error.status).send(errReport)
+    }
+}
+export default router
diff --git a/package.json b/package.json
index 21e9ff0c9..4367c3865 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "start:node": "cd api && yarn watch",
     "start:node:docker": "PUI_ENV=ldocker;cd api && yarn watch",
     "test:node": "cd api && yarn test",
-    "test:smoke": "sh whitelist.sh && ts-node ./test/integration/tests/test.ts",
+    "test:smoke": "sh whitelist.sh",
     "test:smoke:functional": "sh whitelist.sh && webdriver-manager update --versions.chrome 2.40 && protractor ./test/e2e/config/smoke.conf.js --local",
     "test:functional": "webdriver-manager update --versions.chrome 2.40 && protractor ./test/e2e/config/functional.conf.js",
     "test:functional:local": "webdriver-manager update --versions.chrome 2.40 && protractor ./test/e2e/config/functional.conf.js --local",
diff --git a/projects/gov-ui/src/lib/components/gov-uk-checkbox/gov-uk-checkbox.component.ts b/projects/gov-ui/src/lib/components/gov-uk-checkbox/gov-uk-checkbox.component.ts
index 59cb024a2..20f3093c8 100644
--- a/projects/gov-ui/src/lib/components/gov-uk-checkbox/gov-uk-checkbox.component.ts
+++ b/projects/gov-ui/src/lib/components/gov-uk-checkbox/gov-uk-checkbox.component.ts
@@ -10,7 +10,7 @@ import {FormGroup} from '@angular/forms';
   template: `
       <div class="govuk-checkboxes__item" [formGroup]="group">
         <input class="govuk-checkboxes__input" type="checkbox" [attr.aria-describedby]="config.hint ? config.value+'-item-hint' : null"
-        [id]="config.id" [name]="config.name" [formControlName]="config.value">
+        [id]="config.id" [name]="config.name" [formControlName]="config.value" [checked]="isChecked">
         <lib-gov-label appRemoveHost [config]="config"></lib-gov-label>
         <span [id]="config.value+'-item-hint'" class="govuk-hint govuk-checkboxes__hint">
           {{config.hint}}
@@ -22,6 +22,7 @@ export class GovUkCheckboxComponent implements OnInit {
   constructor() { }
   @Input() group: FormGroup;
   @Input() config: {value: string, label: string, hint: string; name: string; focusOn: string; id: string; classes: string};
+  @Input() isChecked: boolean = false;
 
   id: string;
 /**
diff --git a/src/app/app.constants.ts b/src/app/app.constants.ts
index 8b55c0d8b..be88ccc14 100644
--- a/src/app/app.constants.ts
+++ b/src/app/app.constants.ts
@@ -76,7 +76,8 @@ const userRoles = [
 
     { role: 'pui-organisation-manager', roleType: 'manageOrganisations'},
     { role: 'pui-user-manager', roleType: 'manageUsers' },
-    { role: 'pui-case-manager', roleType: 'manageCases'}
+    { role: 'pui-case-manager', roleType: 'manageCases'},
+    { role: 'pui-finance-manager', roleType: 'managePayments'}
 ];
 
 const jurisdictions = [
diff --git a/src/fee-accounts/components/notifications/fee-account-error-notification.component.html b/src/fee-accounts/components/notifications/fee-account-error-notification.component.html
new file mode 100644
index 000000000..03c20ff36
--- /dev/null
+++ b/src/fee-accounts/components/notifications/fee-account-error-notification.component.html
@@ -0,0 +1,16 @@
+<ng-container *ngIf="errorMessages.length > 0">
+  <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
+      <h2 class="govuk-error-summary__title" id="error-summary-title">
+        There is a problem
+      </h2>
+      <div class="govuk-error-summary__body">
+        <ul class="govuk-list govuk-error-summary__list">
+          <ng-container *ngFor="let errorMessage of errorMessages">
+              <li>
+                <a href="#fee-error">{{ errorMessage }}</a>
+              </li>
+          </ng-container>
+        </ul>
+      </div>
+  </div>
+</ng-container>
\ No newline at end of file
diff --git a/src/fee-accounts/components/notifications/fee-account-error-notification.component.ts b/src/fee-accounts/components/notifications/fee-account-error-notification.component.ts
new file mode 100644
index 000000000..e337cbfe6
--- /dev/null
+++ b/src/fee-accounts/components/notifications/fee-account-error-notification.component.ts
@@ -0,0 +1,14 @@
+import {Component, OnInit, Input} from '@angular/core';
+@Component({
+  selector: 'app-fee-account-notification-banner',
+  templateUrl: './fee-account-error-notification.component.html',
+})
+
+export class FeeAccountErrorNotificationComponent implements OnInit {
+  constructor() {}
+@Input() public errorMessages: string[];
+  public ngOnInit(): void {
+
+  }
+
+}
diff --git a/src/fee-accounts/components/transactions/transactions.component.html b/src/fee-accounts/components/transactions/transactions.component.html
index f450909da..667714d11 100644
--- a/src/fee-accounts/components/transactions/transactions.component.html
+++ b/src/fee-accounts/components/transactions/transactions.component.html
@@ -1 +1,8 @@
-<app-govuk-table [columnConfig]="columnConfig" [rows]="tableRows" [firstCellIsHeader]="false" [caption]="''"></app-govuk-table>
+<ng-container *ngIf="transactions.length > 0; else noRows">
+    <app-govuk-table
+    [columnConfig]="columnConfig" [rows]="transactions" [firstCellIsHeader]="false" [caption]="''"
+    ></app-govuk-table>
+</ng-container>
+<ng-template #noRows>
+    <p>No transactions found.</p>
+</ng-template>
\ No newline at end of file
diff --git a/src/fee-accounts/components/transactions/transactions.component.spec.ts b/src/fee-accounts/components/transactions/transactions.component.spec.ts
index 07442f0f5..eeb016fb7 100644
--- a/src/fee-accounts/components/transactions/transactions.component.spec.ts
+++ b/src/fee-accounts/components/transactions/transactions.component.spec.ts
@@ -28,10 +28,4 @@ describe('TransactionsComponent', () => {
         expect(component).toBeTruthy();
     });
 
-    it('should fill tableRows', () => {
-        component.transactions = [{dummy: 'something'}];
-        component.ngOnChanges();
-        expect(component.tableRows).toBeTruthy([{dummy: 'something'}]);
-    });
-
 });
diff --git a/src/fee-accounts/components/transactions/transactions.component.ts b/src/fee-accounts/components/transactions/transactions.component.ts
index 7f384e19b..229bd412f 100644
--- a/src/fee-accounts/components/transactions/transactions.component.ts
+++ b/src/fee-accounts/components/transactions/transactions.component.ts
@@ -1,6 +1,6 @@
 import {Component, OnChanges, Input} from '@angular/core';
 import { GovukTableColumnConfig } from 'projects/gov-ui/src/lib/components/govuk-table/govuk-table.component';
-
+import { Payment } from '../../models/pba-transactions';
 /**
  * Bootstraps the Transactions Components
  */
@@ -11,25 +11,22 @@ import { GovukTableColumnConfig } from 'projects/gov-ui/src/lib/components/govuk
 })
 export class TransactionsComponent implements OnChanges {
 
-  @Input() transactions;
+  @Input() public transactions = Array<Payment>();
 
-  columnConfig: GovukTableColumnConfig[];
-  tableRows: {}[];
+  public columnConfig: GovukTableColumnConfig[];
 
   constructor() {}
 
-  ngOnChanges(): void {
+  public ngOnChanges(): void {
     this.columnConfig = [
-      { header: 'Payment reference', key: 'paymentReference' },
-      { header: 'Case', key: 'case' },
-      { header: 'Reference', key: 'reference' },
-      { header: 'Submitted by', key: 'submittedBy' },
+      { header: 'Payment reference', key: 'payment_reference' },
+      { header: 'Case', key: 'ccd_case_number' },
+      { header: 'Your reference', key: 'payment_reference' },
       { header: 'Status', key: 'status' },
-      { header: 'Date created', key: 'dateCreated' },
+      { header: 'Date created', key: 'date_created', type: 'date' },
+      { header: 'Last updated', key: 'date_updated', type: 'date' },
       { header: 'Amount', key: 'amount' }
     ];
-
-    this.tableRows = this.transactions;
   }
 
 }
diff --git a/src/fee-accounts/containers/account-missing/account-missing.component.html b/src/fee-accounts/containers/account-missing/account-missing.component.html
new file mode 100644
index 000000000..b91e42976
--- /dev/null
+++ b/src/fee-accounts/containers/account-missing/account-missing.component.html
@@ -0,0 +1,9 @@
+<div class="govuk-warning-text">
+    <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+    <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive"></span>
+    You won’t be able to view your transactions until you’ve added one or more payment by account (PBA) numbers.
+    </strong>
+</div>
+<h2 class="govuk-heading-m" id="where-you-can-use-fee-account">Adding a PBA number</h2>
+<p class="govuk-body">Contact your service representative to add a PBA number.</p>
\ No newline at end of file
diff --git a/src/fee-accounts/containers/account-missing/account-missing.component.ts b/src/fee-accounts/containers/account-missing/account-missing.component.ts
new file mode 100644
index 000000000..c11d22f09
--- /dev/null
+++ b/src/fee-accounts/containers/account-missing/account-missing.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-organisation-account-missing',
+    templateUrl: './account-missing.component.html'
+})
+
+export class OrganisationAccountMissingComponent {
+}
diff --git a/src/fee-accounts/containers/account-summary/account-summary.component.ts b/src/fee-accounts/containers/account-summary/account-summary.component.ts
index defceadef..c6f71d96f 100644
--- a/src/fee-accounts/containers/account-summary/account-summary.component.ts
+++ b/src/fee-accounts/containers/account-summary/account-summary.component.ts
@@ -21,7 +21,7 @@ export class AccountSummaryComponent implements OnInit, OnDestroy {
   navItems = [
     {
       text: 'Summary',
-      href: `/`,
+      href: `./`,
       active: true
     },
     {
diff --git a/src/fee-accounts/containers/index.ts b/src/fee-accounts/containers/index.ts
index 91413ac4d..d4bb42ed7 100644
--- a/src/fee-accounts/containers/index.ts
+++ b/src/fee-accounts/containers/index.ts
@@ -1,13 +1,22 @@
 import { OrganisationAccountsComponent } from './overview/account-overview.component';
 import { TransactionsComponent } from '../components/transactions/transactions.component';
 import { SummaryComponent } from '../components/summary/summary.component';
+import { OrganisationAccountsOverviewContainerComponent } from './overview-container/account-overview-container.component';
+import { OrganisationAccountMissingComponent } from './account-missing/account-missing.component';
+import { FeeAccountErrorNotificationComponent } from '../components/notifications/fee-account-error-notification.component';
 
 export const containers: any[] = [
   OrganisationAccountsComponent,
+  OrganisationAccountsOverviewContainerComponent,
+  OrganisationAccountMissingComponent,
   TransactionsComponent,
-  SummaryComponent
+  SummaryComponent,
+  FeeAccountErrorNotificationComponent
 ];
 
 export * from './overview/account-overview.component';
+export * from './account-missing/account-missing.component';
+export * from './overview-container/account-overview-container.component';
 export * from '../components/transactions/transactions.component';
 export * from '../components/summary/summary.component';
+export * from '../components/notifications/fee-account-error-notification.component';
diff --git a/src/fee-accounts/containers/overview-container/account-overview-container.component.html b/src/fee-accounts/containers/overview-container/account-overview-container.component.html
new file mode 100644
index 000000000..546c18082
--- /dev/null
+++ b/src/fee-accounts/containers/overview-container/account-overview-container.component.html
@@ -0,0 +1,42 @@
+<ng-container *ngIf="isAccountAvailableForOrg; else newDeb">
+    <div [ngClass]="{'govuk-form-group govuk-form-group--error' : oneOrMoreAccountInfoMissing}">
+        <span *ngIf="oneOrMoreAccountInfoMissing" id="fee-error" class="govuk-error-message">
+            <span class="govuk-visually-hidden">Error:</span> PBA number not found
+        </span>
+        <table class="{{'govuk-table ' + classes}}" role="presentation">
+            <caption class="govuk-table__caption">{{caption}}</caption>
+            <thead class="govuk-table__head" >
+            <tr class="govuk-table__row">
+                <th class="govuk-table__header" scope="col" *ngFor="let h of columnConfig">{{h.header}}</th>
+            </tr>
+            </thead>
+            <tbody class="govuk-table__body">
+            <tr data-selector="table-row" class="govuk-table__row" *ngFor="let r of rows">
+                <ng-container *ngFor="let col of columnConfig; first as isFirst">
+                    <th data-selector="table-header" class="govuk-table__header" scope="row"  *ngIf="isFirst && firstCellIsHeader">
+                        <ng-container *ngIf="!col.type || col.type === 'text' || !r.routerLink">{{r[col.key]}}</ng-container>
+                        <ng-container *ngIf="col.type === 'link' && r.routerLink">
+                            <a class="govuk-link" [routerLink]="r.routerLink">{{r[col.key]}}</a>
+                        </ng-container>
+                    </th>
+                    <td data-selector="table-cell" class="govuk-table__cell"  *ngIf="!(isFirst && firstCellIsHeader)">
+                        <ng-container *ngIf="col.type === 'date'">{{formatDate(r[col.key])}}</ng-container>
+                        <ng-container *ngIf="(oneOrMoreAccountInfoMissing && r.isAccountInfoMissing) else showAsLink;">
+                            <font color="#b10e1e" class="govuk-!-font-weight-bold">{{r[col.key]}}</font>
+                        </ng-container>
+                        <ng-template #showAsLink>
+                            <ng-container *ngIf="!col.type || col.type === 'text' || !r.routerLink">{{r[col.key]}}</ng-container>
+                            <ng-container *ngIf="col.type === 'link' && r.routerLink">
+                                <a class="govuk-link" [routerLink]="r.routerLink">{{r[col.key]}}</a>
+                            </ng-container>
+                        </ng-template>
+                    </td>
+                </ng-container>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</ng-container>
+<ng-template #newDeb>
+    <app-organisation-account-missing></app-organisation-account-missing>
+</ng-template>
\ No newline at end of file
diff --git a/src/fee-accounts/containers/overview-container/account-overview-container.component.ts b/src/fee-accounts/containers/overview-container/account-overview-container.component.ts
new file mode 100644
index 000000000..53a520633
--- /dev/null
+++ b/src/fee-accounts/containers/overview-container/account-overview-container.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { GovukTableColumnConfig } from 'projects/gov-ui/src/lib/components/govuk-table/govuk-table.component';
+
+@Component({
+    selector: 'app-account-overview-container',
+    templateUrl: './account-overview-container.component.html'
+})
+
+export class OrganisationAccountsOverviewContainerComponent {
+
+    @Input() classes = '';
+
+    @Input() caption = 'Dates and amounts';
+    @Input() firstCellIsHeader = true;
+
+    @Input() rows;
+
+    @Input() columnConfig: any;
+    @Input() isAccountAvailableForOrg = true;
+    @Input() oneOrMoreAccountInfoMissing = false;
+
+    constructor() {
+    }
+}
diff --git a/src/fee-accounts/containers/overview/account-overview.component.html b/src/fee-accounts/containers/overview/account-overview.component.html
index 46b03da4a..a1b2f6c58 100644
--- a/src/fee-accounts/containers/overview/account-overview.component.html
+++ b/src/fee-accounts/containers/overview/account-overview.component.html
@@ -1,8 +1,14 @@
+<ng-container *ngIf="errorMessages$ | async as errorMessages">
+  <app-fee-account-notification-banner [errorMessages]="errorMessages">
+  </app-fee-account-notification-banner>
+</ng-container>
 <app-hmcts-main-wrapper [title]="'Fee accounts'">
-  <app-govuk-table
-    *ngIf="!(loading$ | async) else loading"
-    [columnConfig]="columnConfig" [rows]="accounts$ | async" [firstCellIsHeader]="false" [caption]="''"
-  ></app-govuk-table>
+  <app-account-overview-container
+  *ngIf="!(loading$ | async) else loading"
+  [isAccountAvailableForOrg]="isOrgAccountAvailable$ | async"
+  [oneOrMoreAccountInfoMissing]="oneOrMoreAccountMissing$ | async"
+  [columnConfig]="columnConfig" [rows]="accounts$ | async" [firstCellIsHeader]="false" [caption]="''"
+></app-account-overview-container>
   <ng-template #loading>
     <div>Loading...</div>
   </ng-template>
diff --git a/src/fee-accounts/containers/overview/account-overview.component.spec.ts b/src/fee-accounts/containers/overview/account-overview.component.spec.ts
index 4ebbc2a20..e8fb4c4ab 100644
--- a/src/fee-accounts/containers/overview/account-overview.component.spec.ts
+++ b/src/fee-accounts/containers/overview/account-overview.component.spec.ts
@@ -1,48 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { OrganisationAccountsComponent } from './account-overview.component';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { StoreModule } from '@ngrx/store';
-import { reducers } from 'src/fee-accounts/store/reducers';
-import { of } from 'rxjs';
-import { APP_BASE_HREF } from '@angular/common';
-import { ActivatedRoute } from '@angular/router';
 
 describe('OrganisationAccountsComponent', () => {
     let component: OrganisationAccountsComponent;
-    let fixture: ComponentFixture<OrganisationAccountsComponent>;
+    const feeStore = jasmine.createSpyObj('feeStore', ['pipe']);
+    const organisationStore = jasmine.createSpyObj('feeStore', ['pipe']);
+    const actions = jasmine.createSpyObj('feeStore', ['pipe']);
+    const routerStore = jasmine.createSpyObj('feeStore', ['pipe']);
 
-    let activatedRoute: any;
-
-    beforeEach(async(() => {
-        activatedRoute = {
-            parent: {
-                params: of({})
-            }
-        };
-        TestBed.configureTestingModule({
-            declarations: [OrganisationAccountsComponent],
-            imports: [
-                StoreModule.forRoot({}),
-                StoreModule.forFeature('feeAccounts', reducers),
-                StoreModule.forFeature('org', reducers),
-            ],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA],
-            providers: [
-                { provide: APP_BASE_HREF, useValue: '/' },
-                { provide: ActivatedRoute, useValue: activatedRoute },
-            ]
-        })
-        .compileComponents();
-    }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(OrganisationAccountsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    afterEach(() => {
-        TestBed.resetTestingModule();
+        component = new OrganisationAccountsComponent(feeStore, organisationStore, actions, routerStore);
     });
 
     it('should create', () => {
diff --git a/src/fee-accounts/containers/overview/account-overview.component.ts b/src/fee-accounts/containers/overview/account-overview.component.ts
index 5e27f9bca..750981d23 100644
--- a/src/fee-accounts/containers/overview/account-overview.component.ts
+++ b/src/fee-accounts/containers/overview/account-overview.component.ts
@@ -1,11 +1,13 @@
 import {Component, OnInit, OnDestroy} from '@angular/core';
-import { Store, select } from '@ngrx/store';
+import { Store, select, Action } from '@ngrx/store';
 import * as fromAccountStore from '../../../fee-accounts/store';
 import { GovukTableColumnConfig } from 'projects/gov-ui/src/lib/components/govuk-table/govuk-table.component';
-import {Observable, Subscription, combineLatest} from 'rxjs';
+import {Observable, Subscription, combineLatest, of} from 'rxjs';
 import {FeeAccount} from '../../models/pba-accounts';
 import * as fromOrgStore from '../../../organisation/store/index';
 import { Organisation } from 'src/organisation/organisation.model';
+import { Actions, ofType } from '@ngrx/effects';
+import * as fromRoot from '../../../app/store';
 @Component({
   selector: 'app-prd-fee-accounts-component',
   templateUrl: './account-overview.component.html',
@@ -18,12 +20,18 @@ export class OrganisationAccountsComponent implements OnInit, OnDestroy {
   loading$: Observable<boolean>;
   orgData: Organisation;
   org$: Observable<Organisation>;
+  isOrgAccountAvailable$: Observable<boolean>;
   organisationSubscription: Subscription;
   dependanciesSubscription: Subscription;
+  oneOrMoreAccountMissing$: Observable<boolean>;
+  errorMessages$: Observable<Array<string>>;
   constructor(private feeStore: Store<fromAccountStore.FeeAccountsState>,
-              private organisationStore: Store<fromOrgStore.OrganisationState>) {}
+              private organisationStore: Store<fromOrgStore.OrganisationState>,
+              private actions$: Actions,
+              private routerStore: Store<fromRoot.State>) {}
 
   ngOnInit(): void {
+    this.errorMessages$ = this.feeStore.pipe(select(fromAccountStore.getErrorMessages));
     const isOrgLoaded$ = this.organisationStore.pipe(select(fromOrgStore.getOrganisationLoaded));
     if (isOrgLoaded$) {
       this.dependanciesSubscription = isOrgLoaded$.subscribe((org) => {
@@ -36,7 +44,9 @@ export class OrganisationAccountsComponent implements OnInit, OnDestroy {
     if (this.org$) {
       this.organisationSubscription = this.org$.subscribe(( data) => {
         this.orgData = data;
-        this.feeStore.dispatch(new fromAccountStore.LoadFeeAccounts(data.paymentAccount));
+        const anyAccountForOrg = this.dispatchLoadFeeAccount(data);
+        this.isOrgAccountAvailable$ = of(anyAccountForOrg);
+        this.oneOrMoreAccountMissing$ = this.feeStore.pipe(select(fromAccountStore.isOneOrMorefeeAccountsMissing));
       });
     }
     this.accounts$ = this.feeStore.pipe(select(fromAccountStore.feeAccounts));
@@ -45,7 +55,21 @@ export class OrganisationAccountsComponent implements OnInit, OnDestroy {
       { header: 'Account number', key: 'account_number', type: 'link' },
       { header: 'Account name', key: 'account_name' }
     ];
+    this.actions$.pipe(ofType(fromAccountStore.LOAD_FEE_ACCOUNTS_FAIL)).subscribe(() => {
+      this.routerStore.dispatch(new fromRoot.Go({ path: ['service-down'] }));
+    });
   }
+  dispatchLoadFeeAccount(organisation: Organisation): boolean {
+    const anyAccountForOrg = organisation.paymentAccount.length > 0;
+    anyAccountForOrg ? this.dispatchAction(this.feeStore, new fromAccountStore.LoadFeeAccounts(organisation.paymentAccount)) :
+      this.dispatchAction(this.feeStore, new fromAccountStore.LoadFeeAccountsSuccess([]));
+    return anyAccountForOrg;
+  }
+
+  dispatchAction(feeStore: Store<fromAccountStore.FeeAccountsState>, action: Action) {
+    feeStore.dispatch(action);
+  }
+
   ngOnDestroy(): void {
     if (this.organisationSubscription) {
       this.organisationSubscription.unsubscribe();
@@ -53,5 +77,6 @@ export class OrganisationAccountsComponent implements OnInit, OnDestroy {
     if (this.dependanciesSubscription) {
       this.dependanciesSubscription.unsubscribe();
     }
+    this.dispatchAction(this.feeStore, new fromAccountStore.LoadFeeAccountResetState());
   }
 }
diff --git a/src/fee-accounts/guards/accounts.guard.ts b/src/fee-accounts/guards/accounts.guard.ts
index 6e56d73a6..30899e175 100644
--- a/src/fee-accounts/guards/accounts.guard.ts
+++ b/src/fee-accounts/guards/accounts.guard.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { CanActivate } from '@angular/router';
 import { take, filter, tap, catchError, switchMap } from 'rxjs/operators';
-import { Observable, of } from 'rxjs';
+import { Observable, of, observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import * as fromStore from '../../organisation/store';
 
diff --git a/src/fee-accounts/models/pba-accounts.ts b/src/fee-accounts/models/pba-accounts.ts
index 748724bd5..8fba77ea7 100644
--- a/src/fee-accounts/models/pba-accounts.ts
+++ b/src/fee-accounts/models/pba-accounts.ts
@@ -18,4 +18,5 @@ effective_date: Date;
 
 export interface FeeAccountSummary extends FeeAccount {
   routerLink: string;
+  isAccountInfoMissing: boolean;
 }
diff --git a/src/fee-accounts/store/actions/fee-accounts.actions.ts b/src/fee-accounts/store/actions/fee-accounts.actions.ts
index d3ac57841..dd67ccd0e 100644
--- a/src/fee-accounts/store/actions/fee-accounts.actions.ts
+++ b/src/fee-accounts/store/actions/fee-accounts.actions.ts
@@ -3,6 +3,8 @@ import {Action} from '@ngrx/store';
 export const LOAD_FEE_ACCOUNTS = '[Fee Accounts] Load Fee Accounts';
 export const LOAD_FEE_ACCOUNTS_SUCCESS = '[Fee Accounts] Load Fee Accounts Success';
 export const LOAD_FEE_ACCOUNTS_FAIL = '[Fee Accounts] Load Fee Accounts Fail';
+export const LOAD_FEE_ONE_OR_MORE_ACCOUNTS_FAIL = '[Fee Accounts] Load Fee One or more Accounts Fail';
+export const LOAD_FEE_RESET_STATE = '[Fee Accounts] Reset State';
 
 export class LoadFeeAccounts {
   constructor(public paymentAccounts: string[]) {
@@ -20,8 +22,19 @@ export class LoadFeeAccountsFail implements Action {
   constructor(public payload: any) {}
 }
 
+export class LoadFeeOneOrMoreAccountsFail implements Action {
+  readonly type = LOAD_FEE_ONE_OR_MORE_ACCOUNTS_FAIL;
+  constructor(public payload: any) {}
+}
+
+export class LoadFeeAccountResetState implements Action {
+  readonly type = LOAD_FEE_RESET_STATE;
+}
+
 export type FeeAccountsActions =
   | LoadFeeAccounts
   | LoadFeeAccountsSuccess
-  | LoadFeeAccountsFail;
+  | LoadFeeAccountsFail
+  | LoadFeeOneOrMoreAccountsFail
+  | LoadFeeAccountResetState;
 
diff --git a/src/fee-accounts/store/effects/fee-accounts.effects.ts b/src/fee-accounts/store/effects/fee-accounts.effects.ts
index 8455435d0..204cef6b4 100644
--- a/src/fee-accounts/store/effects/fee-accounts.effects.ts
+++ b/src/fee-accounts/store/effects/fee-accounts.effects.ts
@@ -23,9 +23,10 @@ export class FeeAccountsEffects {
     switchMap((payload: any) => {
       return this.feeAccountsService.fetchFeeAccounts(payload.paymentAccounts).pipe(
         map(feeAccountsDetails => new feeAccountsActions.LoadFeeAccountsSuccess(feeAccountsDetails)),
-        catchError(error => {
-          this.loggerService.error(error.message);
-          return of(new feeAccountsActions.LoadFeeAccountsFail(error));
+        catchError(errorResponse => {
+          this.loggerService.error(errorResponse);
+          return errorResponse.status === 404 ? of(new feeAccountsActions.LoadFeeOneOrMoreAccountsFail(errorResponse.error)) :
+          of(new feeAccountsActions.LoadFeeAccountsFail(errorResponse));
         })
       );
     })
diff --git a/src/fee-accounts/store/reducers/fee-accounts.reducer.spec.ts b/src/fee-accounts/store/reducers/fee-accounts.reducer.spec.ts
index 26cf7fcdf..1d5dbed9d 100644
--- a/src/fee-accounts/store/reducers/fee-accounts.reducer.spec.ts
+++ b/src/fee-accounts/store/reducers/fee-accounts.reducer.spec.ts
@@ -31,7 +31,8 @@ describe('FeeAccountsReducer', () => {
         available_balance: null,
         status: null,
         effective_date: null,
-        routerLink: `/fee-accounts/account/123/`
+        routerLink: `/fee-accounts/account/123/`,
+        isAccountInfoMissing: false
       };
       expect(state.feeAccounts).toEqual([expected]);
     });
diff --git a/src/fee-accounts/store/reducers/fee-accounts.reducer.ts b/src/fee-accounts/store/reducers/fee-accounts.reducer.ts
index 669c7e3ed..656984c9a 100644
--- a/src/fee-accounts/store/reducers/fee-accounts.reducer.ts
+++ b/src/fee-accounts/store/reducers/fee-accounts.reducer.ts
@@ -1,16 +1,20 @@
 import * as fromFeeAccountActions from '../actions/fee-accounts.actions';
-import {PbaAccounts, PbaAccountsSummary, FeeAccount, FeeAccountSummary} from '../../models/pba-accounts';
+import {FeeAccount, FeeAccountSummary} from '../../models/pba-accounts';
 
 export interface FeeAccountsState {
   feeAccounts: Array<FeeAccount> | null;
+  oneOrMoreAccountMissing: boolean;
   loaded: boolean;
   loading: boolean;
+  errorMessages: string[];
 }
 
 export const initialState: FeeAccountsState = {
   feeAccounts: null,
+  oneOrMoreAccountMissing: false,
   loaded: false,
   loading: false,
+  errorMessages: null
 };
 
 export function reducer(
@@ -33,7 +37,8 @@ export function reducer(
         feeAccounts = payload.map((entity: FeeAccount) => {
             const element: FeeAccountSummary = {
               ...entity,
-              routerLink: `/fee-accounts/account/${entity.account_number}/`
+              routerLink: `/fee-accounts/account/${entity.account_number}/`,
+              isAccountInfoMissing: false
             };
             return element;
           });
@@ -42,12 +47,51 @@ export function reducer(
       return {
         ...state,
           feeAccounts,
+          oneOrMoreAccountMissing: false,
           loaded: true,
-          loading: false
+          loading: false,
+          errorMessages: []
       };
+      }
+      case fromFeeAccountActions.LOAD_FEE_ONE_OR_MORE_ACCOUNTS_FAIL: {
+        const payload = action.payload;
+        let feeAccounts = payload;
+        let errorMessages = new Array<string>();
+        if (feeAccounts.length !== 0) {
+          feeAccounts = payload.map((entity: FeeAccount) => {
+              const element: FeeAccountSummary = {
+                ...entity,
+                routerLink: entity.account_name ? `/fee-accounts/account/${entity.account_number}/` : '',
+                isAccountInfoMissing: entity.account_name === null || entity.account_name === undefined || entity.account_name === ''
+              };
+              if (element.isAccountInfoMissing) {
+                // errorMessages.push(`Account number ${entity.account_number} not found. Contact your service representative for help`);
+                errorMessages = [...errorMessages,
+                  `Account number ${entity.account_number} not found. Contact your service representative for help`];
+              }
+              return element;
+            });
+        }
+        return {
+          ...state,
+            feeAccounts,
+            oneOrMoreAccountMissing: true,
+            loaded: true,
+            loading: false,
+            errorMessages
+        };
     }
 
+    case fromFeeAccountActions.LOAD_FEE_RESET_STATE: {
+      const errorMessages = [];
+      return {
+        ...state,
+        loaded: false,
+        loading: false,
+        errorMessages
+      };
   }
+}
 
   return state;
 }
@@ -55,3 +99,5 @@ export function reducer(
 export const getFeeAccounts = (state: FeeAccountsState) => state.feeAccounts;
 export const getFeeAccountsLoading = (state: FeeAccountsState) => state.loading;
 export const getFeeAccountsLoaded = (state: FeeAccountsState) => state.loaded;
+export const getOneOrMoreAccountMissingLoaded = (state: FeeAccountsState) => state.oneOrMoreAccountMissing;
+export const getFeeAccountErrorMessages = (state: FeeAccountsState) => state.errorMessages;
diff --git a/src/fee-accounts/store/selectors/fee-accounts.selectors.spec.ts b/src/fee-accounts/store/selectors/fee-accounts.selectors.spec.ts
index 25b4dd35e..2ad5f6663 100644
--- a/src/fee-accounts/store/selectors/fee-accounts.selectors.spec.ts
+++ b/src/fee-accounts/store/selectors/fee-accounts.selectors.spec.ts
@@ -25,7 +25,7 @@ describe('Fee accounts selectors', () => {
         result = value;
 
       });
-      expect(result).toEqual({ feeAccounts: null, loaded: false, loading: false });
+      expect(result).toEqual({ feeAccounts: null, loaded: false, loading: false, oneOrMoreAccountMissing: false, errorMessages: null });
     });
   });
 
@@ -42,7 +42,8 @@ describe('Fee accounts selectors', () => {
       expect(result).toEqual([
         {
           payload: 'something',
-          routerLink: '/fee-accounts/account/undefined/'
+          routerLink: '/fee-accounts/account/undefined/',
+          isAccountInfoMissing: false
         }
       ]);
     });
diff --git a/src/fee-accounts/store/selectors/fee-accounts.selectors.ts b/src/fee-accounts/store/selectors/fee-accounts.selectors.ts
index 4acc1eeb9..da5aeb4b6 100644
--- a/src/fee-accounts/store/selectors/fee-accounts.selectors.ts
+++ b/src/fee-accounts/store/selectors/fee-accounts.selectors.ts
@@ -8,3 +8,5 @@ export const getFeeAccountsState = createSelector( selectFeatureFee, (state: any
 export const feeAccounts = createSelector( getFeeAccountsState, fromFeeAccounts.getFeeAccounts);
 export const feeAccountsLoading = createSelector( getFeeAccountsState, fromFeeAccounts.getFeeAccountsLoading);
 export const feeAccountsLoaded = createSelector( getFeeAccountsState, fromFeeAccounts.getFeeAccountsLoaded);
+export const isOneOrMorefeeAccountsMissing = createSelector(getFeeAccountsState, fromFeeAccounts.getOneOrMoreAccountMissingLoaded);
+export const getErrorMessages = createSelector(getFeeAccountsState, fromFeeAccounts.getFeeAccountErrorMessages);
diff --git a/src/shared/components/hmcts-main-wrapper/hmcts-main-wrapper.component.ts b/src/shared/components/hmcts-main-wrapper/hmcts-main-wrapper.component.ts
index 89cf67b65..8a4107a92 100644
--- a/src/shared/components/hmcts-main-wrapper/hmcts-main-wrapper.component.ts
+++ b/src/shared/components/hmcts-main-wrapper/hmcts-main-wrapper.component.ts
@@ -3,15 +3,18 @@ import {Component, Input} from '@angular/core';
 * Main Content wrapper
 * Responsible for:
  * Wrapping content within the gov-uk html elements bellow
- * @prop showBackLink - switch for back link
+ * @prop backLink - switch for back link
+ * @prop backAction - switch for back action
  * @prop title = title
  * @prop summaryErrors list of errors
-* @prop back link, title (title), summaryErrors (array of errors)
+ * @prop actionButtons list of buttons
+ * @prop back link, back action, title (title), summaryErrors (array of errors), action buttons (array of buttons)
 * */
 @Component({
   selector: 'app-hmcts-main-wrapper',
   template: `
-    <a *ngIf="backLink" [routerLink]="backLink" class="govuk-back-link">Back</a>
+    <a *ngIf="backLink && !backAction" [routerLink]="backLink" class="govuk-back-link">Back</a>
+    <a *ngIf="!backLink && backAction" (click)="backAction()" class="govuk-back-link">Back</a>
     <main id="content" role="main" class="govuk-main-wrapper">
       <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
@@ -23,15 +26,29 @@ import {Component, Input} from '@angular/core';
           <h1 *ngIf="title" class="govuk-heading-xl">{{title}}</h1>
           <ng-content></ng-content>
         </div>
+        <div class="govuk-grid-column-one-third" *ngIf="actionButtons?.length > 0">
+          <div class="hmcts-page-heading__actions-wrapper">
+            <a
+              *ngFor="let actionButton of actionButtons"
+              (click)="actionButton.action()"
+              role="button"
+              draggable="false"
+              class="govuk-button {{ actionButton.class }}"
+            >{{ actionButton.name }}</a>
+          </div>
+        </div>
       </div>
     </main>
-  `
+  `,
+  styles: [`.govuk-back-link { cursor: pointer }`]
 })
 export class HmctsMainWrapperComponent  {
 
   @Input() backLink: string;
+  @Input() backAction: () => {};
   @Input() title: string;
   @Input() summaryErrors: {isFromValid: boolean; items: { id: string; message: any; }[]};
+  @Input() actionButtons: {name: string, class: string, action: () => {}}[];
 
   constructor() { }
 
diff --git a/src/user-profile/services/user.service.spec.ts b/src/user-profile/services/user.service.spec.ts
new file mode 100644
index 000000000..0830d5480
--- /dev/null
+++ b/src/user-profile/services/user.service.spec.ts
@@ -0,0 +1,17 @@
+import { UserService } from './user.service';
+
+describe('User service', () => {
+    const mockHttpService = jasmine.createSpyObj('mockHttpService', ['put', 'get']);
+
+    it('should be Truthy', () => {
+        const userService = new UserService(mockHttpService);
+        expect(userService).toBeTruthy();
+    });
+
+    it('editUser Permissions', () => {
+        const userService = new UserService(mockHttpService);
+        const editUser = {userId: '123', editUserRolesObj: {}};
+        userService.editUserPermissions(editUser);
+        expect(mockHttpService.put).toHaveBeenCalledWith('/api/editUserPermissions/users/123', {});
+    });
+});
diff --git a/src/user-profile/services/user.service.ts b/src/user-profile/services/user.service.ts
index 5621ccaf5..a5e7ee5de 100644
--- a/src/user-profile/services/user.service.ts
+++ b/src/user-profile/services/user.service.ts
@@ -10,6 +10,10 @@ import { UserInterface} from '../models/user.model';
 export class UserService {
   constructor(private http: HttpClient) {}
 
+  editUserPermissions(editUser): Observable<any> {
+    return this.http.put(`/api/editUserPermissions/users/${editUser.userId}`, editUser.editUserRolesObj);
+  }
+
   getUserDetails(): Observable<UserInterface> {
     return this.http.get<UserInterface>(`/api/user/details`);
   }
diff --git a/src/user-profile/store/effects/user.effects.ts b/src/user-profile/store/effects/user.effects.ts
index 9ab07b8c3..91411ca18 100644
--- a/src/user-profile/store/effects/user.effects.ts
+++ b/src/user-profile/store/effects/user.effects.ts
@@ -1,18 +1,23 @@
+import {HttpErrorResponse} from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
-import * as authActions from '../actions';
-import { catchError, map, switchMap } from 'rxjs/operators';
 import { of } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
+import { UserRolesUtil } from 'src/users/containers/utils/user-roles-util';
+import config from '../../../../api/lib/config';
+import * as fromRoot from '../../../app/store';
+import { LoggerService } from '../../../shared/services/logger.service';
+import * as usersActions from '../../../users/store/actions/user.actions';
+import {UserInterface} from '../../models/user.model';
 import {UserService} from '../../services/user.service';
+import * as authActions from '../actions';
 import {AuthActionTypes} from '../actions/';
-import {UserInterface} from '../../models/user.model';
-import {HttpErrorResponse} from '@angular/common/http';
-import { LoggerService } from '../../../shared/services/logger.service';
 
 @Injectable()
 export class UserEffects {
   constructor(
     private actions$: Actions,
+    private userService: UserService,
     private authService: UserService,
     private loggerService: LoggerService
   ) { }
@@ -21,7 +26,7 @@ export class UserEffects {
   getUser$ = this.actions$.pipe(
     ofType(AuthActionTypes.GET_USER_DETAILS),
     switchMap(() => {
-      return this.authService.getUserDetails()
+      return this.userService.getUserDetails()
         .pipe(
           map((userDetails: UserInterface) => new authActions.GetUserDetailsSuccess(userDetails)),
           catchError((error: HttpErrorResponse) => {
@@ -52,6 +57,37 @@ export class UserEffects {
     })
   );
 
-}
-
+  @Effect()
+  editUser$ = this.actions$.pipe(
+    ofType(usersActions.EDIT_USER),
+    map((action: usersActions.EditUser) => action.payload),
+    switchMap((user) => {
+      return this.userService.editUserPermissions(user).pipe(
+        map( response => {
+          if (UserRolesUtil.isAddingRoleSuccessful(response) || UserRolesUtil.isDeletingRoleSuccessful(response)) {
+            this.loggerService.info('User permissions modified');
+            return new usersActions.EditUserSuccess(user.userId);
+          } else {
+            this.loggerService.error('user permissions failed');
+            return new usersActions.EditUserFailure(user.userId);
+          }
+        }),
+        catchError(error => {
+          this.loggerService.error(error);
+          return of(new usersActions.EditUserServerError({userId: user.userId, errorCode: error.apiStatusCode}));
+        })
+      );
+    })
+  );
 
+  @Effect()
+  confirmEditUser$ = this.actions$.pipe(
+    ofType(usersActions.EDIT_USER_SUCCESS),
+    map((user: any) => {
+      return user.payload; // this is the userId
+    }),
+    switchMap(userId => [
+      new usersActions.LoadUsers()
+  ])
+  );
+}
diff --git a/src/users/components/index.ts b/src/users/components/index.ts
index 0c8ed203e..18cb91c30 100644
--- a/src/users/components/index.ts
+++ b/src/users/components/index.ts
@@ -1,5 +1,7 @@
 import {InviteUserFormComponent} from './invite-user-form/invite-user-form.component';
+import { InviteUserPermissionComponent } from './invite-user-permissions/invite-user-permission.component';
 
-export const components: any[] = [InviteUserFormComponent];
+export const components: any[] = [InviteUserFormComponent, InviteUserPermissionComponent];
 
 export * from './invite-user-form/invite-user-form.component';
+export * from './invite-user-permissions/invite-user-permission.component';
diff --git a/src/users/components/invite-user-form/invite-user-form.component.html b/src/users/components/invite-user-form/invite-user-form.component.html
index 6dbf58d20..1ada69eed 100644
--- a/src/users/components/invite-user-form/invite-user-form.component.html
+++ b/src/users/components/invite-user-form/invite-user-form.component.html
@@ -19,32 +19,8 @@
     [group]="inviteUserForm">
   </lib-gov-uk-input>
 
-  <!--permissions -->
-  <lib-gov-uk-form-group-wrapper
-    [error]="isInvalid.roles"
-    [config]="{hint: 'Choose what the user will be able to do. You can change this later.', legend: 'Permissions', key: 'roles'}"
-    [formGroupName]="'roles'">
-
-    <div class="govuk-checkboxes">
-      <lib-gov-checkbox
-        [group]="inviteUserForm.controls['roles']"
-        [config]="{value: 'pui-case-manager',  label: 'Manage Cases', name: 'roles', hint: 'View, create and progress cases.', focusOn: 'roles'}">
-      </lib-gov-checkbox>
-
-      <lib-gov-checkbox
-        [group]="inviteUserForm.controls['roles']"
-        [config]="{value: 'pui-user-manager', label: 'Manage Users', name: 'roles',
-        hint: 'Invite users.'}">
-      </lib-gov-checkbox>
-
-      <lib-gov-checkbox
-        [group]="inviteUserForm.controls['roles']"
-        [config]="{value: 'pui-organisation-manager', label: 'Manage Organisation', name: 'roles',
-        hint: 'View organisation name and addresses.'}">
-      </lib-gov-checkbox>
-    </div>
-
-  </lib-gov-uk-form-group-wrapper>
+  <app-invite-permission-form [inviteUserForm]="inviteUserForm" [errorMessages]="isInvalid.roles">
+  </app-invite-permission-form>
 
   <button type="submit" class="govuk-button">
     Send invitation
diff --git a/src/users/components/invite-user-permissions/invite-user-permission.component.html b/src/users/components/invite-user-permissions/invite-user-permission.component.html
new file mode 100644
index 000000000..905faade0
--- /dev/null
+++ b/src/users/components/invite-user-permissions/invite-user-permission.component.html
@@ -0,0 +1,38 @@
+  <!--permissions -->
+  <ng-container [formGroup]="inviteUserForm">
+  <lib-gov-uk-form-group-wrapper
+    [config]="{hint: 'Choose what the user will be able to do. You can change this later.', legend: 'Permissions', key: 'roles'}"
+    [formGroupName]="'roles'"
+    [error]="errorMessages">
+
+    <div class="govuk-checkboxes">
+      <lib-gov-checkbox
+        [group]="inviteUserForm.controls['roles']"
+        [isChecked]="isPuiCaseManager"
+        [config]="{value: 'pui-case-manager',  label: 'Manage Cases', name: 'roles', hint: 'View, create and progress cases.', focusOn: 'roles'}">
+      </lib-gov-checkbox>
+
+      <lib-gov-checkbox
+        [group]="inviteUserForm.controls['roles']"
+        [isChecked]="isPuiUserManager"
+        [config]="{value: 'pui-user-manager', label: 'Manage Users', name: 'roles',
+        hint: 'Invite users.'}">
+      </lib-gov-checkbox>
+
+      <lib-gov-checkbox
+        [group]="inviteUserForm.controls['roles']"
+        [isChecked]="isPuiOrganisationManager"
+        [config]="{value: 'pui-organisation-manager', label: 'Manage Organisation', name: 'roles',
+        hint: 'View organisation name and addresses.'}">
+      </lib-gov-checkbox>
+
+      <!-- <lib-gov-checkbox
+        [group]="inviteUserForm.controls['roles']"
+        [isChecked]="isPuiFinanceManager"
+        [config]="{value: 'pui-finance-manager', label: 'Manage Payments', name: 'roles',
+        hint: 'View account balances, available credit and transactions.'}">
+      </lib-gov-checkbox> -->
+    </div>
+
+  </lib-gov-uk-form-group-wrapper>
+</ng-container>
\ No newline at end of file
diff --git a/src/users/components/invite-user-permissions/invite-user-permission.component.ts b/src/users/components/invite-user-permissions/invite-user-permission.component.ts
new file mode 100644
index 000000000..36ed50e00
--- /dev/null
+++ b/src/users/components/invite-user-permissions/invite-user-permission.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'app-invite-permission-form',
+    templateUrl: './invite-user-permission.component.html',
+  })
+
+  export class InviteUserPermissionComponent {
+    @Input() inviteUserForm: FormGroup;
+    @Input() isPuiCaseManager: boolean = false;
+    @Input() isPuiUserManager: boolean = false;
+    @Input() isPuiOrganisationManager: boolean = false;
+    @Input() isPuiFinanceManager: boolean = false;
+    @Input() errorMessages: {isInvalid: boolean; messages: string[] };
+  }
diff --git a/src/users/containers/edit-user-permissions/edit-user-permission.component.html b/src/users/containers/edit-user-permissions/edit-user-permission.component.html
new file mode 100644
index 000000000..989eb8e52
--- /dev/null
+++ b/src/users/containers/edit-user-permissions/edit-user-permission.component.html
@@ -0,0 +1,17 @@
+<app-hmcts-main-wrapper [summaryErrors]="summaryErrors"
+                         [backLink]="backUrl"
+                         [title]="'Edit user'">
+
+  <h1 class="govuk-heading-l">{{user ? user.firstName : ''}}, {{user ? user.lastName : ''}}</h1>
+  <form [formGroup]="editUserForm" (ngSubmit)="onSubmit()" >
+    <app-invite-permission-form [inviteUserForm]="editUserForm" [errorMessages]="permissionErrors"
+    [isPuiCaseManager]="isPuiCaseManager"
+    [isPuiUserManager]="isPuiUserManager"
+    [isPuiOrganisationManager]="isPuiOrganisationManager"
+    [isPuiFinanceManager]="isPuiFinanceManager">
+    </app-invite-permission-form>
+    <button type="submit" class="govuk-button">
+      Submit
+    </button>
+  </form>
+</app-hmcts-main-wrapper>
\ No newline at end of file
diff --git a/src/users/containers/edit-user-permissions/edit-user-permission.component.spec.ts b/src/users/containers/edit-user-permissions/edit-user-permission.component.spec.ts
new file mode 100644
index 000000000..7606d204c
--- /dev/null
+++ b/src/users/containers/edit-user-permissions/edit-user-permission.component.spec.ts
@@ -0,0 +1,59 @@
+import { EditUserPermissionComponent } from './edit-user-permission.component';
+import { Observable, of } from 'rxjs';
+import { Actions } from '@ngrx/effects';
+
+describe('Edit User Permission Component Component', () => {
+
+    let component: EditUserPermissionComponent;
+    let userStoreSpyObject;
+    let routerStoreSpyObject;
+    let actionsObject;
+
+    beforeEach(() => {
+        userStoreSpyObject = jasmine.createSpyObj('Store', ['pipe', 'select', 'dispatch']);
+        routerStoreSpyObject = jasmine.createSpyObj('Store', ['pipe', 'select', 'dispatch']);
+        actionsObject = jasmine.createSpyObj('Actions', ['pipe']);
+        component = new EditUserPermissionComponent(userStoreSpyObject, routerStoreSpyObject, actionsObject);
+    });
+
+    describe('EditUserPermissionComponent is Truthy', () => {
+        it('should create', () => {
+            expect(component).toBeTruthy();
+        });
+    });
+
+    describe('EditUserPermissionComponent', () => {
+        it('getbackUrl', () => {
+            expect(component.getBackurl('1234')).toEqual('/users/user/1234');
+        });
+    });
+
+    describe('EditUserPermissionComponent', () => {
+        it('getIsPuiCaseManager', () => {
+            const user = {manageCases: 'Yes'};
+            expect(component.getIsPuiCaseManager(user)).toEqual(true);
+        });
+    });
+
+    describe('EditUserPermissionComponent', () => {
+        it('getIsPuiOrganisationManager', () => {
+            const user = {manageOrganisations: 'Yes'};
+            expect(component.getIsPuiOrganisationManager(user)).toEqual(true);
+        });
+    });
+
+    describe('EditUserPermissionComponent', () => {
+        it('getIsPuiUserManager', () => {
+            const user = {manageUsers: 'Yes'};
+            expect(component.getIsPuiUserManager(user)).toEqual(true);
+        });
+    });
+
+    describe('EditUserPermissionComponent', () => {
+        it('unsubscribe', () => {
+            const subscription = jasmine.createSpyObj('subscription', ['unsubscribe']);
+            expect(component.unsubscribe(subscription));
+            expect(subscription.unsubscribe).toHaveBeenCalled();
+        });
+    });
+});
diff --git a/src/users/containers/edit-user-permissions/edit-user-permission.component.ts b/src/users/containers/edit-user-permissions/edit-user-permission.component.ts
new file mode 100644
index 000000000..b18bf336e
--- /dev/null
+++ b/src/users/containers/edit-user-permissions/edit-user-permission.component.ts
@@ -0,0 +1,151 @@
+import {Component, OnInit, OnDestroy} from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { Store, select } from '@ngrx/store';
+import * as fromStore from '../../store';
+import * as fromRoot from '../../../app/store';
+import { Observable, Subscription, combineLatest } from 'rxjs';
+import { UserRolesUtil } from '../utils/user-roles-util';
+import { Actions, ofType } from '@ngrx/effects';
+import { checkboxesBeCheckedValidator } from '../../../custom-validators/checkboxes-be-checked.validator';
+
+@Component({
+    selector: 'app-edit-user-permission',
+    templateUrl: './edit-user-permission.component.html',
+  })
+  export class EditUserPermissionComponent  implements OnInit, OnDestroy {
+    editUserForm: FormGroup;
+    errorMessages = {
+      header: 'There is a problem',
+      roles: ['You must select at least one action'],
+    };
+    user$: Observable<any>;
+    isLoading$: Observable<boolean>;
+    user: any;
+    isPuiCaseManager: boolean;
+    isPuiOrganisationManager: boolean;
+    isPuiUserManager: boolean;
+    isPuiFinanceManager: boolean;
+    userId: string;
+
+    userSubscription: Subscription;
+    dependanciesSubscription: Subscription;
+    editPermissionSuccessSubscription: Subscription;
+    editPermissionServerErrorSubscription: Subscription;
+    backUrl: string;
+
+    summaryErrors: {isFromValid: boolean; items: { id: string; message: any; }[]; header: string};
+    permissionErrors: {isInvalid: boolean; messages: string[] };
+
+    constructor(
+      private userStore: Store<fromStore.UserState>,
+      private routerStore: Store<fromRoot.State>,
+      private actions$: Actions
+    ) { }
+
+    ngOnInit(): void {
+
+      this.editPermissionSuccessSubscription = this.actions$.pipe(ofType(fromStore.EDIT_USER_SUCCESS)).subscribe(() => {
+        this.routerStore.dispatch(new fromRoot.Go({ path: [`users/user/${this.userId}`] }));
+      });
+
+      this.editPermissionServerErrorSubscription = this.actions$.pipe(ofType(fromStore.EDIT_USER_SERVER_ERROR)).subscribe(() => {
+        this.routerStore.dispatch(new fromRoot.Go({ path: [`service-down`] }));
+      });
+
+      this.isLoading$ = this.userStore.pipe(select(fromStore.getGetUserLoading));
+
+      this.dependanciesSubscription = combineLatest([
+      this.routerStore.pipe(select(fromRoot.getRouterState)),
+      this.userStore.pipe(select(fromStore.getGetUserLoaded))
+    ]).subscribe(([route, users]) => {
+      if (!users) {
+        this.userStore.dispatch(new fromStore.LoadUsers());
+      }
+      this.userId = route.state.params.userId;
+      this.user$ = this.userStore.pipe(select(fromStore.getGetSingleUser, { userIdentifier: this.userId }));
+      this.backUrl = this.getBackurl(this.userId);
+    });
+
+      this.userSubscription = this.user$.subscribe((user) => {
+        this.user = user;
+        this.isPuiCaseManager = this.getIsPuiCaseManager(user);
+        this.isPuiOrganisationManager = this.getIsPuiOrganisationManager(user);
+        this.isPuiUserManager = this.getIsPuiUserManager(user);
+        this.isPuiFinanceManager = this.getIsPuiFinanceManager(user);
+
+        this.editUserForm = this.getFormGroup(this.isPuiCaseManager,
+          this.isPuiUserManager, this.isPuiOrganisationManager, this.isPuiFinanceManager,
+          checkboxesBeCheckedValidator);
+      });
+
+    }
+
+  getBackurl(userId: string) {
+    return `/users/user/${userId}`;
+  }
+
+  getFormGroup(isPuiCaseManager, isPuiUserManager, isPuiOrganisationManager, isPuiFinanceManager, validator: any): FormGroup {
+    return new FormGroup({
+      roles: new FormGroup({
+        'pui-case-manager': new FormControl(isPuiCaseManager),
+        'pui-user-manager': new FormControl(isPuiUserManager),
+        'pui-organisation-manager': new FormControl(isPuiOrganisationManager),
+        'pui-finance-manager': new FormControl(isPuiFinanceManager)
+      }, checkboxesBeCheckedValidator())
+    });
+  }
+
+  getIsPuiCaseManager(user: any): boolean {
+    return user && user.manageCases === 'Yes';
+  }
+
+  getIsPuiOrganisationManager(user: any): boolean {
+    return user && user.manageOrganisations === 'Yes';
+  }
+
+  getIsPuiUserManager(user: any): boolean {
+    return user && user.manageUsers === 'Yes';
+  }
+
+  getIsPuiFinanceManager(user: any): boolean {
+    return user && user.managePayments === 'Yes';
+  }
+
+  unsubscribe(subscription: Subscription) {
+    if (subscription) {
+      subscription.unsubscribe();
+    }
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe(this.userSubscription);
+    this.unsubscribe(this.dependanciesSubscription);
+  }
+
+  onSubmit() {
+    if (!this.editUserForm.valid) {
+      this.summaryErrors = { isFromValid: false, items: [{id: 'roles',
+      message: this.errorMessages.roles[0] }], header: this.errorMessages.header};
+      this.permissionErrors = { isInvalid: true, messages: [this.errorMessages.roles[0]]};
+      this.userStore.dispatch(new fromStore.EditUserFailure(this.errorMessages.roles[0]));
+      return;
+    }
+
+    const {value} = this.editUserForm;
+    const permissions = UserRolesUtil.mapPermissions(value);
+    const rolesAdded = UserRolesUtil.getRolesAdded(this.user, permissions);
+    const rolesDeleted = UserRolesUtil.getRolesDeleted(this.user, permissions);
+    const editUserRolesObj = UserRolesUtil.mapEditUserRoles(this.user, rolesAdded, rolesDeleted);
+    if (rolesAdded.length > 0 || rolesDeleted.length > 0) {
+      this.userStore.dispatch(new fromStore.EditUser({editUserRolesObj, userId: this.userId}));
+    } else {
+     /* tslint:disable-next-line */
+      this.summaryErrors = { isFromValid: false, items: [{id: 'roles', message: 'You need to make a change before submitting. If you don\'t make a change, these permissions will stay the same' }],
+      header: this.errorMessages.header};
+      /* tslint:disable-next-line */
+      this.permissionErrors = { isInvalid: true, messages: ['You need to make a change before submitting. If you don\'t make a change, these permissions will stay the same' ]};
+      /* tslint:disable-next-line */
+      return this.userStore.dispatch(new fromStore.EditUserFailure('You need to make a change before submitting. If you don\'t make a change, these permissions will stay the same'));
+    }
+  }
+}
diff --git a/src/users/containers/index.ts b/src/users/containers/index.ts
index 61cfefc12..09bdb35b1 100644
--- a/src/users/containers/index.ts
+++ b/src/users/containers/index.ts
@@ -2,11 +2,14 @@ import { UsersComponent } from './users/users.component';
 import { InviteUserComponent } from './invite-user/invite-user.component';
 import { InviteUserSuccessComponent } from './invite-user-success/invite-user-success.component';
 import { UserDetailsComponent } from './user-details/user-details.component';
+import { EditUserPermissionComponent } from './edit-user-permissions/edit-user-permission.component';
 
-export const containers: any[] = [UsersComponent, InviteUserComponent, InviteUserSuccessComponent, UserDetailsComponent];
+export const containers: any[] = [UsersComponent, InviteUserComponent, InviteUserSuccessComponent, UserDetailsComponent,
+    EditUserPermissionComponent];
 
 
 export * from './users/users.component';
 export * from './invite-user/invite-user.component';
 export * from './invite-user-success/invite-user-success.component';
 export * from './user-details/user-details.component';
+export * from './edit-user-permissions/edit-user-permission.component';
diff --git a/src/users/containers/invite-user/invite-user.component.ts b/src/users/containers/invite-user/invite-user.component.ts
index 7bc23e7bb..2bab128de 100644
--- a/src/users/containers/invite-user/invite-user.component.ts
+++ b/src/users/containers/invite-user/invite-user.component.ts
@@ -46,7 +46,8 @@ export class InviteUserComponent implements OnInit, OnDestroy {
       roles: new FormGroup({
         'pui-case-manager': new FormControl(''),
         'pui-user-manager': new FormControl(''),
-        'pui-organisation-manager': new FormControl('')
+        'pui-organisation-manager': new FormControl(''),
+        'pui-finance-manager': new FormControl('')
       }, checkboxesBeCheckedValidator())
     });
     this.juridictionSubscription = this.store.pipe(select(fromAppStore.getAllJuridictions))
diff --git a/src/users/containers/user-details/user-details.component.html b/src/users/containers/user-details/user-details.component.html
index f8ce8b77d..f63dbaa0e 100644
--- a/src/users/containers/user-details/user-details.component.html
+++ b/src/users/containers/user-details/user-details.component.html
@@ -1,14 +1,63 @@
 <app-hmcts-main-wrapper
    [title]="'User details'"
    [backLink]="'/users'"
+   [actionButtons]="actionButtons"
+   *ngIf="!isSuspendView()"
 >
   <ng-container *ngIf="!(isLoading$ | async) else isLoading">
-    <div class="govuk-warning-text" *ngIf="isSuspended(user.status)">
+    <div class="govuk-warning-text" *ngIf="isSuspended(user?.status)">
       <span class="govuk-warning-text__icon">!</span>
       <strong class="govuk-warning-text__text">
         This user's account has been suspended.
       </strong>
     </div>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <table class="govuk-table">
+          <tbody class="govuk-table__body">
+          <tr class="govuk-table__row">
+            <th class="govuk-table__header" scope="row">Name</th>
+            <td class="govuk-table__cell">{{user.fullName}}</td>
+            <td class="govuk-table__cell"></td>
+          </tr>
+          <tr class="govuk-table__row">
+            <th class="govuk-table__header" scope="row">Email address</th>
+            <td class="govuk-table__cell">{{user.email}}</td>
+            <td class="govuk-table__cell"></td>
+          </tr>
+          <tr class="govuk-table__row">
+            <th class="govuk-table__header" scope="row">Permissions</th>
+            <td class="govuk-table__cell">
+              <div *ngIf="user.manageOrganisations === 'Yes'">Manage Organisations</div>
+              <div *ngIf="user.manageUsers === 'Yes'">Manage Users</div>
+              <div *ngIf="user.manageCases === 'Yes'">Manage Cases</div>
+              <!-- <div *ngIf="user.managePayments === 'Yes'">Manage fee accounts</div> -->
+            </td>
+            <td *ngIf="!isSuspended(user.status)" class="govuk-table__cell"><a routerLink="editpermission">Change</a></td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <p class="govuk-body" *ngIf="isSuspended(user.status)">Contact <a href="mailto:service-desk@hmcts.gov.uk">service-desk@hmcts.gov.uk</a> to reactivate this account.</p>
+  </ng-container>
+  <ng-template #isLoading>
+    <div>Loading...</div>
+  </ng-template>
+</app-hmcts-main-wrapper>
+
+<app-hmcts-main-wrapper
+   [title]="'Are you sure you want to suspend this account?'"
+   [backAction]="hideSuspendView"
+   *ngIf="isSuspendView()"
+>
+  <ng-container>
+    <div class="govuk-warning-text">
+      <span class="govuk-warning-text__icon">!</span>
+      <strong class="govuk-warning-text__text">
+        If you suspend this user’s account, they’ll no longer be able to access MyHMCTS services. You will need to contact the service desk to reactivate this account.
+      </strong>
+    </div>
     <table class="govuk-table">
       <tbody class="govuk-table__body">
       <tr class="govuk-table__row">
@@ -29,10 +78,9 @@
       </tr>
       </tbody>
     </table>
-    <p class="govuk-body" *ngIf="isSuspended(user.status)">Contact <a href="mailto:service-desk@hmcts.gov.uk">service-desk@hmcts.gov.uk</a> to reactivate this account.</p>
+    <button class="govuk-button govuk-button--warning" (click)="suspendUser()">
+      Suspend account
+    </button>
  
   </ng-container>
-  <ng-template #isLoading>
-      <div>Loading...</div>
-    </ng-template>
 </app-hmcts-main-wrapper>
\ No newline at end of file
diff --git a/src/users/containers/user-details/user-details.component.spec.ts b/src/users/containers/user-details/user-details.component.spec.ts
new file mode 100644
index 000000000..b601b9c6c
--- /dev/null
+++ b/src/users/containers/user-details/user-details.component.spec.ts
@@ -0,0 +1,145 @@
+import { UserDetailsComponent } from './user-details.component';
+import { Observable, of } from 'rxjs';
+
+describe('User Details Component', () => {
+
+    let component: UserDetailsComponent;
+    let userStoreSpyObject;
+    let routerStoreSpyObject;
+    let actionsObject;
+
+    beforeEach(() => {
+        userStoreSpyObject = jasmine.createSpyObj('Store', ['pipe', 'select', 'dispatch']);
+        routerStoreSpyObject = jasmine.createSpyObj('Store', ['pipe', 'select', 'dispatch']);
+        actionsObject = jasmine.createSpyObj('Actions', ['pipe']);
+        component = new UserDetailsComponent(userStoreSpyObject, routerStoreSpyObject, actionsObject);
+    });
+
+    describe('ngOnInit', () => {
+        it('should create subscriptions', () => {
+            actionsObject.pipe.and.returnValue(of());
+            component.ngOnInit();
+            expect(component.dependanciesSubscription).toBeDefined();
+            expect(component.userSubscription).toBeDefined();
+            expect(component.suspendSuccessSubscription).toBeDefined();
+        });
+    });
+
+    describe('dispatchGetUsers', () => {
+        it('should load users when there are none', () => {
+            component.dispatchGetUsers(false, userStoreSpyObject);
+            expect(userStoreSpyObject.dispatch).toHaveBeenCalled();
+        });
+
+        it('should not load users when they exist', () => {
+            component.dispatchGetUsers(true, userStoreSpyObject);
+            expect(userStoreSpyObject.dispatch).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('getUserObservable', () => {
+        it('should return user', () => {
+            component.getUserObservable('user', userStoreSpyObject);
+            expect(userStoreSpyObject.pipe).toHaveBeenCalled();
+        });
+    });
+
+    describe('getDependancyObservables', () => {
+        it('should return Observable', () => {
+            component.getDependancyObservables(routerStoreSpyObject, userStoreSpyObject).subscribe(([route, users]) => {
+                expect(users).toBe(false);
+            });
+        });
+    });
+
+    describe('isSuspended', () => {
+        it('should return suspended state', () => {
+            expect(component.isSuspended('Suspended')).toBe(true);
+        });
+    });
+
+    describe('isSuspendView', () => {
+        it('should return state of suspended state flag', () => {
+            expect(component.isSuspendView()).toBe(false);
+        });
+    });
+
+    describe('hideSuspendView', () => {
+        it('should set state of suspended state flag to false', () => {
+            component.setSuspendViewFunctions();
+            component.hideSuspendView();
+            expect(component.suspendViewFlag).toBe(false);
+        });
+    });
+
+    describe('showSuspendView', () => {
+        it('should set state of suspended state flag to true', () => {
+            component.setSuspendViewFunctions();
+            component.showSuspendView();
+            expect(component.suspendViewFlag).toBe(true);
+        });
+    });
+
+    describe('handleUserSubscription', () => {
+        it('should set actionButtons when user is Active', () => {
+            component.handleUserSubscription({ status: 'Active' });
+            expect(component.actionButtons).toBeDefined();
+        });
+
+        it('should not set actionButtons when user is Suspended', () => {
+            component.handleUserSubscription({ status: 'Suspended' });
+            expect(component.actionButtons).toBeNull();
+        });
+    });
+
+    describe('handleDependanciesSubscription', () => {
+        it('should load users when there are none', () => {
+            component.handleDependanciesSubscription(false, { state: { params: { userId: 'user' } } });
+            expect(userStoreSpyObject.dispatch).toHaveBeenCalled();
+        });
+
+        it('should not load users when they exist', () => {
+            component.handleDependanciesSubscription(true, { state: { params: { userId: 'user' } } });
+            expect(userStoreSpyObject.dispatch).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('ngOnDestroy', () => {
+        it('should unsubscribe from observables when subscribed', () => {
+            component.dependanciesSubscription = new Observable().subscribe();
+            component.userSubscription = new Observable().subscribe();
+            component.suspendSuccessSubscription = new Observable().subscribe();
+            const componentDependanciesSubscriptionUnsubscribeSpy = spyOn(component.dependanciesSubscription, 'unsubscribe');
+            const componentUserSubscriptionUnsubscribeSpy = spyOn(component.userSubscription, 'unsubscribe');
+            const componentSuspendSuccessSubscriptionUnsubscribeSpy = spyOn(component.suspendSuccessSubscription, 'unsubscribe');
+            component.ngOnDestroy();
+            expect(componentDependanciesSubscriptionUnsubscribeSpy).toHaveBeenCalled();
+            expect(componentUserSubscriptionUnsubscribeSpy).toHaveBeenCalled();
+            expect(componentSuspendSuccessSubscriptionUnsubscribeSpy).toHaveBeenCalled();
+        });
+
+        it('should not unsubscribe from observables when not subscribed', () => {
+            component.dependanciesSubscription = new Observable().subscribe();
+            component.userSubscription = new Observable().subscribe();
+            component.suspendSuccessSubscription = new Observable().subscribe();
+            const componentDependanciesSubscriptionUnsubscribeSpy = spyOn(component.dependanciesSubscription, 'unsubscribe');
+            const componentUserSubscriptionUnsubscribeSpy = spyOn(component.userSubscription, 'unsubscribe');
+            const componentSuspendSuccessSubscriptionUnsubscribeSpy = spyOn(component.suspendSuccessSubscription, 'unsubscribe');
+            component.dependanciesSubscription = undefined;
+            component.userSubscription = undefined;
+            component.suspendSuccessSubscription = undefined;
+            component.ngOnDestroy();
+            expect(componentDependanciesSubscriptionUnsubscribeSpy).not.toHaveBeenCalled();
+            expect(componentUserSubscriptionUnsubscribeSpy).not.toHaveBeenCalled();
+            expect(componentSuspendSuccessSubscriptionUnsubscribeSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('suspendUser', () => {
+        it('should dispatch an action', () => {
+            component.suspendUser();
+            expect(userStoreSpyObject.dispatch).toHaveBeenCalled();
+        });
+    });
+
+});
diff --git a/src/users/containers/user-details/user-details.component.ts b/src/users/containers/user-details/user-details.component.ts
index 74191ca23..ad57acd1c 100644
--- a/src/users/containers/user-details/user-details.component.ts
+++ b/src/users/containers/user-details/user-details.component.ts
@@ -3,8 +3,7 @@ import { select, Store } from '@ngrx/store';
 import * as fromStore from '../../store';
 import * as fromRoot from '../../../app/store';
 import { Observable, Subscription, combineLatest } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/internal/operators';
+import { Actions, ofType } from '@ngrx/effects';
 
 @Component({
   selector: 'app-prd-user-details-component',
@@ -19,28 +18,85 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
 
   userSubscription: Subscription;
   dependanciesSubscription: Subscription;
+  suspendUserServerErrorSubscription: Subscription;
+
+  actionButtons: { name: string, class: string, action: () => {} }[] = [];
+
+  suspendViewFlag: boolean = false;
+
+  showSuspendView: () => {};
+  hideSuspendView: () => {};
+
+  suspendSuccessSubscription: Subscription;
 
   constructor(
     private userStore: Store<fromStore.UserState>,
     private routerStore: Store<fromRoot.State>,
+    private actions$: Actions,
   ) { }
 
   ngOnInit(): void {
+    this.user$ = new Observable();
+    this.setSuspendViewFunctions();
+
     this.isLoading$ = this.userStore.pipe(select(fromStore.getGetUserLoading));
 
-    this.dependanciesSubscription = combineLatest([
-      this.routerStore.pipe(select(fromRoot.getRouterState)),
-      this.userStore.pipe(select(fromStore.getGetUserLoaded))
-    ]).subscribe(([route, users]) => {
-      if (users === false) {
-        this.userStore.dispatch(new fromStore.LoadUsers());
-      }
-      const userId = route.state.params.userId;
-      this.user$ = this.userStore.pipe(select(fromStore.getGetSingleUser, { userIdentifier: userId }));
+    this.dependanciesSubscription = this.getDependancyObservables(this.userStore, this.routerStore).subscribe(([route, users]) => {
+      this.handleDependanciesSubscription(users, route);
+    });
+
+    this.userSubscription = this.user$.subscribe((user) => this.handleUserSubscription(user));
+
+    this.suspendSuccessSubscription = this.actions$.pipe(ofType(fromStore.SUSPEND_USER_SUCCESS)).subscribe(() => {
+      this.hideSuspendView();
     });
 
-    this.userSubscription = this.user$.subscribe((user) => this.user = user);
+    this.suspendUserServerErrorSubscription = this.actions$.pipe(ofType(fromStore.SUSPEND_USER_FAIL)).subscribe(() => {
+      this.routerStore.dispatch(new fromRoot.Go({ path: [`service-down`] }));
+    });
+  }
+
+  getDependancyObservables(routerStore: Store<fromStore.UserState>, userStore: Store<fromRoot.State>) {
+    return combineLatest([
+      routerStore.pipe(select(fromRoot.getRouterState)),
+      userStore.pipe(select(fromStore.getGetUserLoaded))
+    ]);
+  }
+
+  dispatchGetUsers(users, userStore) {
+    if (!users) {
+      userStore.dispatch(new fromStore.LoadUsers());
+    }
+  }
+
+  getUserObservable(userId, userStore) {
+    return userStore.pipe(select(fromStore.getGetSingleUser, { userIdentifier: userId }));
+  }
+
+  setSuspendViewFunctions() {
+    this.hideSuspendView = () => this.suspendViewFlag = false;
+    this.showSuspendView = () => this.suspendViewFlag = true;
+  }
+
+  handleUserSubscription(user) {
+    this.user = user;
+    if (this.user && this.user.status === 'Active') {
 
+      this.actionButtons = [
+        {
+          name: 'Suspend account',
+          class: 'hmcts-button--secondary',
+          action: this.showSuspendView
+        }
+      ];
+    } else {
+      this.actionButtons = null;
+    }
+  }
+
+  handleDependanciesSubscription(users, route) {
+    this.dispatchGetUsers(users, this.userStore);
+    this.user$ = this.getUserObservable(route.state.params.userId, this.userStore);
   }
 
   ngOnDestroy() {
@@ -52,11 +108,26 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
     if (this.userSubscription) {
       this.userSubscription.unsubscribe();
     }
+
+    if (this.suspendSuccessSubscription) {
+      this.suspendSuccessSubscription.unsubscribe();
+    }
+
+    if (this.suspendUserServerErrorSubscription) {
+      this.suspendUserServerErrorSubscription.unsubscribe();
+    }
   }
 
   isSuspended(status) {
     return status === 'Suspended';
   }
 
-}
+  isSuspendView() {
+    return this.suspendViewFlag;
+  }
+
+  suspendUser() {
+    this.userStore.dispatch(new fromStore.SuspendUser(this.user));
+  }
 
+}
diff --git a/src/users/containers/utils/user-roles-util.spec.ts b/src/users/containers/utils/user-roles-util.spec.ts
new file mode 100644
index 000000000..4e3fe04e9
--- /dev/null
+++ b/src/users/containers/utils/user-roles-util.spec.ts
@@ -0,0 +1,68 @@
+import { UserRolesUtil } from './user-roles-util';
+
+describe('UserRolesUtil class ', () => {
+    it('should get rolesAdded', () => {
+        const user = { roles: ['permission1', 'permission3']};
+        const rolesAdded = UserRolesUtil.getRolesAdded(user, ['permission1', 'permission2']);
+        expect(rolesAdded).toEqual([{name: 'permission2'}]);
+    });
+
+    it('should get rolesDeleted', () => {
+        const user = { roles: ['permission1', 'permission2', 'permission3']};
+        const rolesDeleted = UserRolesUtil.getRolesDeleted(user, ['permission1', 'permission2']);
+        expect(rolesDeleted).toEqual([{name: 'permission3'}]);
+    });
+
+    it('should mapEditUserRoles', () => {
+        const user = {
+                        email: 'email',
+                        lastName: 'last',
+                        firstName: 'first',
+                        idamStatus: 'idam',
+                        roles: ['permission1', 'permission2']
+                    };
+        const userEditObj = UserRolesUtil.mapEditUserRoles(user, ['permission3', 'permission4'], ['permission1', 'permission2']);
+        expect(userEditObj).toEqual({ email: 'email',
+                                      lastName: 'last',
+                                      firstName: 'first',
+                                      idamStatus: 'idam',
+                                      rolesAdd: ['permission3', 'permission4'],
+                                      rolesDelete: ['permission1', 'permission2']
+                                    }
+                                    );
+    });
+
+    it('should get isAddingRoleSuccessful', () => {
+        let response = {};
+        let isAddingSuccessful = UserRolesUtil.isAddingRoleSuccessful(response);
+        expect(isAddingSuccessful).toEqual(undefined);
+
+        response = {roleAdditionResponse: {idamStatusCode: '201'}};
+        isAddingSuccessful = UserRolesUtil.isAddingRoleSuccessful(response);
+        expect(isAddingSuccessful).toEqual(true);
+    });
+
+    it('should get isDeletingRoleSuccessful', () => {
+        let response = {};
+        let isDeletingSuccessful = UserRolesUtil.isDeletingRoleSuccessful(response);
+        expect(isDeletingSuccessful).toEqual(undefined);
+
+        response = {roleDeletionResponse: [{idamStatusCode: '204'}]};
+        isDeletingSuccessful = UserRolesUtil.isDeletingRoleSuccessful(response);
+        expect(isDeletingSuccessful).toEqual(true);
+    });
+
+    it('should get deletable roles GetCCDRoles', () => {
+      const user = {roles: ['Perm1', 'caseworker', 'caseworker-divorce']};
+      const roles = ['caseworker', 'caseworker-divorce'];
+      const result = UserRolesUtil.GetRemovableRolesForUser(user, roles);
+      expect(result).toEqual([{ name: 'caseworker' }, {name: 'caseworker-divorce'}]);
+    });
+
+    it('should get roles ccd roles to add GetCCDRoles', () => {
+      const user = {roles: ['role-1', 'role-2']};
+      const roles = ['caseworker', 'caseworker-divorce'];
+      const result = UserRolesUtil.GetRolesToBeAddedForUser(user, roles);
+      expect(result).toEqual([{name: 'caseworker'}, {name: 'caseworker-divorce'}]);
+    });
+});
diff --git a/src/users/containers/utils/user-roles-util.ts b/src/users/containers/utils/user-roles-util.ts
new file mode 100644
index 000000000..5119b302b
--- /dev/null
+++ b/src/users/containers/utils/user-roles-util.ts
@@ -0,0 +1,84 @@
+import { AppConstants } from '../../../app/app.constants';
+import {boolean} from '@pact-foundation/pact/dsl/matchers';
+
+export class UserRolesUtil {
+    static getRolesAdded(user: any, permissions: string[]): any[] {
+        const roles = [];
+        permissions.forEach( (permission) => {
+            if (!user.roles.includes(permission)) {
+            roles.push({
+                name: permission
+            });
+            if (permission === 'pui-case-manager') {
+                const ccdRolesTobeAdded = UserRolesUtil.GetRolesToBeAddedForUser(user, AppConstants.CCD_ROLES);
+                ccdRolesTobeAdded.forEach(newRole => roles.push(newRole));
+              }
+            }
+        });
+        return roles;
+        }
+
+    static getRolesDeleted(user: any, permissions: string[]): any[] {
+        const roles = [];
+        user.roles.forEach( (permission) => {
+            if (!permissions.includes(permission) && !AppConstants.CCD_ROLES.includes(permission)) {
+              roles.push({
+                  name: permission
+              });
+              if (permission === 'pui-case-manager') {
+                const ccdRolesTobeRemoved = UserRolesUtil.GetRemovableRolesForUser(user, AppConstants.CCD_ROLES);
+                ccdRolesTobeRemoved.forEach(newRole => roles.push(newRole));
+              }
+            }
+        });
+        return roles;
+    }
+
+    static mapEditUserRoles(user: any, rolesAdd: any[], rolesDelete: any[]): any {
+        return {
+            email: user.email,
+            firstName: user.firstName,
+            lastName: user.lastName,
+            idamStatus: user.idamStatus,
+            rolesAdd,
+            rolesDelete
+        };
+    }
+
+    static mapPermissions(value: any) {
+        return Object.keys(value.roles).filter(key => {
+            if (value.roles[key]) {
+            return key;
+            }
+        });
+    }
+    static isAddingRoleSuccessful(response: any): boolean {
+        return response.roleAdditionResponse &&
+        response.roleAdditionResponse.idamStatusCode &&
+        response.roleAdditionResponse.idamStatusCode === '201';
+    }
+
+    static isDeletingRoleSuccessful(result: any): boolean {
+        return result.roleDeletionResponse &&
+        result.roleDeletionResponse[0].idamStatusCode &&
+        result.roleDeletionResponse[0].idamStatusCode === '204';
+    }
+
+    static GetRemovableRolesForUser(user: any, roles: Array<string>): Array<any> {
+      const rolesTobeRemoved = new Array<any>();
+      roles.forEach(role => {
+        if (user.roles.includes(role)) {
+          rolesTobeRemoved.push({name: role});
+        }
+      });
+      return  rolesTobeRemoved;
+    }
+
+    static GetRolesToBeAddedForUser(user: any, roles: Array<string>): Array<any> {
+      const rolesTobeAdded = new Array<any>();
+      roles.forEach(role => {
+          rolesTobeAdded.push({name: role});
+      });
+      return  rolesTobeAdded;
+  }
+}
diff --git a/src/users/services/users.service.spec.ts b/src/users/services/users.service.spec.ts
new file mode 100644
index 000000000..65e3e4763
--- /dev/null
+++ b/src/users/services/users.service.spec.ts
@@ -0,0 +1,20 @@
+import { UsersService } from './users.service';
+import { of } from 'rxjs';
+
+describe('Users service', () => {
+    const mockedHttpClient = jasmine.createSpyObj('mockedHttpClient', ['get', 'put']);
+
+    it('should call getListOfUsers', () => {
+        const service = new UsersService(mockedHttpClient);
+        mockedHttpClient.get.and.returnValue(of());
+        service.getListOfUsers();
+        expect(mockedHttpClient.get).toHaveBeenCalledWith('/api/userList');
+    });
+
+    it('should suspend account', () => {
+        const service = new UsersService(mockedHttpClient);
+        mockedHttpClient.put.and.returnValue(of());
+        service.suspendUser({payload: { userIdentifier: 'dummy' }});
+        expect(mockedHttpClient.put).toHaveBeenCalledWith('/api/user/dummy/suspend', { userIdentifier: 'dummy', idamStatus: 'SUSPENDED' });
+    });
+});
diff --git a/src/users/services/users.service.ts b/src/users/services/users.service.ts
index 140559af7..9d60f750f 100644
--- a/src/users/services/users.service.ts
+++ b/src/users/services/users.service.ts
@@ -4,26 +4,6 @@ import { HttpClient } from '@angular/common/http';
 import {Observable, of, throwError} from 'rxjs';
 import {catchError} from 'rxjs/operators';
 
-/*
-const dummy = [
-  {
-    email: 'somthing@something',
-    manageCases: 'All',
-    manageOrganisation: 'Yes',
-    manageUsers: 'yes',
-    manageFeeAcc: 'yes',
-    status: 'active'
-  },
-  {
-    email: 'xyz@something',
-    manageCases: 'All',
-    manageOrganisation: 'Yes',
-    manageUsers: 'no',
-    manageFeeAcc: 'no',
-    status: 'active'
-  }
-];
-*/
 @Injectable()
 export class UsersService {
   constructor(private http: HttpClient) { }
@@ -32,8 +12,17 @@ export class UsersService {
     return this.http
        .get<any>(`/api/userList`)
        .pipe(catchError((error: any) => throwError(error.json())));
-   // return of(dummy);
   }
 
+  suspendUser(param): Observable<any> {
+    let user = param.payload;
+    user = {
+      ...user,
+      idamStatus: 'SUSPENDED'
+    };
+    return this.http
+       .put<any>(`/api/user/${user.userIdentifier}/suspend`, user)
+       .pipe(catchError((error: any) => throwError(error.json())));
+  }
 
 }
diff --git a/src/users/store/actions/user.actions.ts b/src/users/store/actions/user.actions.ts
index aec443624..4d17d552c 100644
--- a/src/users/store/actions/user.actions.ts
+++ b/src/users/store/actions/user.actions.ts
@@ -4,11 +4,17 @@ import { Action } from '@ngrx/store';
 export const LOAD_USERS = '[User] Load Users';
 export const LOAD_USERS_SUCCESS = '[User] Load Users Success';
 export const LOAD_USERS_FAIL = '[User] Load Users Fail';
-
+export const EDIT_USER = '[User] Edit User';
+export const EDIT_USER_SUCCESS = '[User] Edit User Success';
+export const EDIT_USER_FAILURE = '[User] Edit User Failure';
+export const EDIT_USER_SERVER_ERROR = '[User] Edit User Server Error';
+export const SUSPEND_USER = '[User] Suspend User';
+export const SUSPEND_USER_SUCCESS = '[User] Suspend User Success';
+export const SUSPEND_USER_FAIL = '[User] Suspend User Fail';
 
 export class LoadUsers {
   readonly type = LOAD_USERS;
-  constructor() {}
+  constructor() { }
 }
 
 export class LoadUsersSuccess implements Action {
@@ -16,12 +22,57 @@ export class LoadUsersSuccess implements Action {
   constructor(public payload: any) { }  // TODO add type list of users
 }
 
+export class EditUser implements Action {
+  readonly type = EDIT_USER;
+  constructor(public payload: any) {
+  }
+}
+
+export class EditUserSuccess implements Action {
+  readonly type = EDIT_USER_SUCCESS;
+  constructor(public payload: any) {
+  }
+}
+
+export class EditUserServerError implements Action {
+  readonly type = EDIT_USER_SERVER_ERROR;
+  constructor(public payload: any) {
+  }
+}
+
+export class EditUserFailure implements Action {
+  readonly type = EDIT_USER_FAILURE;
+  constructor(public payload: any) {
+  }
+}
+
 export class LoadUsersFail implements Action {
   readonly type = LOAD_USERS_FAIL;
   constructor(public payload: any) { }
 }
 
+export class SuspendUser {
+  readonly type = SUSPEND_USER;
+  constructor(public payload: any) { }
+}
+
+export class SuspendUserSuccess implements Action {
+  readonly type = SUSPEND_USER_SUCCESS;
+  constructor(public payload: any) { }
+}
+
+export class SuspendUserFail implements Action {
+  readonly type = SUSPEND_USER_FAIL;
+  constructor(public payload: any) { }
+}
+
 export type UserActions =
   | LoadUsers
   | LoadUsersSuccess
-  | LoadUsersFail;
+  | LoadUsersFail
+  | EditUser
+  | EditUserFailure
+  | SuspendUser
+  | SuspendUserSuccess
+  | SuspendUserFail
+  | EditUserServerError;
diff --git a/src/users/store/effects/invite-user.effects.ts b/src/users/store/effects/invite-user.effects.ts
index e015bfcb4..481271024 100644
--- a/src/users/store/effects/invite-user.effects.ts
+++ b/src/users/store/effects/invite-user.effects.ts
@@ -1,13 +1,12 @@
 import {Injectable} from '@angular/core';
 import {Actions, Effect, ofType} from '@ngrx/effects';
 
-import * as usersActions from '../actions';
-import {catchError, map, switchMap, tap} from 'rxjs/operators';
 import {of} from 'rxjs';
-import {InviteUserService } from '../../services';
+import {catchError, map, switchMap, tap} from 'rxjs/operators';
+import { LoggerService } from 'src/shared/services/logger.service';
 import * as fromRoot from '../../../app/store';
-import { LoggerService } from '../../../shared/services/logger.service';
-
+import {InviteUserService } from '../../services';
+import * as usersActions from '../actions';
 
 @Injectable()
 export class InviteUserEffects {
@@ -41,5 +40,4 @@ export class InviteUserEffects {
       return new fromRoot.Go({ path: ['users/invite-user-success'] });
     })
   );
-
 }
diff --git a/src/users/store/effects/users.effects.spec.ts b/src/users/store/effects/users.effects.spec.ts
index 12aaaba0b..db9fec2ef 100644
--- a/src/users/store/effects/users.effects.spec.ts
+++ b/src/users/store/effects/users.effects.spec.ts
@@ -5,7 +5,7 @@ import { of, throwError } from 'rxjs';
 import { provideMockActions } from '@ngrx/effects/testing';
 import * as fromUsersEffects from './users.effects';
 import { UsersEffects } from './users.effects';
-import { LoadUsersSuccess, LoadUsersFail, LoadUsers } from '../actions/user.actions';
+import { LoadUsersSuccess, LoadUsersFail, LoadUsers, SuspendUser, SuspendUserSuccess, SuspendUserFail } from '../actions/user.actions';
 import { UsersService } from '../../services/users.service';
 import { LoggerService } from '../../../shared/services/logger.service';
 
@@ -13,7 +13,7 @@ describe('Users Effects', () => {
     let actions$;
     let effects: UsersEffects;
     const UsersServiceMock = jasmine.createSpyObj('UsersService', [
-        'getListOfUsers',
+        'getListOfUsers', 'suspendUser',
     ]);
     let loggerService: LoggerService;
 
@@ -43,7 +43,7 @@ describe('Users Effects', () => {
 
     describe('loadUsers$', () => {
         it('should return a collection from loadUsers$ - LoadUsersSuccess', () => {
-            const payload = {users: [{ payload: 'something' }]};
+            const payload = { users: [{ payload: 'something' }] };
             UsersServiceMock.getListOfUsers.and.returnValue(of(payload));
             const action = new LoadUsers();
             const completion = new LoadUsersSuccess({
@@ -55,6 +55,20 @@ describe('Users Effects', () => {
             const expected = cold('-b', { b: completion });
             expect(effects.loadUsers$).toBeObservable(expected);
         });
+
+        it('should return a collection from loadUsers$ when status pending - LoadUsersSuccess', () => {
+            const payload = { users: [{ idamStatus: 'PENDING' }] };
+            UsersServiceMock.getListOfUsers.and.returnValue(of(payload));
+            const action = new LoadUsers();
+            const completion = new LoadUsersSuccess({
+                users: [
+                    { idamStatus: 'PENDING', fullName: 'undefined undefined' }
+                ]
+            });
+            actions$ = hot('-a', { a: action });
+            const expected = cold('-b', { b: completion });
+            expect(effects.loadUsers$).toBeObservable(expected);
+        });
     });
 
     describe('loadUsers$ error', () => {
@@ -69,4 +83,39 @@ describe('Users Effects', () => {
         });
     });
 
+    describe('suspendUser$', () => {
+        it('should return a collection from suspendUser$ - SuspendUserSuccess', () => {
+            const user = {
+                userIdentifier: 'cfeba78e-ff81-49d5-8a65-55fa2a9c2424',
+                firstName: 'Humpty',
+                lastName: 'Dumpty',
+                email: 'aa@aa.com',
+                idamStatus: 'Suspend',
+                idamStatusCode:  '',
+                idamMessage: '19 No call made to SIDAM to get the user roles as user status is ‘Pending’',
+                fullName: 'Humpty Dumpty',
+                routerLink: 'user/cfeba78e-ff81-49d5-8a65-55fa2a9c2424',
+                selected: false,
+                status: 'Active'
+            };
+            UsersServiceMock.suspendUser.and.returnValue(of({}));
+            const action = new SuspendUser({payload: user});
+            const completion = new SuspendUserSuccess({payload: user});
+            actions$ = hot('-a', { a: action });
+            const expected = cold('-b', { b: completion });
+            expect(effects.suspendUser$).toBeObservable(expected);
+        });
+    });
+
+    describe('suspendUser$ error', () => {
+        it('should return LoadUsersFail', () => {
+            UsersServiceMock.suspendUser.and.returnValue(throwError(new Error()));
+            const action = new SuspendUser({});
+            const completion = new SuspendUserFail(new Error());
+            actions$ = hot('-a', { a: action });
+            const expected = cold('-b', { b: completion });
+            expect(effects.suspendUser$).toBeObservable(expected);
+        });
+    });
+
 });
diff --git a/src/users/store/effects/users.effects.ts b/src/users/store/effects/users.effects.ts
index 9a589b1c5..ee742e2ae 100644
--- a/src/users/store/effects/users.effects.ts
+++ b/src/users/store/effects/users.effects.ts
@@ -1,13 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 
-import * as usersActions from '../actions';
-import { catchError, map, switchMap } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { UsersService } from '../../services';
+import { catchError, map, switchMap } from 'rxjs/operators';
 import { LoggerService } from '../../../shared/services/logger.service';
-
-
+import { UsersService } from '../../services';
+import * as usersActions from '../actions';
 
 @Injectable()
 export class UsersEffects {
@@ -43,4 +41,16 @@ export class UsersEffects {
       );
     })
   );
+
+
+  @Effect()
+  suspendUser$ = this.actions$.pipe(
+    ofType(usersActions.SUSPEND_USER),
+    switchMap((user: usersActions.SuspendUser) => {
+      return this.usersService.suspendUser(user).pipe(
+        map(res => new usersActions.SuspendUserSuccess(user.payload)),
+        catchError(error => of(new usersActions.SuspendUserFail(error)))
+      );
+    })
+  );
 }
diff --git a/src/users/store/reducers/users.reducer.spec.ts b/src/users/store/reducers/users.reducer.spec.ts
index f8bd56723..93122bd03 100644
--- a/src/users/store/reducers/users.reducer.spec.ts
+++ b/src/users/store/reducers/users.reducer.spec.ts
@@ -8,7 +8,7 @@ const mockUserList = [
         email: 'somthing1@something',
         idamStatus: 'active',
         userIdentifier: 'userId1',
-        roles: ['pui-organisation-manager', 'pui-user-manager', 'pui-case-manager']
+        roles: ['pui-organisation-manager', 'pui-user-manager', 'pui-case-manager', 'pui-finance-manager']
     },
     {
         firstName: 'Test2fggftfirstname',
@@ -29,10 +29,11 @@ const resultUserList = [
         userIdentifier: 'userId1',
         selected: false,
         status: 'Active',
-        roles: ['pui-organisation-manager', 'pui-user-manager', 'pui-case-manager'],
+        roles: ['pui-organisation-manager', 'pui-user-manager', 'pui-case-manager', 'pui-finance-manager'],
         manageOrganisations: 'Yes',
         manageUsers: 'Yes',
-        manageCases: 'Yes'
+        manageCases: 'Yes',
+        managePayments: 'Yes'
     },
     {
         firstName: 'Test2fggftfirstname',
@@ -45,7 +46,8 @@ const resultUserList = [
         roles: ['pui-organisation-manager', 'pui-user-manager'],
         manageOrganisations: 'Yes',
         manageUsers: 'Yes',
-        manageCases: 'No'
+        manageCases: 'No',
+        managePayments: 'No'
     }
 ];
 
diff --git a/src/users/store/reducers/users.reducer.ts b/src/users/store/reducers/users.reducer.ts
index 673b8cfc4..7a849e086 100644
--- a/src/users/store/reducers/users.reducer.ts
+++ b/src/users/store/reducers/users.reducer.ts
@@ -61,7 +61,6 @@ export function reducer(
       };
     }
 
-
     case fromUsers.LOAD_USERS_FAIL: {
       return {
         ...state,
@@ -70,6 +69,44 @@ export function reducer(
       };
     }
 
+    case fromUsers.SUSPEND_USER: {
+      return {
+        ...state,
+        loading: true,
+        loaded: true
+      };
+    }
+
+    case fromUsers.SUSPEND_USER_FAIL: {
+      return {
+        ...state,
+        loading: false,
+        loaded: true
+      };
+    }
+
+    case fromUsers.SUSPEND_USER_SUCCESS: {
+      const user = action.payload ? action.payload : null;
+      const amendedUserList = [];
+      state.userList.slice(0).forEach(element => {
+        const elementInstance = {...element};
+        if (elementInstance['userIdentifier'] ===  user.userIdentifier) {
+          elementInstance['idamStatus'] = 'SUSPENDED';
+          elementInstance['status'] = 'Suspended';
+        }
+        amendedUserList.push(elementInstance);
+      });
+
+      return {
+        ...state,
+        userList: [
+          ...amendedUserList
+        ],
+        loading: false,
+        loaded: true
+      };
+    }
+
   }
 
   return state;
diff --git a/src/users/users.routing.ts b/src/users/users.routing.ts
index 0cd8fb0ba..15c82061e 100644
--- a/src/users/users.routing.ts
+++ b/src/users/users.routing.ts
@@ -1,7 +1,7 @@
 // routes
 import { RouterModule, Routes } from '@angular/router';
 import { ModuleWithProviders } from '@angular/core';
-import { UsersComponent, UserDetailsComponent } from './containers';
+import { UsersComponent, UserDetailsComponent, EditUserPermissionComponent } from './containers';
 import { InviteUserComponent } from './containers/invite-user/invite-user.component';
 import { InviteUserSuccessComponent } from './containers/invite-user-success/invite-user-success.component';
 import { InviteUserSuccessGuard } from './guards/invite-user-success.guard';
@@ -26,6 +26,10 @@ export const ROUTES: Routes = [
       path: 'invite-user-success',
       component: InviteUserSuccessComponent,
       canActivate: [InviteUserSuccessGuard],
+    },
+    {
+      path: 'user/:userId/editpermission',
+      component: EditUserPermissionComponent,
     }
 ];
 
diff --git a/test/e2e/config/fullfunctional.conf.js b/test/e2e/config/fullfunctional.conf.js
index ac92594ca..e8b1d2668 100644
--- a/test/e2e/config/fullfunctional.conf.js
+++ b/test/e2e/config/fullfunctional.conf.js
@@ -13,9 +13,9 @@ const config = {
   framework: 'custom',
   frameworkPath: require.resolve('protractor-cucumber-framework'),
   specs: ['../features/**/*.feature'],
-  baseUrl: process.env.TEST_URL || 'http://localhost:3000/',
+  baseUrl: process.env.TEST_URL || 'https://xui-mo-webapp-aat.service.core-compute-aat.internal/',
   params: {
-    serverUrls: process.env.TEST_URL || 'http://localhost:3000/',
+    serverUrls: process.env.TEST_URL || 'https://xui-mo-webapp-aat.service.core-compute-aat.internal/',
     targetEnv: argv.env || 'local',
     username: process.env.TEST_EMAIL || 'lukesuperuserxui@mailnesia.com' ,
     password: process.env.TEST_PASSWORD || 'Monday01',
@@ -30,7 +30,6 @@ const config = {
 
   onPrepare() {
     browser.waitForAngularEnabled(false);
-    browser.driver.manage().deleteAllCookies();
     global.expect = chai.expect;
     global.assert = chai.assert;
     global.should = chai.should;