diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx
index 17e5532819..d7cc3b4e68 100644
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -11,7 +11,15 @@ import {
   TableHeader,
   TableVariant,
 } from "@patternfly/react-table";
-import { Spinner } from "@patternfly/react-core";
+import {
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Spinner,
+} from "@patternfly/react-core";
 import _ from "lodash";
 
 import { PaginatingTableToolbar } from "./PaginatingTableToolbar";
@@ -385,6 +393,45 @@ export function KeycloakDataTable<T>({
               columns={columns}
               ariaLabelKey={ariaLabelKey}
             />
+            //       <DataList
+            //   // onSelectDataListItem={(value) => {
+            //   //   setGroupId(value);
+            //   // }}
+            //   aria-label={t("groups")}
+            //   isCompact
+            //   itemOrder={itemOrder}
+            // >
+            //   {(rows!).map((component) => (
+            //     <DataListItem draggable
+            //       aria-labelledby={"aria"}
+            //       key={"key"}
+            //       id={"id"}
+            //       // onClick={(e) => {
+            //       //   if ((e.target as HTMLInputElement).type !== "checkbox") {
+            //       //     setGroupId(group.id);
+            //       //   }
+            //       // }}
+            //     >
+            //       <DataListItemRow data-testid={"group.name"}>
+
+            //         <DataListItemCells
+            //           dataListCells={[
+            //             <DataListCell key={`name}`}>
+            //               <>{Math.random()}</>
+            //             </DataListCell>,
+            //           ]}
+            //         />
+            //         <DataListAction
+            //           aria-labelledby={`select`}
+            //           id={`select`}
+            //           aria-label={t("groupName")}
+            //           isPlainButtonAction
+            //         >
+            //         </DataListAction>
+            //       </DataListItemRow>
+            //     </DataListItem>
+            //   ))}
+            // </DataList>
           )}
           {!loading &&
             rows.length === 0 &&
diff --git a/src/realm-settings/GeneralTab.tsx b/src/realm-settings/GeneralTab.tsx
index e5a0138f29..784487a053 100644
--- a/src/realm-settings/GeneralTab.tsx
+++ b/src/realm-settings/GeneralTab.tsx
@@ -43,34 +43,6 @@ export const RealmSettingsGeneralTab = ({
 
   const requireSslTypes = ["all", "external", "none"];
 
-<<<<<<< HEAD
-=======
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-        setupForm(realm);
-      },
-      handleError
-    );
-  }, []);
-
-  const setupForm = (realm: RealmRepresentation) => {
-    Object.entries(realm).map((entry) => setValue(entry[0], entry[1]));
-  };
-
-  const save = async (realm: RealmRepresentation) => {
-    try {
-      await adminClient.realms.update({ realm: realmName }, realm);
-      setRealm(realm);
-      addAlert(t("saveSuccess"), AlertVariant.success);
-    } catch (error) {
-      addAlert(t("saveError", { error }), AlertVariant.danger);
-    }
-  };
-
->>>>>>> wip keys
   return (
     <>
       <PageSection variant="light">
diff --git a/src/realm-settings/KeysProvidersTab.tsx b/src/realm-settings/KeysProvidersTab.tsx
index 4724a7b83e..6ea9a4727e 100644
--- a/src/realm-settings/KeysProvidersTab.tsx
+++ b/src/realm-settings/KeysProvidersTab.tsx
@@ -1,7 +1,19 @@
 import React, { Component, useState, useEffect } from "react";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, ButtonVariant, DataList, DataListAction, DataListCell, DataListItem, DataListItemCells, DataListItemRow, PageSection } from "@patternfly/react-core";
+import {
+  Button,
+  ButtonVariant,
+  DataList,
+  DataListAction,
+  DataListCell,
+  DataListControl,
+  DataListDragButton,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  PageSection,
+} from "@patternfly/react-core";
 import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@@ -10,23 +22,32 @@ import { emptyFormatter } from "../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 import "./RealmSettingsSection.css";
