diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx
index f4f844981..a03b63096 100644
--- a/packages/fhir-care-team/src/components/ListView/index.tsx
+++ b/packages/fhir-care-team/src/components/ListView/index.tsx
@@ -1,83 +1,42 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import {
-  Row,
-  Col,
-  Table,
-  Spin,
-  PageHeader,
-  Button,
-  Divider,
-  Dropdown,
-  Menu,
-  Popconfirm,
-} from 'antd';
+import { Row, Col, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
-import { RouteComponentProps, useHistory } from 'react-router';
+import { RouteComponentProps, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import { useQuery } from 'react-query';
-import { FHIRServiceClass } from '@opensrp/react-utils';
-import { createChangeHandler, getQueryParams, SearchForm, BrokenPage } from '@opensrp/react-utils';
+import {
+  FHIRServiceClass,
+  useSimpleTabularView,
+  BrokenPage,
+  SearchForm,
+  TableLayout,
+} from '@opensrp/react-utils';
 import lang from '../../lang';
 import {
-  SEARCH_QUERY_PARAM,
   FHIR_CARE_TEAM,
   URL_EDIT_CARE_TEAM,
   URL_CARE_TEAM,
-  ROUTE_PARAM_CARE_TEAM_ID,
   URL_CREATE_CARE_TEAM,
+  careTeamResourceType,
 } from '../../constants';
 import { ViewDetails } from '../ViewDetails';
 import { Dictionary } from '@onaio/utils';
 import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications';
+import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam';
 
 // route params for care team pages
 interface RouteParams {
   careTeamId: string | undefined;
 }
 
-interface TableData {
-  key: number | string;
-  id: string;
-  name: string;
-}
-
 interface Props {
   fhirBaseURL: string;
   careTeamPageSize: number;
 }
 
-export interface PaginationProps {
-  currentPage: number;
-  pageSize: number;
-}
-
-/** default component props */
-const defaultProps = {
-  fhirBaseURL: '',
-  careTeamPageSize: 5,
-};
-
 export type CareTeamListPropTypes = Props & RouteComponentProps<RouteParams>;
 
-export const fetchCareTeams = async (
-  fhirBaseURL: string,
-  pageSize: number,
-  pageOffset: number,
-  setPayloadCount: (count: number) => void
-) => {
-  const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM);
-  const params = {
-    _count: pageSize,
-    _getpagesoffset: pageOffset,
-  };
-  return serve.list(params).then((res) => {
-    setPayloadCount(res.total as number);
-    return res;
-  });
-};
-
 export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise<void> => {
   const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM);
   return serve
@@ -86,21 +45,6 @@ export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise<v
     .catch(() => sendErrorNotification(lang.ERROR_OCCURRED));
 };
 
