diff --git a/src/app/Caches/Configuration/CacheConfiguration.tsx b/src/app/Caches/Configuration/CacheConfiguration.tsx
index c8013227d..4f84dcaab 100644
--- a/src/app/Caches/Configuration/CacheConfiguration.tsx
+++ b/src/app/Caches/Configuration/CacheConfiguration.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   Alert, AlertActionLink, AlertVariant, Button,
   Card,
@@ -6,16 +6,32 @@ import {
   ClipboardCopy,
   ClipboardCopyVariant,
   Spinner,
+  Tabs, Tab, TabTitleText
 } from '@patternfly/react-core';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useTranslation } from 'react-i18next';
+import {ConsoleServices} from "@services/ConsoleServices";
+
 
 const CacheConfiguration = (props: {
-  cache: DetailedInfinispanCache | undefined;
+  cache: DetailedInfinispanCache;
 }) => {
   const { t } = useTranslation();
   const encodingDocs = t('brandname.encoding-docs-link');
+  const [yamlConfig, setYamlConfig] = useState('');
+
+  useEffect(() => {
+
+    ConsoleServices.caches().getConfiguration(props.cache.name, 'yaml').then(r => {
+      if (r.isRight()) {
+        setYamlConfig(r.value);
+      } else {
+        setYamlConfig(r.value.message);
+      }
+    })
+  }, []);
+
   if (!props.cache) {
     return (
       <Spinner size={'md'} />
@@ -41,8 +57,8 @@ const CacheConfiguration = (props: {
     );
   };
 
-  return (
-    <Card>
+  const displayConfig = (config:string) =>{
+    return (<Card>
       {displayHeaderAlert()}
       <CardBody>
         <SyntaxHighlighter
@@ -51,13 +67,32 @@ const CacheConfiguration = (props: {
           useInlineStyles={true}
           showLineNumbers={true}
         >
-          {props.cache.configuration.config}
+          {config}
         </SyntaxHighlighter>
         <ClipboardCopy isReadOnly isCode variant={ClipboardCopyVariant.inline}>
-          {props.cache.configuration.config}
+          {config}
         </ClipboardCopy>
       </CardBody>
-    </Card>
+    </Card>)
+  }
+
+  return (
+    // isBox={isBox}
+    <Tabs  defaultActiveKey={0}
+    style={{ backgroundColor: 'white' }}
+    >
+    <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>}>
+      {displayConfig(props.cache?.configuration.config)}
+    </Tab>
+    <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>}>
+      XML
+    </Tab>
+    <Tab eventKey={2} title={<TabTitleText>YML</TabTitleText>}>
+      {displayConfig(yamlConfig)}
+    </Tab>
+    </Tabs>
+
+
   );
 };
 
diff --git a/src/services/cacheService.ts b/src/services/cacheService.ts
index 56aecf5b2..39f678bab 100644
--- a/src/services/cacheService.ts
+++ b/src/services/cacheService.ts
@@ -128,17 +128,7 @@ export class CacheService {
     config: string,
     configType: 'xml' | 'json' | 'yaml'
   ): Promise<ActionResponse> {
-    let contentType = ContentType.YAML;
-    if (configType == 'json') {
-      contentType = ContentType.JSON;
-    } else if (configType == 'xml') {
-      contentType = ContentType.XML;
-    }
-    let customHeaders = new Headers();
-    customHeaders.append(
-      'Content-Type',
-      ContentTypeHeaderMapper.fromContentType(contentType)
-    );
+    let customHeaders = this.createCustomHeader('Content-Type', configType);
 
     const urlCreateCache =
       this.endpoint + '/caches/' + encodeURIComponent(cacheName);
@@ -152,6 +142,21 @@ export class CacheService {
     });
   }
 
+  private createCustomHeader(header:string, configType: "xml" | "json" | "yaml") {
+    let contentType = ContentType.YAML;
+    if (configType == 'json') {
+      contentType = ContentType.JSON;
+    } else if (configType == 'xml') {
+      contentType = ContentType.XML;
+    }
+    let customHeaders = new Headers();
+    customHeaders.append(
+      header,
+      ContentTypeHeaderMapper.fromContentType(contentType)
+    );
+    return customHeaders;
+  }
+
   /**
    * Delete cache by name
    *
@@ -508,18 +513,20 @@ export class CacheService {
    * @param cacheName
    */
   public async getConfiguration(
-    cacheName: string
-  ): Promise<Either<ActionResponse, CacheConfig>> {
+    cacheName: string,
+    configType: 'xml' | 'json' | 'yaml'
+  ): Promise<Either<ActionResponse, string>> {
+
+    let customHeaders = this.createCustomHeader('Accept', configType);
+
     return this.fetchCaller.get(
       this.endpoint +
         '/caches/' +
         encodeURIComponent(cacheName) +
         '?action=config',
-      (data) =>
-        <CacheConfig>{
-          name: cacheName,
-          config: JSON.stringify(data, null, 2),
-        }
+      (text) => text,
+      customHeaders,
+      true
     );
   }
 
@@ -596,5 +603,4 @@ export class CacheService {
       errorMessage: `An error occurred while changing cache ${cacheName} availability.`,
     });
   }
-
 }