-import { cellWidth } from "@patternfly/react-table";
+import {
+  cellWidth,
+  Table,
+  TableBody,
+  TableHeader,
+  TableVariant,
+} from "@patternfly/react-table";
 import ComponentTypeRepresentation from "keycloak-admin/lib/defs/componentTypeRepresentation";
 import { asyncStateFetch } from "../context/auth/AdminClient";
 import { useErrorHandler } from "react-error-boundary";
 
 type ComponentData = KeyMetadataRepresentation & {
   providerDescription?: string;
+  name?: string;
 };
 
 type KeysTabInnerProps = {
   components: ComponentData[];
   realmComponents: ComponentRepresentation[];
   keyProviderComponentTypes: ComponentTypeRepresentation[];
-
 };
 
-export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabInnerProps) => {
+export const KeysTabInner = ({
+  components,
+  keyProviderComponentTypes,
+}: KeysTabInnerProps) => {
   const { t } = useTranslation("roles");
   const history = useHistory();
   const { url } = useRouteMatch();
@@ -34,41 +55,59 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
   const refresh = () => setKey(new Date().getTime());
   const errorHandler = useErrorHandler();
 
-
-  const [publicKey, setPublicKey] = useState("");
-  const [certificate, setCertificate] = useState("");
-  const [fetchedComponents, setFetchedComponents] = useState<ComponentRepresentation[]>([]);
+  const [itemOrder, setItemOrder] = useState(["data1", "data2", "data3"]);
+  const [id, setId] = useState("");
 
   const loader = async () => {
     return components;
   };
 
-//   useEffect(
-//     () =>
-//       asyncStateFetch(
-//         async () => {
-//             return components;
-//         },
-//         async () => {
+  //   useEffect(
+  //     () =>
+  //       asyncStateFetch(
+  //         async () => {
+  //             return components;
+  //         },
+  //         async () => {
 
-//             setFetchedComponents(components)
-//         },
-//         errorHandler
-//       ),
-//     []
-//   );
+  //             setFetchedComponents(components)
+  //         },
+  //         errorHandler
+  //       ),
+  //     []
+  //   );
 
   React.useEffect(() => {
     refresh();
   }, [components]);
 
-
   const goToCreate = () => history.push(`${url}/add-role`);
 
-  const ProviderDescriptionRenderer = ({ providerDescription }: ComponentData) => {
+  console.log("componentsss", components);
 
+  const onDragStart = (id: string) => {
+    console.log(itemOrder);
+    setId(id);
+  };
 
-    return <>{providerDescription}</>;
+  const onDragMove = (oldIndex, newIndex) => {
+    console.log(`Dragging item ${id}.`);
+  };
+
+  const columns = [
+    t("realm-settings:name"),
+    t("realm-settings:provider"),
+    t("realm-settings:providerDescription"),
+  ];
+
+  //   const onDragCancel = () => {
+  //     this.setState({
+  //       liveText: `Dragging cancelled. List is unchanged.`
+  //     });
+  //   };
+
+  const onDragFinish = (itemOrder) => {
+    setItemOrder(itemOrder);
   };
 
   return (
@@ -76,7 +115,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
       <PageSection variant="light" padding={{ default: "noPadding" }}>
         {/* <PublicKeyDialog />
         <CertificateDialog /> */}
-        <KeycloakDataTable
+        {/* <KeycloakDataTable
           key={key}
           loader={loader}
           ariaLabelKey="realm-settings:keysList"
@@ -87,6 +126,7 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
               name: "providerId",
               displayKey: "realm-settings:name",
               cellFormatters: [emptyFormatter()],
+            //   cellRenderer: DataCellRendererTest,
               transforms: [cellWidth(15)],
             },
             {
@@ -98,9 +138,9 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
             {
               name: "providerDescription",
               displayKey: "realm-settings:providerDescription",
-              cellRenderer: ProviderDescriptionRenderer,
+            //   cellRenderer: ProviderDescriptionRenderer,
               cellFormatters: [emptyFormatter()],
-            }
+            },
           ]}
           emptyState={
             <ListEmptyState
@@ -111,45 +151,81 @@ export const KeysTabInner = ({ components, keyProviderComponentTypes }: KeysTabI
               onPrimaryAction={goToCreate}
             />
           }
-        />
-        {/* <DataList
-        // onSelectDataListItem={(value) => {
-        //   setGroupId(value);
-        // }}
-        aria-label={t("groups")}
-        isCompact
-      >
-        {(keyProviderComponentTypes).map((component) => (
-          <DataListItem draggable
-            aria-labelledby={"aria"}
-            key={"key"}
-            id={"id"}
-            // onClick={(e) => {
-            //   if ((e.target as HTMLInputElement).type !== "checkbox") {
-            //     setGroupId(group.id);
-            //   }
-            // }}
-          >
-            <DataListItemRow data-testid={"group.name"}>
-
-              <DataListItemCells
+        /> */}
+        <Table
+          aria-label="Simple Table"
+          //   variant={TableVariant}
+          //   borders={choice !== 'compactBorderless'}
+          cells={columns}
+          //   rows={rows}
+        >
+          <TableHeader />
+          <TableBody />
+        </Table>
+        <DataList
+          // onSelectDataListItem={(value) => {
+          //   setGroupId(value);
+          // }}
+          aria-label={t("groups")}
+          onDragFinish={onDragFinish}
+          onDragStart={onDragStart}
+          onDragMove={onDragMove}
+          //   onDragCancel={this.onDragCancel}
+          itemOrder={itemOrder}
+          isCompact
+        >
+          {/* <DataListItem aria-labelledby={"aria"} id="data1" key="1">
+            <DataListItemRow className="test" data-testid={"group.name"}>
+              <DataListItemCells className="test2"
                 dataListCells={[
-                  <DataListCell key={`name}`}>
-                    <>{"group.name"}</>
+                  <DataListCell key={"1"}>
+                    <>{t("realm-settings:name")}</>
                   </DataListCell>,
+                  <DataListCell key={"2"}>
+                    <>{t("realm-settings:provider")}</>
+                  </DataListCell>,
+                  <DataListCell key={"3"}>
+                    <>{t("realm-settings:providerDescription")}</>
+                  </DataListCell>
                 ]}
               />
-              <DataListAction
-                aria-labelledby={`select`}
-                id={`select`}
-                aria-label={t("groupName")}
-                isPlainButtonAction
-              >
-              </DataListAction>
             </DataListItemRow>
-          </DataListItem>
-        ))}
-      </DataList> */}
+          </DataListItem> */}
+          {components.map((component, idx) => (
+            <DataListItem
+              draggable
+              aria-labelledby={"aria"}
+              key={`key-${idx + 1}`}
+              id={`data${idx + 1}`}
+            >
+              <DataListItemRow data-testid={"data-list-row"}>
+                <DataListControl>
+                  <DataListDragButton
+                    aria-label="Reorder"
+                    aria-labelledby="simple-item2"
+                    aria-describedby="Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                    aria-pressed="false"
+                  />
+                </DataListControl>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell key={"4"}>
+                      <>
+                        <Button variant="link">{component.providerId}</Button>
+                      </>
+                    </DataListCell>,
+                    <DataListCell key={"5"}>
+                      <>{component.name}</>
+                    </DataListCell>,
+                    <DataListCell key={"6"}>
+                      <>{component.providerDescription}</>
+                    </DataListCell>,
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+          ))}
+        </DataList>
       </PageSection>
     </>
   );
@@ -159,32 +235,34 @@ type KeysProps = {
   components: ComponentRepresentation[];
   realmComponents: ComponentRepresentation[];
   keyProviderComponentTypes: ComponentTypeRepresentation[];
-
 };
 
-
-export const KeysProviderTab = ({ components, keyProviderComponentTypes, ...props }: KeysProps) => {
-    console.log("components", components)
-    // console.log("keyz", keys)
-    // console.log("keyz", keyProviderComponentTypes)
+export const KeysProviderTab = ({
+  components,
+  keyProviderComponentTypes,
+  ...props
+}: KeysProps) => {
+  // console.log("components", components)
+  // console.log("keyz", keys)
+  // console.log("keyz", keyProviderComponentTypes)
 
   return (
     <KeysTabInner
-      components={components?.map((key) => {
+      components={components?.map((component) => {
         const provider = keyProviderComponentTypes.find(
-          (component: ComponentTypeRepresentation) =>
-            component.id === key.providerId
+          (componentType: ComponentTypeRepresentation) =>
+            component.providerId === componentType.id
         );
-        return { ...key, providerDescription: provider?.helpText };
+        return { ...component, providerDescription: provider?.helpText };
       })}
       keyProviderComponentTypes={keyProviderComponentTypes}
-    //   keyProviderComponentTypes={keyProviderComponentTypes?.map((key) => {
-    //     const provider = keyProviderComponentTypes.find(
-    //       (key: key) =>
-    //         component.id === key.providerId
-    //     );
-    //     return { ...key, provider: provider?.providerId };
-    //   })}
+      //   keyProviderComponentTypes={keyProviderComponentTypes?.map((key) => {
+      //     const provider = keyProviderComponentTypes.find(
+      //       (key: key) =>
+      //         component.id === key.providerId
+      //     );
+      //     return { ...key, provider: provider?.providerId };
+      //   })}
       {...props}
     />
   );
diff --git a/src/realm-settings/LoginTab.tsx b/src/realm-settings/LoginTab.tsx
index 3aa8fa09d2..45b9c721f7 100644
--- a/src/realm-settings/LoginTab.tsx
+++ b/src/realm-settings/LoginTab.tsx
@@ -6,30 +6,10 @@ import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormPanel } from "../components/scroll-form/FormPanel";
 import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
 
-<<<<<<< HEAD
 type RealmSettingsLoginTabProps = {
   save: (realm: RealmRepresentation) => void;
   realm: RealmRepresentation;
 };
-=======
-export const RealmSettingsLoginTab = () => {
-  const { t } = useTranslation("realm-settings");
-  const [realm, setRealm] = useState<RealmRepresentation>();
-  const handleError = useErrorHandler();
-  const adminClient = useAdminClient();
-  const { realm: realmName } = useRealm();
-  const { addAlert } = useAlerts();
-
-  useEffect(() => {
-    return asyncStateFetch(
-      () => adminClient.realms.findOne({ realm: realmName }),
-      (realm) => {
-        setRealm(realm);
-      },
-      handleError
-    );
-  }, []);
->>>>>>> wip keys
 
 export const RealmSettingsLoginTab = ({
   save,
diff --git a/src/realm-settings/RealmSettingsSection.css b/src/realm-settings/RealmSettingsSection.css
index 329b85ac1b..a6bd54b633 100644
--- a/src/realm-settings/RealmSettingsSection.css
+++ b/src/realm-settings/RealmSettingsSection.css
@@ -20,3 +20,7 @@ div.pf-c-card__body.kc-form-panel__body {
 button#kc-certificate.pf-c-button.pf-m-secondary {
   margin-left: var(--pf-global--spacer--md);
 }
+
+.pf-c-data-list__item-row.test {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx
index e3a40b95b0..ca81241f7f 100644
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@@ -30,6 +30,7 @@ import { KeysListTab } from "./KeysListTab";
 import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { KeysProviderTab } from "./KeysProvidersTab";
+import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -135,6 +136,10 @@ export const RealmSettingsSection = () => {
     ComponentRepresentation[]
   >([]);
 
+  const kpComponentTypes = useServerInfo().componentTypes![
+    "org.keycloak.keys.KeyProvider"
+  ];
+
   useFetch(
     () => adminClient.realms.findOne({ realm: realmName }),
     (realm) => {
@@ -249,7 +254,11 @@ export const RealmSettingsSection = () => {
                   eventKey={1}
                   title={<TabTitleText>{t("providers")}</TabTitleText>}
                 >
-                  {/* <KeysProviderTab /> */}
+                  <KeysProviderTab
+                    components={realmComponents}
+                    realmComponents={realmComponents}
+                    keyProviderComponentTypes={kpComponentTypes}
+                  />
                 </Tab>
               </Tabs>
             </Tab>
diff --git a/src/realm-settings/messages.json b/src/realm-settings/messages.json
index 0c8132169e..c36888fc59 100644
--- a/src/realm-settings/messages.json
+++ b/src/realm-settings/messages.json
@@ -36,8 +36,10 @@
     "providers": "Providers",
     "algorithm": "Algorithm",
     "type": "Type",
+    "name": "Name",
     "kid": "Kid",
     "provider": "Provider",
+    "providerDescription": "Provider description",
     "publicKeys": "Public keys",
     "certificate": "Certificate",
     "userRegistration": "User registration",