diff --git a/src/clients/messages.json b/src/clients/messages.json
index c4c4ecb5a5..71f750000a 100644
--- a/src/clients/messages.json
+++ b/src/clients/messages.json
@@ -9,6 +9,9 @@
     "homeURL": "Home URL",
     "description": "Description",
     "name": "Name",
+    "formatOption": "Format option",
+    "downloadAdaptorTitle": "Download adaptor configs",
+    "details": "Details",
     "clientList": "Client list",
     "clientSettings": "Client details",
     "generalSettings": "General Settings",
diff --git a/src/common-messages.json b/src/common-messages.json
index 437d08b41b..8a9a0618eb 100644
--- a/src/common-messages.json
+++ b/src/common-messages.json
@@ -12,6 +12,7 @@
     "back": "Back",
     "export": "Export",
     "action": "Action",
+    "download": "Download",
     "resourceFile": "Resource file",
     "clearFile": "Clear this file",
     "on": "On",
diff --git a/src/components/download-dialog/DownloadDialog.tsx b/src/components/download-dialog/DownloadDialog.tsx
new file mode 100644
index 0000000000..0ac162ec61
--- /dev/null
+++ b/src/components/download-dialog/DownloadDialog.tsx
@@ -0,0 +1,180 @@
+import React, { useContext, useState, useEffect, ReactElement } from "react";
+import {
+  Alert,
+  AlertVariant,
+  Form,
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+  Stack,
+  StackItem,
+  TextArea,
+} from "@patternfly/react-core";
+import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog";
+import { HttpClientContext } from "../../http-service/HttpClientContext";
+import { RealmContext } from "../realm-context/RealmContext";
+import { HelpItem } from "../help-enabler/HelpItem";
+import { useTranslation } from "react-i18next";
+
+export type DownloadDialogProps = {
+  id: string;
+  protocol?: string;
+};
+
+type DownloadDialogModalProps = DownloadDialogProps & {
+  open: boolean;
+  toggleDialog: () => void;
+};
+
+const serverInfo = [
+  {
+    id: "keycloak-oidc-jboss-subsystem-cli",
+    protocol: "openid-connect",
+    downloadOnly: false,
+    displayType: "Keycloak OIDC JBoss Subsystem CLI",
+    helpText:
+      "CLI script you must edit and apply to your client app server. This type of configuration is useful when you can't or don't want to crack open your WAR file.",
+    filename: "keycloak-oidc-subsystem.cli",
+    mediaType: "text/plain",
+  },
+  {
+    id: "keycloak-oidc-jboss-subsystem",
+    protocol: "openid-connect",
+    downloadOnly: false,
+    displayType: "Keycloak OIDC JBoss Subsystem XML",
+    helpText:
+      "XML snippet you must edit and add to the Keycloak OIDC subsystem on your client app server.  This type of configuration is useful when you can't or don't want to crack open your WAR file.",
+    filename: "keycloak-oidc-subsystem.xml",
+    mediaType: "application/xml",
+  },
+  {
+    id: "keycloak-oidc-keycloak-json",
+    protocol: "openid-connect",
+    downloadOnly: false,
+    displayType: "Keycloak OIDC JSON",
+    helpText:
+      "keycloak.json file used by the Keycloak OIDC client adapter to configure clients.  This must be saved to a keycloak.json file and put in your WEB-INF directory of your WAR file.  You may also want to tweak this file after you download it.",
+    filename: "keycloak.json",
+    mediaType: "application/json",
+  },
+];
+
+export const useDownloadDialog = (
+  props: DownloadDialogProps
+): [() => void, () => ReactElement] => {
+  const [show, setShow] = useState(false);
+
+  function toggleDialog() {
+    setShow((show) => !show);
+  }
+
+  const Dialog = () => (
+    <DownloadDialog {...props} open={show} toggleDialog={toggleDialog} />
+  );
+  return [toggleDialog, Dialog];
+};
+
+export const DownloadDialog = ({
+  id,
+  open,
+  toggleDialog,
+  protocol = "openid-connect",
+}: DownloadDialogModalProps) => {
+  const httpClient = useContext(HttpClientContext)!;
+  const { realm } = useContext(RealmContext);
+  const { t } = useTranslation("common");
+
+  const configFormats = serverInfo; //serverInfo.clientInstallations[protocol];
+  const [selected, setSelected] = useState(
+    configFormats[configFormats.length - 1].id
+  );
+  const [snippet, setSnippet] = useState("");
+  const [openType, setOpenType] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const response = await httpClient.doGet<string>(
+        `admin/${realm}/master/clients/${id}/installation/providers/${selected}`
+      );
+      setSnippet(response.data!);
+    })();
+  }, [selected]);
+  return (
+    <ConfirmDialogModal
+      titleKey={t("clients:downloadAdaptorTitle")}
+      continueButtonLabel={t("download")}
+      onConfirm={() => {}}
+      open={open}
+      toggleDialog={toggleDialog}
+    >
+      <Form>
+        <Stack hasGutter>
+          <StackItem>
+            <Alert
+              id={id}
+              title={t("clients:description")}
+              variant={AlertVariant.info}
+              isInline
+            >
+              {
+                configFormats.find(
+                  (configFormat) => configFormat.id === selected
+                )?.helpText
+              }
+            </Alert>
+          </StackItem>
+          <StackItem>
+            <FormGroup
+              fieldId="type"
+              label={t("clients:formatOption")}
+              labelIcon={<HelpItem item="client.downloadType" />}
+            >
+              <Select
+                id="type"
+                isOpen={openType}
+                onToggle={() => {
+                  setOpenType(!openType);
+                }}
+                variant={SelectVariant.single}
+                value={selected}
+                selections={selected}
+                onSelect={(_, value) => {
+                  setSelected(value as string);
+                  setOpenType(false);
+                }}
+                aria-label="Select Input"
+              >
+                {configFormats.map((configFormat) => (
+                  <SelectOption
+                    key={configFormat.id}
+                    value={configFormat.id}
+                    isSelected={selected === configFormat.id}
+                  >
+                    {configFormat.displayType}
+                  </SelectOption>
+                ))}
+              </Select>
+            </FormGroup>
+          </StackItem>
+          <StackItem isFilled>
+            <FormGroup
+              fieldId="details"
+              label={t("clients:details")}
+              labelIcon={<HelpItem item="client.details" />}
+            >
+              <TextArea
+                id="details"
+                readOnly
+                rows={12}
+                resizeOrientation="vertical"
+                value={snippet}
+                aria-label="text area example"
+              />
+            </FormGroup>
+          </StackItem>
+        </Stack>
+      </Form>
+    </ConfirmDialogModal>
+  );
+};
diff --git a/src/help.json b/src/help.json
index 9456b881fb..2d5194cd4e 100644
--- a/src/help.json
+++ b/src/help.json
@@ -1,6 +1,10 @@
 {
   "help": {
     "storybook": "Sometimes you need some help and it's nice when the app does that",
+    "client": {
+      "downloadType": "",
+      "details": ""
+    },
     "clientScope": {
       "name": "Name of the client scope. Must be unique in the realm. Name should not contain space characters as it is used as value of scope parameter",
       "description": "Description of the client scope",
diff --git a/src/stories/DownloadDialog.stories.tsx b/src/stories/DownloadDialog.stories.tsx
new file mode 100644
index 0000000000..eecceca5a3
--- /dev/null
+++ b/src/stories/DownloadDialog.stories.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+
+import {
+  DownloadDialog,
+  useDownloadDialog,
+} from "../components/download-dialog/DownloadDialog";
+
+export default {
+  title: "Download Dialog",
+  component: DownloadDialog,
+} as Meta;
+
+const Test = () => {
+  const [toggle, Dialog] = useDownloadDialog({
+    id: "58577281-7af7-410c-a085-61ff3040be6d",
+  });
+  return (
+    <>
+      <button id="show" onClick={toggle}>
+        Show
+      </button>
+      <Dialog />
+    </>
+  );
+};
+
+export const Show = () => <Test />;