-export const useCareTeamsHook = (
-  fhirBaseURL: string,
-  pageSize: number,
-  pageOffset: number,
-  setPayloadCount: (count: number) => void
-) => {
-  return useQuery(
-    [FHIR_CARE_TEAM, pageOffset],
-    () => fetchCareTeams(fhirBaseURL, pageSize, pageOffset, setPayloadCount),
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
-};
-
 /**
  * Function which shows the list of all roles and their details
  *
@@ -108,50 +52,33 @@ export const useCareTeamsHook = (
  * @returns {Function} returns User Roles list display
  */
 export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamListPropTypes) => {
-  const { fhirBaseURL, careTeamPageSize } = props;
-  const history = useHistory();
-  const careTeamId = props.match.params[ROUTE_PARAM_CARE_TEAM_ID] ?? '';
+  const { fhirBaseURL } = props;
 
-  const [payloadCount, setPayloadCount] = React.useState<number>(0);
-  const [pageProps, setPageProps] = React.useState<PaginationProps>({
-    currentPage: 1,
-    pageSize: careTeamPageSize,
-  });
-  const { currentPage, pageSize } = pageProps;
-  const pageOffset = (currentPage - 1) * pageSize;
-
-  const { data, isLoading, isFetching, error, refetch } = useCareTeamsHook(
+  const { careTeamId: resourceId } = useParams<RouteParams>();
+  const { searchFormProps, tablePaginationProps, queryValues } = useSimpleTabularView<ICareTeam>(
     fhirBaseURL,
-    pageSize as number,
-    pageOffset,
-    setPayloadCount
+    careTeamResourceType
   );
+  const { data, isFetching, isLoading, error, refetch } = queryValues;
 
-  if (isLoading || isFetching) return <Spin size="large" className="custom-spinner" />;
-
-  if (error) {
-    return <BrokenPage errorMessage={`${error}`} />;
+  if (error && !data) {
+    return <BrokenPage errorMessage={(error as Error).message} />;
   }
 
-  const searchFormProps = {
-    defaultValue: getQueryParams(props.location)[SEARCH_QUERY_PARAM],
-    onChangeHandler: createChangeHandler(SEARCH_QUERY_PARAM, props),
-  };
-
-  const tableData = data?.entry?.map((datum: Dictionary, index: number) => {
+  const tableData = (data?.records ?? []).map((datum: Dictionary) => {
     return {
-      key: `${index}`,
-      id: datum.resource.id,
-      name: datum.resource.name,
+      key: datum.id,
+      id: datum.id,
+      name: datum.name,
     };
   });
+  type TableData = typeof tableData[0];
 
   const columns = [
     {
       title: lang.NAME,
-      dataIndex: 'name',
+      dataIndex: 'name' as const,
       editable: true,
-      sorter: (a: TableData, b: TableData) => a.name.localeCompare(b.name),
     },
     {
       title: 'Actions',
@@ -169,7 +96,7 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
           <Dropdown
             overlay={
               <Menu className="menu">
-                <Menu.Item>
+                <Menu.Item key="delete">
                   <Popconfirm
                     title={lang.CONFIRM_DELETE}
                     okText={lang.YES}
@@ -184,13 +111,8 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
                     </Button>
                   </Popconfirm>
                 </Menu.Item>
-                <Menu.Item
-                  className="viewdetails"
-                  onClick={() => {
-                    history.push(`${URL_CARE_TEAM}/${record.id}`);
-                  }}
-                >
-                  View Details
+                <Menu.Item key="view-details" className="view-details">
+                  <Link to={`${URL_CARE_TEAM}/${record.id}`}>View Details</Link>
                 </Menu.Item>
               </Menu>
             }
@@ -198,13 +120,20 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
             arrow
             trigger={['click']}
           >
-            <MoreOutlined className="more-options" />
+            <MoreOutlined className="more-options" data-testid="action-dropdown" />
           </Dropdown>
         </span>
       ),
     },
   ];
 
+  const tableProps = {
+    datasource: tableData,
+    columns,
+    loading: isFetching || isLoading,
+    pagination: tablePaginationProps,
+  };
+
   return (
     <div className="content-section">
       <Helmet>
@@ -222,31 +151,10 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
               </Button>
             </Link>
           </div>
-          <Table
-            dataSource={tableData}
-            columns={columns}
-            pagination={{
-              showQuickJumper: true,
-              showSizeChanger: true,
-              defaultPageSize: pageSize,
-              onChange: (page: number, pageSize: number | undefined) => {
-                setPageProps({
-                  currentPage: page,
-                  pageSize: pageSize ?? careTeamPageSize,
-                });
-              },
-              current: currentPage,
-              total: payloadCount,
-              pageSizeOptions: ['5', '10', '20', '50', '100'],
-            }}
-          />
+          <TableLayout {...tableProps} />
         </Col>
-        <ViewDetails careTeamId={careTeamId} fhirBaseURL={fhirBaseURL} />
+        {resourceId && <ViewDetails careTeamId={resourceId} fhirBaseURL={fhirBaseURL} />}
       </Row>
     </div>
   );
 };
-
-CareTeamList.defaultProps = defaultProps;
-
-export default CareTeamList;
diff --git a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap
new file mode 100644
index 000000000..dc049b280
--- /dev/null
+++ b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap
@@ -0,0 +1,415 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Care Teams list view renders correctly: Search 1 page 1 1`] = `
+<td
+  class="ant-table-cell"
+>
+  Care Team One
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 1 page 1 2`] = `
+<td
+  class="ant-table-cell"
+>
+  <span
+    class="d-flex align-items-center"
+  >
+    <a
+      href="/admin/CareTeam/edit/308"
+    >
+      <button
+        class="ant-btn ant-btn-link m-0 p-1"
+        type="button"
+      >
+        <span>
+          Edit
+        </span>
+      </button>
+    </a>
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+    <span
+      aria-label="more"
+      class="anticon anticon-more ant-dropdown-trigger more-options"
+      data-testid="action-dropdown"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="more"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 2 page 1 1`] = `
+<td
+  class="ant-table-cell"
+>
+  Care Team Three
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 2 page 1 2`] = `
+<td
+  class="ant-table-cell"
+>
+  <span
+    class="d-flex align-items-center"
+  >
+    <a
+      href="/admin/CareTeam/edit/325"
+    >
+      <button
+        class="ant-btn ant-btn-link m-0 p-1"
+        type="button"
+      >
+        <span>
+          Edit
+        </span>
+      </button>
+    </a>
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+    <span
+      aria-label="more"
+      class="anticon anticon-more ant-dropdown-trigger more-options"
+      data-testid="action-dropdown"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="more"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 3 page 1 1`] = `
+<td
+  class="ant-table-cell"
+>
+  Care Team Five
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 3 page 1 2`] = `
+<td
+  class="ant-table-cell"
+>
+  <span
+    class="d-flex align-items-center"
+  >
+    <a
+      href="/admin/CareTeam/edit/327"
+    >
+      <button
+        class="ant-btn ant-btn-link m-0 p-1"
+        type="button"
+      >
+        <span>
+          Edit
+        </span>
+      </button>
+    </a>
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+    <span
+      aria-label="more"
+      class="anticon anticon-more ant-dropdown-trigger more-options"
+      data-testid="action-dropdown"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="more"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 4 page 1 1`] = `
+<td
+  class="ant-table-cell"
+>
+  test 33
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 4 page 1 2`] = `
+<td
+  class="ant-table-cell"
+>
+  <span
+    class="d-flex align-items-center"
+  >
+    <a
+      href="/admin/CareTeam/edit/330"
+    >
+      <button
+        class="ant-btn ant-btn-link m-0 p-1"
+        type="button"
+      >
+        <span>
+          Edit
+        </span>
+      </button>
+    </a>
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+    <span
+      aria-label="more"
+      class="anticon anticon-more ant-dropdown-trigger more-options"
+      data-testid="action-dropdown"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="more"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 5 page 1 1`] = `
+<td
+  class="ant-table-cell"
+>
+  Care Team Six
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 5 page 1 2`] = `
+<td
+  class="ant-table-cell"
+>
+  <span
+    class="d-flex align-items-center"
+  >
+    <a
+      href="/admin/CareTeam/edit/328"
+    >
+      <button
+        class="ant-btn ant-btn-link m-0 p-1"
+        type="button"
+      >
+        <span>
+          Edit
+        </span>
+      </button>
+    </a>
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+    <span
+      aria-label="more"
+      class="anticon anticon-more ant-dropdown-trigger more-options"
+      data-testid="action-dropdown"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="more"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 6 page 1 1`] = `
+<td
+  class="ant-table-cell"
+>
+  Care Team Four
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: Search 6 page 1 2`] = `
+<td
+  class="ant-table-cell"
+>
+  <span
+    class="d-flex align-items-center"
+  >
+    <a
+      href="/admin/CareTeam/edit/326"
+    >
+      <button
+        class="ant-btn ant-btn-link m-0 p-1"
+        type="button"
+      >
+        <span>
+          Edit
+        </span>
+      </button>
+    </a>
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+    <span
+      aria-label="more"
+      class="anticon anticon-more ant-dropdown-trigger more-options"
+      data-testid="action-dropdown"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="more"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M456 231a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0zm0 280a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</td>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 1`] = `
+<span
+  class="ant-typography display-block"
+>
+  <strong>
+    Name
+  </strong>
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 2`] = `
+<span
+  class="ant-typography ant-typography-secondary display-block"
+>
+  Peter Charlmers Care team
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 3`] = `
+<span
+  class="ant-typography display-block"
+>
+  <strong>
+    Identifier
+  </strong>
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 4`] = `
+<span
+  class="ant-typography ant-typography-secondary display-block"
+/>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 5`] = `
+<span
+  class="ant-typography display-block"
+>
+  <strong>
+    Status
+  </strong>
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 6`] = `
+<span
+  class="ant-typography ant-typography-secondary display-block"
+>
+  active
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 7`] = `
+<span
+  class="ant-typography display-block"
+>
+  <strong>
+    Participant
+  </strong>
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 8`] = `
+<span
+  class="ant-typography ant-typography-secondary display-block"
+>
+  
+</span>
+`;
+
+exports[`Care Teams list view renders correctly: view details display block 9`] = `
+<span
+  class="ant-typography ant-typography-secondary display-block"
+>
+  
+</span>
+`;
diff --git a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 0b43414a5..000000000
--- a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Patients list view renders correctly 1`] = `"FHIR Care TeamCreate Care TeamNameActionsCare Team OneEditCare Team ThreeEditCare Team FiveEdittest 33EditCare Team SixEdit125 / pageGo toPage"`;
-
-exports[`Patients list view renders correctly 3`] = `"FHIR Care TeamCreate Care TeamNameActionsCare Team FourEdit125 / pageGo toPage"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - ascending 0 1`] = `"NameActions"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - ascending 1 1`] = `"Care Team FiveEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - ascending 2 1`] = `"Care Team FourEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - ascending 3 1`] = `"Care Team OneEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - ascending 4 1`] = `"Care Team SixEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - ascending 5 1`] = `"Care Team ThreeEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - descending 0 1`] = `"NameActions"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - descending 1 1`] = `"test 33Edit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - descending 2 1`] = `"Care Team ThreeEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - descending 3 1`] = `"Care Team SixEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - descending 4 1`] = `"Care Team OneEdit"`;
-
-exports[`Patients list view renders correctly: sorted table rows by name - descending 5 1`] = `"Care Team FourEdit"`;
-
-exports[`Patients list view renders correctly: table rows - default order 0 1`] = `"NameActions"`;
-
-exports[`Patients list view renders correctly: table rows - default order 1 1`] = `"Care Team OneEdit"`;
-
-exports[`Patients list view renders correctly: table rows - default order 2 1`] = `"Care Team ThreeEdit"`;
-
-exports[`Patients list view renders correctly: table rows - default order 3 1`] = `"Care Team FiveEdit"`;
-
-exports[`Patients list view renders correctly: table rows - default order 4 1`] = `"test 33Edit"`;
-
-exports[`Patients list view renders correctly: table rows - default order 5 1`] = `"Care Team SixEdit"`;
diff --git a/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx b/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx
index ba38493ca..8e0e3a914 100644
--- a/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx
+++ b/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx
@@ -231,3 +231,88 @@ export const careTeams = {
     },
   ],
 };
+
+export const careTeam4214 = {
+  resourceType: 'CareTeam',
+  id: '4214',
+  meta: {
+    versionId: '2',
+    lastUpdated: '2021-11-01T12:46:15.815+00:00',
+    source: '#10e9551bdff81a82',
+  },
+  text: {
+    status: 'generated',
+    div: '<div xmlns="http://www.w3.org/1999/xhtml">Care Team</div>',
+  },
+  contained: [
+    {
+      resourceType: 'Practitioner',
+      id: '4206',
+      name: [
+        {
+          family: 'Careful',
+          given: ['Adam'],
+          prefix: ['Dr'],
+        },
+      ],
+    },
+  ],
+  status: 'active',
+  category: [
+    {
+      coding: [
+        {
+          system: 'http://loinc.org',
+          code: 'LA27976-2',
+          display: 'Encounter-focused care team',
+        },
+      ],
+    },
+  ],
+  name: 'Peter Charlmers Care team',
+  subject: {
+    reference: 'Patient/4208',
+    display: 'Peter James Chalmers',
+  },
+  encounter: {
+    reference: 'Encounter/4210',
+  },
+  period: {
+    end: '2013-01-01',
+  },
+  participant: [
+    {
+      role: [
+        {
+          text: 'responsiblePerson',
+        },
+      ],
+      member: {
+        reference: 'Patient/4208',
+        display: 'Peter James Chalmers',
+      },
+    },
+    {
+      role: [
+        {
+          text: 'responsiblePerson',
+        },
+      ],
+      member: {
+        reference: '#pr1',
+        display: 'Dorothy Dietition',
+      },
+      onBehalfOf: {
+        reference: 'Organization/f001',
+      },
+      period: {
+        end: '2013-01-01',
+      },
+    },
+  ],
+  managingOrganization: [
+    {
+      reference: 'Organization/4203',
+    },
+  ],
+};
diff --git a/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx b/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx
new file mode 100644
index 000000000..c6e5f0c5a
--- /dev/null
+++ b/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { authenticateUser } from '@onaio/session-reducer';
+import { CareTeamList } from '..';
+import { Route, Router, Switch } from 'react-router';
+import { createBrowserHistory } from 'history';
+import nock from 'nock';
+import * as reactQuery from 'react-query';
+import { waitForElementToBeRemoved, fireEvent, render, cleanup } from '@testing-library/react';
+import { store } from '@opensrp/store';
+import { careTeam4214, careTeams } from './fixtures';
+import { careTeamResourceType, URL_CARE_TEAM } from '../../../constants';
+import { createMemoryHistory } from 'history';
+
+jest.mock('fhirclient', () => {
+  return jest.requireActual('fhirclient/lib/entry/browser');
+});
+
+jest.mock('@opensrp/react-utils', () => {
+  const actual = jest.requireActual('@opensrp/react-utils');
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const SearchForm = (props: any) => {
+    const { onChangeHandler } = props;
+    return (
+      <div className="search-input-wrapper">
+        <input onChange={onChangeHandler} data-testid="search-form"></input>
+      </div>
+    );
+  };
+  return {
+    ...actual,
+    SearchForm,
+  };
+});
+
+const { QueryClient, QueryClientProvider } = reactQuery;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      cacheTime: 0,
+    },
+  },
+});
+
+jest.mock('@opensrp/notifications', () => ({
+  __esModule: true,
+  ...Object.assign({}, jest.requireActual('@opensrp/notifications')),
+}));
+
+const history = createBrowserHistory();
+
+const props = {
+  fhirBaseURL: 'https://r4.smarthealthit.org/',
+  history,
+  careTeamPageSize: 5,
+  location: {
+    hash: '',
+    pathname: `${URL_CARE_TEAM}`,
+    search: '',
+    state: {},
+  },
+  match: {
+    isExact: true,
+    params: { careTeamId: undefined },
+    path: `${URL_CARE_TEAM}`,
+    url: `${URL_CARE_TEAM}`,
+  },
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AppWrapper = (props: any) => {
+  return (
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <Switch>
+          <Route exact path={`${URL_CARE_TEAM}`}>
+            {(routeProps) => <CareTeamList {...{ ...props, ...routeProps }} />}
+          </Route>
+          <Route exact path={`${URL_CARE_TEAM}/:careTeamId`}>
+            {(routeProps) => <CareTeamList {...{ ...props, ...routeProps }} />}
+          </Route>
+        </Switch>
+      </QueryClientProvider>
+    </Provider>
+  );
+};
+
+describe('Care Teams list view', () => {
+  beforeAll(() => {
+    nock.disableNetConnect();
+    store.dispatch(
+      authenticateUser(
+        true,
+        {
+          email: 'bob@example.com',
+          name: 'Bobbie',
+          username: 'RobertBaratheon',
+        },
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        { api_token: 'hunter2', oAuth2Data: { access_token: 'sometoken', state: 'abcde' } }
+      )
+    );
+  });
+  afterAll(() => {
+    nock.enableNetConnect();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+    cleanup();
+  });
+
+  it('renders correctly', async () => {
+    nock(props.fhirBaseURL)
+      .get(`/${careTeamResourceType}/_search`)
+      .query({
+        _getpagesoffset: 0,
+        _count: 20,
+      })
+      .reply(200, careTeams)
+      .persist();
+
+    const history = createMemoryHistory();
+    history.push(URL_CARE_TEAM);
+
+    const { getByText } = render(
+      <Router history={history}>
+        <AppWrapper {...props} />
+      </Router>
+    );
+
+    await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
+
+    document.querySelectorAll('tr').forEach((tr, idx) => {
+      tr.querySelectorAll('td').forEach((td) => {
+        expect(td).toMatchSnapshot(`Search ${idx} page 1`);
+      });
+    });
+
+    // view details
+    nock(props.fhirBaseURL).get(`/${careTeamResourceType}/308`).reply(200, careTeam4214).persist();
+
+    // target the initial row view details
+    const dropdown = document.querySelector(
+      'tbody tr:nth-child(1) [data-testid="action-dropdown"]'
+    );
+    fireEvent.click(dropdown);
+
+    const viewDetailsLink = getByText(/View Details/);
+    expect(viewDetailsLink).toMatchInlineSnapshot(`
+      <a
+        href="/admin/CareTeams/308"
+      >
+        View Details
+      </a>
+    `);
+    fireEvent.click(viewDetailsLink);
+    expect(history.location.pathname).toEqual('/admin/CareTeams/308');
+
+    await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
+    // view details renders correctly
+    document
+      .querySelectorAll('.display-block')
+      .forEach((block) => expect(block).toMatchSnapshot('view details display block'));
+  });
+});
diff --git a/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx b/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx
index 34126c909..f5a03d412 100644
--- a/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx
+++ b/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx
@@ -1,28 +1,30 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { authenticateUser } from '@onaio/session-reducer';
-import { CareTeamList, deleteCareTeam, useCareTeamsHook } from '..';
+import { CareTeamList, deleteCareTeam } from '..';
 import { Router } from 'react-router';
 import { createBrowserHistory } from 'history';
 import nock from 'nock';
 import flushPromises from 'flush-promises';
 import * as reactQuery from 'react-query';
-import { renderHook } from '@testing-library/react-hooks';
-import { waitFor } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import * as notifications from '@opensrp/notifications';
 import { store } from '@opensrp/store';
 import { careTeams } from './fixtures';
-import { mount, shallow } from 'enzyme';
-import * as fhirCient from 'fhirclient';
-import toJson from 'enzyme-to-json';
+import { mount } from 'enzyme';
+import * as fhirclient from 'fhirclient';
 import { URL_CARE_TEAM } from '../../../constants';
-import { createWrapper, renderWithClient } from './utils';
-import Client from 'fhirclient/lib/Client';
 
 const { QueryClient, QueryClientProvider } = reactQuery;
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      cacheTime: 0,
+    },
+  },
+});
 
 jest.mock('@opensrp/notifications', () => ({
   __esModule: true,
@@ -31,7 +33,8 @@ jest.mock('@opensrp/notifications', () => ({
 
 const history = createBrowserHistory();
 
-const careTeamProps = {
+const props = {
+  fhirBaseURL: 'https://r4.smarthealthit.org/',
   history,
   careTeamPageSize: 5,
   location: {
@@ -48,8 +51,9 @@ const careTeamProps = {
   },
 };
 
-describe('Patients list view', () => {
+describe('Care Teams list view', () => {
   beforeAll(() => {
+    nock.disableNetConnect();
     store.dispatch(
       authenticateUser(
         true,
@@ -62,7 +66,9 @@ describe('Patients list view', () => {
         { api_token: 'hunter2', oAuth2Data: { access_token: 'sometoken', state: 'abcde' } }
       )
     );
-    nock('https://r4.smarthealthit.org').get('/CareTeam').reply(200, careTeams);
+  });
+  afterAll(() => {
+    nock.enableNetConnect();
   });
 
   afterEach(() => {
@@ -71,151 +77,8 @@ describe('Patients list view', () => {
     jest.restoreAllMocks();
   });
 
-  it('renders patients table without crashing', async () => {
-    shallow(
-      <Router history={history}>
-        <QueryClientProvider client={queryClient}>
-          <CareTeamList {...careTeamProps} fhirBaseURL="https://r4.smarthealthit.org/" />
-        </QueryClientProvider>
-      </Router>
-    );
-  });
-
-  it('renders correctly', async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const client = new Client({} as any, {
-      serverUrl: 'https://r4.smarthealthit.org/',
-    });
-
-    const result = await client.request({
-      includeResponse: true,
-      url: 'CareTeam',
-    });
-
-    // expect(result.body).toEqual('');
-
-    const fhir = jest.spyOn(fhirCient, 'client');
-    const requestMock = jest.fn();
-    fhir.mockImplementation(
-      jest.fn().mockImplementation(() => {
-        return {
-          request: requestMock.mockResolvedValue(result.body),
-        };
-      })
-    );
-    const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <QueryClientProvider client={queryClient}>
-            <CareTeamList {...careTeamProps} fhirBaseURL="https://r4.smarthealthit.org/" />
-          </QueryClientProvider>
-        </Router>
-      </Provider>
-    );
-
-    expect(toJson(wrapper.find('.ant-spin'))).toBeTruthy();
-
-    await act(async () => {
-      await flushPromises();
-      wrapper.update();
-    });
-
-    expect(requestMock.mock.calls).toEqual([['CareTeam/_search?_count=5&_getpagesoffset=0']]);
-    expect(toJson(wrapper.find('.ant-spin'))).toBeFalsy();
-    expect(wrapper.text()).toMatchSnapshot();
-
-    // test sorting
-    // find table (sorted by default order)
-    wrapper.find('tr').forEach((tr, index) => {
-      expect(tr.text()).toMatchSnapshot(`table rows - default order ${index}`);
-    });
-
-    // sort by username
-    // click on sort to change the order (ascending)
-    wrapper.find('thead tr th').first().simulate('click');
-    wrapper.update();
-
-    // check new sort order by name (ascending)
-    wrapper.find('tr').forEach((tr, index) => {
-      expect(tr.text()).toMatchSnapshot(`sorted table rows by name - ascending ${index}`);
-    });
-
-    // click on sort to change the order (descending)
-    wrapper.find('thead tr th').first().simulate('click');
-    wrapper.update();
-
-    // check new sort order by name (ascending)
-    wrapper.find('tr').forEach((tr, index) => {
-      expect(tr.text()).toMatchSnapshot(`sorted table rows by name - descending ${index}`);
-    });
-
-    // cancel sort
-    // click on sort to change the order (descending)
-    wrapper.find('thead tr th').first().simulate('click');
-
-    // look for pagination
-    expect(wrapper.find('Pagination').at(0).text()).toMatchInlineSnapshot(`"125 / pageGo toPage"`);
-    wrapper.find('.ant-pagination-item-2').simulate('click');
-    await act(async () => {
-      await flushPromises();
-      wrapper.update();
-    });
-    expect(wrapper.text()).toMatchSnapshot();
-
-    wrapper.unmount();
-  });
-
-  it('correctly redirects to care team detail view url', async () => {
-    const fhir = jest.spyOn(fhirCient, 'client');
-    fhir.mockImplementation(
-      jest.fn().mockImplementation(() => {
-        return {
-          request: jest.fn().mockResolvedValueOnce(careTeams),
-        };
-      })
-    );
-    const wrapper = mount(
-      <Provider store={store}>
-        <Router history={history}>
-          <QueryClientProvider client={queryClient}>
-            <CareTeamList {...careTeamProps} fhirBaseURL="https://r4.smarthealthit.org/" />
-          </QueryClientProvider>
-        </Router>
-      </Provider>
-    );
-    await act(async () => {
-      await flushPromises();
-    });
-
-    wrapper.update();
-
-    wrapper.find('Dropdown').at(0).simulate('click');
-    wrapper.update();
-    wrapper.find('.viewdetails').at(0).simulate('click');
-    wrapper.update();
-    // Redirect to care team detail view
-    expect(history.location.pathname).toEqual('/admin/CareTeams/308');
-  });
-
-  it('successful query component', async () => {
-    const fhir = jest.spyOn(fhirCient, 'client');
-    fhir.mockImplementation(
-      jest.fn().mockImplementation(() => {
-        return {
-          request: jest.fn().mockResolvedValueOnce(careTeams),
-        };
-      })
-    );
-    const result = renderWithClient(
-      <Router history={history}>
-        <CareTeamList {...careTeamProps} fhirBaseURL="https://r4.smarthealthit.org/" />
-      </Router>
-    );
-    await waitFor(() => result.getByText(/Care Team One/));
-  });
-
   it('successfully deletes care team', async () => {
-    const fhir = jest.spyOn(fhirCient, 'client');
+    const fhir = jest.spyOn(fhirclient, 'client');
     const notificationSuccessMock = jest.spyOn(notifications, 'sendSuccessNotification');
     fhir.mockImplementation(
       jest.fn().mockImplementation(() => {
@@ -226,14 +89,18 @@ describe('Patients list view', () => {
       })
     );
 
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
     const wrapper = mount(
       <Provider store={store}>
         <Router history={history}>
           <QueryClientProvider client={queryClient}>
-            <CareTeamList {...careTeamProps} fhirBaseURL="https://r4.smarthealthit.org/" />
+            <CareTeamList {...props} fhirBaseURL="https://r4.smarthealthit.org/" />
           </QueryClientProvider>
         </Router>
-      </Provider>
+      </Provider>,
+      { attachTo: div }
     );
 
     await act(async () => {
@@ -264,7 +131,7 @@ describe('Patients list view', () => {
 
   it('handles failed care team deletion', async () => {
     const notificationErrorsMock = jest.spyOn(notifications, 'sendErrorNotification');
-    const fhir = jest.spyOn(fhirCient, 'client');
+    const fhir = jest.spyOn(fhirclient, 'client');
     fhir.mockImplementation(
       jest.fn().mockImplementation(() => {
         return {
@@ -290,27 +157,6 @@ describe('hooks', () => {
     jest.resetModules();
   });
 
-  it('successful fetchCareTeams query hook', async () => {
-    const fhir = jest.spyOn(fhirCient, 'client');
-    fhir.mockImplementation(
-      jest.fn().mockImplementation(() => {
-        return {
-          request: jest.fn().mockResolvedValueOnce(careTeams),
-        };
-      })
-    );
-    const { result, waitFor } = renderHook(
-      () => useCareTeamsHook('https://r4.smarthealthit.org/', 20, 0, jest.fn()),
-      {
-        wrapper: createWrapper(),
-      }
-    );
-
-    await waitFor(() => result.current.isFetched);
-
-    expect(result.current.data).toBe(careTeams);
-  });
-
   it('shows broken page if fhir api is down', async () => {
     const reactQueryMock = jest.spyOn(reactQuery, 'useQuery');
     reactQueryMock.mockImplementation(
@@ -326,7 +172,7 @@ describe('hooks', () => {
       <Provider store={store}>
         <Router history={history}>
           <QueryClientProvider client={queryClient}>
-            <CareTeamList {...careTeamProps} fhirBaseURL="https://r4.smarthealthit.org/" />
+            <CareTeamList {...props} fhirBaseURL="https://r4.smarthealthit.org/" />
           </QueryClientProvider>
         </Router>
       </Provider>
diff --git a/packages/fhir-care-team/src/components/ViewDetails/index.tsx b/packages/fhir-care-team/src/components/ViewDetails/index.tsx
index 08c0daaa1..aa7496e90 100644
--- a/packages/fhir-care-team/src/components/ViewDetails/index.tsx
+++ b/packages/fhir-care-team/src/components/ViewDetails/index.tsx
@@ -5,11 +5,18 @@ import { useHistory } from 'react-router';
 import { Dictionary } from '@onaio/utils';
 import { useQuery, useQueries } from 'react-query';
 import { IfhirR4 } from '@smile-cdr/fhirts';
-import { Resource404, BrokenPage, FHIRServiceClass } from '@opensrp/react-utils';
+import {
+  Resource404,
+  BrokenPage,
+  FHIRServiceClass,
+  getObjLike,
+  IdentifierUseCodes,
+} from '@opensrp/react-utils';
 import lang from '../../lang';
-import { FHIR_CARE_TEAM, URL_CARE_TEAM } from '../../constants';
+import { careTeamResourceType, FHIR_CARE_TEAM, URL_CARE_TEAM } from '../../constants';
 import { getPatientName } from '../CreateEditCareTeam/utils';
 import { FHIR_GROUPS, FHIR_PRACTITIONERS } from '../../constants';
+import { Identifier } from '@smile-cdr/fhirts/dist/FHIR-R3';
 const { Text } = Typography;
 
 /** typings for the view details component */
@@ -29,7 +36,7 @@ const ViewDetails = (props: ViewDetailsProps) => {
   const history = useHistory();
 
   const { data, isLoading, error } = useQuery({
-    queryKey: [`CareTeam/${careTeamId}`],
+    queryKey: [careTeamResourceType, careTeamId],
     queryFn: () =>
       careTeamId ? new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM).read(careTeamId) : undefined,
     select: (res) => res,
@@ -52,9 +59,9 @@ const ViewDetails = (props: ViewDetailsProps) => {
   );
 
   const subject = useQuery({
-    queryKey: [`CareTeam/${data && data.subject && data.subject.reference}`],
+    queryKey: [FHIR_GROUPS, data?.subject?.reference],
     queryFn: () =>
-      data && data.subject && data.subject.reference
+      data?.subject?.reference
         ? new FHIRServiceClass(fhirBaseURL, FHIR_GROUPS).read(data.subject.reference.split('/')[1])
         : undefined,
     select: (res) => res,
@@ -68,6 +75,10 @@ const ViewDetails = (props: ViewDetailsProps) => {
     return <BrokenPage errorMessage={`${error}`} />;
   }
 
+  const officialIdentifier = getObjLike(data?.identifier, 'use', IdentifierUseCodes.OFFICIAL)[0] as
+    | Identifier
+    | undefined;
+
   return (
     <Col className="view-details-content">
       <div className="flex-right">
@@ -95,7 +106,7 @@ const ViewDetails = (props: ViewDetailsProps) => {
             {lang.IDENTIFIER}
           </Text>
           <Text type="secondary" className="display-block">
-            {data?.identifier[0].value}
+            {officialIdentifier?.value}
           </Text>
           <Text strong={true} className="display-block">
             {lang.STATUS}