diff --git a/README.md b/README.md
index b18e07f..2eba007 100644
--- a/README.md
+++ b/README.md
@@ -6,17 +6,7 @@ In order to access the https://[env].foo.redhat.com in your browser, you have to
 
 To setup the hosts file run following command:
 
-```bash
-npm run patch:hosts
-```
-
-If this command throws an error run it as a `sudo`:
-
-```bash
-sudo npm run patch:hosts
-```
-
-The commands adds these entries to `/etc/hosts`
+Add the below to your `/etc/hosts` file:
 
 ```
 127.0.0.1 prod.foo.redhat.com
@@ -25,6 +15,13 @@ The commands adds these entries to `/etc/hosts`
 127.0.0.1 ci.foo.redhat.com
 ```
 
+## Install react developer tools
+
+A recommended tool to install is react developer tools, which is installed as a plugin for your
+favourite browser.
+
+- [React Developer Tools](https://react.dev/learn/react-developer-tools).
+
 ## Setup and run chrome-service-backend
 
 Clone repositories and use Alejandro's branch:
diff --git a/docs/04-context.md b/docs/04-context.md
index 7eb1bd4..dac4df9 100644
--- a/docs/04-context.md
+++ b/docs/04-context.md
@@ -7,6 +7,9 @@ creation of a context for the micro-frontend.
   towards the ListDomains.
 - Provide the same data information for the different impacted objects.
 
+> Avoid to use context if it evoke a performance because an excess of the
+> render on the frontend.
+
 ## Defining the context
 
 For using a context, we need to define the context (in this case it is defined
@@ -17,78 +20,88 @@ it were required).
 import { createContext } from 'react';
 import { Domain } from './Api';
 
-export interface IAppContext {
+export interface AppContextType {
   domains: Domain[];
   setDomains: (domains: Domain[]) => void;
 }
 
-export const AppContext = createContext<IAppContext>({
-  domains: [],
-  setDomains: (domains: Domain[]) => {
-    throw new Error('Function "setDomains" not implemented: domains=' + domains);
-  },
-});
+export const AppContext = createContext<AppContextType>(undefined);
+
+export const AppContextProvider: React.FC<AppContextProviderProps> = ({ children }) => {
+  const [getter, setter] = useState<T>(undefined);
+
+  return (
+    <AppContext.Provider
+      value={{
+        /** Map the interface to the getter and setter of this component for instance:
+         *   domains: getter,
+         *   setDomains: setter,
+        */
+        },
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+}
 ```
 
 Let's see what we have here:
 
-- IAppContext define an interface with properties to be shared and some
+- `AppContextType` define an interface with properties to be shared and some
   callbacks to update the properties above.
-- The callbacks will use some state associated to a root component, so
-  when we change the state from a deeper component, the view is properly
-  rendered.
-
-We will define the callbacks at `src/AppEntry.tsx`:
+- Create the context for the type `AppContextType`.
+- Define the `AppContextProvider` which map getter and setter, and extend with
+  the `children`.
 
-## Referencing the context in the root component
+## Wrap your application by the context provider
 
 ```typescript
-import React, { useState } from 'react';
+import React from 'react';
 
 // ...
 
 const AppEntry = () => {
-  // Declare the state
-  const [domains, setDomains] = useState<Domain[]>([]);
-  const cbSetDomains = (domains: Domain[]) => {
-    setDomains(domains);
-  };
   return (
     <Provider store={init(...(process.env.NODE_ENV !== 'production' ? [logger] : [])).getStore()}>
       <Router basename={getBaseName(window.location.pathname)}>
-        <AppContext.Provider value={{ domains: domains, setDomains: cbSetDomains }}>
+        <AppContextProvider>
           <App />
-        </AppContext.Provider>
+        </AppContextProvider>
       </Router>
     </Provider>
   );
 };
 ```
 
-As we see the callback is invoking the setter for the state, which raise the
-render mechanism for the view.
-
-See that we inject the domains value and the setter callback into the `value` property
-for the `AppContext.Provider` tag.
+Now we only reference the `AppContextProvider` wrapping our application. The
+setter and getter are configured inside the AppContextProvider, which provide
+a cleaner code.
 
 ## Use the context form other inner components
 
 Using the context from any component nested in our App would be kind of the below:
 
 ```typescript
-const appContext = useContext(AppContext);
+// we get the reference to the context
+const appContext = useContext<AppContextType | undefined>(AppContext);
 
-const domains = appContext.domains;  // Retrieving the value from the context
+// We use a property
+const domains = appContext?.domains;
 
+// We use a setter which will fire a render cycle with the change
 const myEvent = () => {
-  appContext.setDomains(newDomain);  // This will fire from the root component the render
+  appContext?.setDomains(newDomains);
 };
 ```
 
-What is happening here?
-- I get the reference to the context.
-- I read a value from the context.
-- I set a value into the context by using the injected callback when we
-  used the context into the root component; recall that it is calling a setDomain state,
-  which is the one that trigger the render of the view.
+> Remember we mapped the set... function returned by useState hook
+> for this callback, so we are calling a change of the state for
+> the context. So it is calling a setDomain state, which is the one
+> that trigger the render of the view.
+
+## Final considerations
 
+Similar approach could be followed when we want to define a context closer to some component,
+such as the wizard page (not using this approach currently), but instead of wrapping the application
+we would wrap an inner component.
diff --git a/src/AppContext.tsx b/src/AppContext.tsx
index 7e9291d..68f742e 100644
--- a/src/AppContext.tsx
+++ b/src/AppContext.tsx
@@ -1,30 +1,44 @@
-import { createContext } from 'react';
+import { ReactNode, createContext, useState } from 'react';
 import { Domain } from './Api';
 import { VerifyState } from './Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry';
+import React from 'react';
 
 /**
  * It represents the application context so common events and properties
  * are shared for many components, making their values accessible.
  * @public
  */
-export interface IAppContext {
+export interface AppContextType {
   /** Represent the current list of domains to be displayed in the listDomains view. */
   domains: Domain[];
   /** Callback to set the value of `domains`. */
   setDomains: (domains: Domain[]) => void;
+  /** Update an existing domain in domains */
+  updateDomain: (domain: Domain) => void;
+  /** Delete the domain identified by id */
+  deleteDomain: (id: string) => void;
+  /** Get the domain identified by id */
+  getDomain: (id: string) => Domain | undefined;
+  /** The current editing domain */
+  editing?: Domain;
+  /** Set the current editing domain */
+  setEditing: (value?: Domain) => void;
+
   /** Encapsulates the context related with the wizard. */
   wizard: {
     /** Retrieve the current token, required to register a domain. */
-    getToken: () => string;
+    token: string;
     /** Set the value of the token. */
     setToken: (value: string) => void;
+
     /** Retrieve the value of the registered status which is updated once
      * the user has registered the domain by using ipa-hcc tool. */
-    getRegisteredStatus: () => VerifyState;
+    registeredStatus: VerifyState;
     /** Setter for the registered status. */
     setRegisteredStatus: (value: VerifyState) => void;
+
     /** Get the ephemeral domain state that manage the wizard. */
-    getDomain: () => Domain;
+    domain: Domain;
     /** Set the ephemeral domain information. */
     setDomain: (value: Domain) => void;
   };
@@ -34,29 +48,98 @@ export interface IAppContext {
  * Represent the application context.
  * @public
  */
-export const AppContext = createContext<IAppContext>({
-  domains: [],
-  setDomains: (domains: Domain[]) => {
-    throw new Error('Function "setDomains" not implemented: domains=' + domains);
-  },
-  wizard: {
-    getToken: (): string => {
-      return '';
-    },
-    setToken: (value: string) => {
-      throw new Error('Function "setToken" not implemented: value=' + value);
-    },
-    getRegisteredStatus: (): VerifyState => {
-      return 'initial';
-    },
-    setRegisteredStatus: (value: VerifyState) => {
-      throw new Error('Function "setRegisteredStatus" not implemented: value=' + value);
-    },
-    getDomain: (): Domain => {
-      return {} as Domain;
-    },
-    setDomain: (value: Domain) => {
-      throw new Error('Function "setDomain" not implemented: value=' + value);
-    },
-  },
-});
+export const AppContext = createContext<AppContextType | undefined>(undefined);
+
+/**
+ * The properties accepted by the AppContextProvider.
+ */
+interface AppContextProviderProps {
+  /** The children components. */
+  children: ReactNode;
+}
+
+/**
+ * Define the provider for the application context.
+ * @param param0 The children components.
+ * @returns the application context.
+ */
+export const AppContextProvider: React.FC<AppContextProviderProps> = ({ children }) => {
+  const [domains, _setDomains] = useState<Domain[]>([]);
+  const [editing, _setEditing] = useState<Domain>();
+
+  const [wizardToken, _setWizardSetToken] = useState<string>();
+  const [wizardRegisteredStatus, _setWizardRegisteredStatus] = useState<VerifyState>('initial');
+  const [wizardDomain, _setWizardDomain] = useState<Domain>();
+
+  /**
+   * Update a domain into the list of domains kept into the application context
+   * if it exists.
+   * @param domain The domain to be updated into the context.
+   */
+  const _updateDomain = (domain: Domain) => {
+    const newDomains: Domain[] = {} as Domain[];
+    for (const idx in domains) {
+      if (domains[idx].domain_id === domain.domain_id) {
+        newDomains[idx] = domain;
+      } else {
+        newDomains[idx] = domains[idx];
+      }
+    }
+    _setDomains(newDomains);
+  };
+
+  /**
+   * Delete a domain from the application context if it exists, which is
+   * identified by the its id.
+   * @param id the domain identifier.
+   */
+  const _deleteDomain = (id: string) => {
+    const newDomains: Domain[] = {} as Domain[];
+    for (const idx in domains) {
+      if (domains[idx].domain_id !== id) {
+        newDomains[idx] = domains[idx];
+      }
+    }
+    _setDomains(newDomains);
+  };
+
+  /**
+   * Retrieve a domain from the application context if it exists.
+   * @param id the domain identifier.
+   * @returns The domain that exists into the application context
+   * or undefined if it is not found.
+   */
+  const _getDomain = (id: string): Domain | undefined => {
+    if (id === '') return undefined;
+    for (const idx in domains) {
+      if (domains[idx].domain_id === id) {
+        return domains[idx];
+      }
+    }
+    return undefined;
+  };
+
+  return (
+    <AppContext.Provider
+      value={{
+        domains: domains,
+        setDomains: _setDomains,
+        updateDomain: _updateDomain,
+        deleteDomain: _deleteDomain,
+        getDomain: _getDomain,
+        editing: editing,
+        setEditing: _setEditing,
+        wizard: {
+          token: wizardToken || '',
+          setToken: _setWizardSetToken,
+          registeredStatus: wizardRegisteredStatus,
+          setRegisteredStatus: _setWizardRegisteredStatus,
+          domain: wizardDomain || ({} as Domain),
+          setDomain: _setWizardDomain,
+        },
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
diff --git a/src/AppEntry.tsx b/src/AppEntry.tsx
index 557347b..dba22de 100644
--- a/src/AppEntry.tsx
+++ b/src/AppEntry.tsx
@@ -1,61 +1,19 @@
-import React, { useContext, useState } from 'react';
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { init } from './store';
 import App from './App';
 import { getBaseName } from '@redhat-cloud-services/frontend-components-utilities/helpers';
 import logger from 'redux-logger';
-import { AppContext } from './AppContext';
-import { Domain } from './Api';
-import { VerifyState } from './Routes/WizardPage/Components/VerifyRegistry/VerifyRegistry';
+import { AppContextProvider } from './AppContext';
 
 const AppEntry = () => {
-  const appContext = useContext(AppContext);
-  const [domains, setDomains] = useState<Domain[]>([]);
-  const [wizardToken, setWizardToken] = useState<string>('');
-  const [wizardDomain, setWizardDomain] = useState<Domain>({} as Domain);
-  const [wizardRegisterStatus, setWizardRegisterStatus] = useState<VerifyState>('initial');
-  const cbSetDomains = (domains: Domain[]) => {
-    appContext.domains = domains;
-    setDomains(domains);
-  };
-  const cbGetWizardToken = (): string => {
-    return wizardToken;
-  };
-  const cbSetWizardToken = (value: string) => {
-    setWizardToken(value);
-  };
-  const cbGetWizardDomain = (): Domain => {
-    return wizardDomain;
-  };
-  const cbSetWizardDomain = (value: Domain) => {
-    setWizardDomain(value);
-  };
-  const cbGetRegisterStatus = (): VerifyState => {
-    return wizardRegisterStatus;
-  };
-  const cbSetRegisterStatus = (value: VerifyState) => {
-    setWizardRegisterStatus(value);
-  };
   return (
     <Provider store={init(...(process.env.NODE_ENV !== 'production' ? [logger] : [])).getStore()}>
       <Router basename={getBaseName(window.location.pathname)}>
-        <AppContext.Provider
-          value={{
-            domains: domains,
-            setDomains: cbSetDomains,
-            wizard: {
-              getToken: cbGetWizardToken,
-              setToken: cbSetWizardToken,
-              getRegisteredStatus: cbGetRegisterStatus,
-              setRegisteredStatus: cbSetRegisterStatus,
-              getDomain: cbGetWizardDomain,
-              setDomain: cbSetWizardDomain,
-            },
-          }}
-        >
+        <AppContextProvider>
           <App />
-        </AppContext.Provider>
+        </AppContextProvider>
       </Router>
     </Provider>
   );
diff --git a/src/Components/DomainList/DomainList.tsx b/src/Components/DomainList/DomainList.tsx
index 67a19f2..5eecdbc 100644
--- a/src/Components/DomainList/DomainList.tsx
+++ b/src/Components/DomainList/DomainList.tsx
@@ -4,8 +4,9 @@ import { Fragment, useContext, useState } from 'react';
 import React from 'react';
 
 import { Domain, DomainType, ResourcesApiFactory } from '../../Api/api';
-import { Link } from 'react-router-dom';
-import { AppContext, IAppContext } from '../../AppContext';
+import { useNavigate } from 'react-router-dom';
+import { AppContext, AppContextType } from '../../AppContext';
+import { Button } from '@patternfly/react-core';
 
 export interface IColumnType<T> {
   key: string;
@@ -94,7 +95,8 @@ export const DomainList = () => {
   const base_url = '/api/idmsvc/v1';
   const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
 
-  const context = useContext<IAppContext>(AppContext);
+  const context = useContext<AppContextType | undefined>(AppContext);
+  const navigate = useNavigate();
 
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
@@ -104,7 +106,7 @@ export const DomainList = () => {
   // Sort direction of the currently sorted column
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
 
-  const [domains, setDomains] = useState<Domain[]>(context.domains);
+  const [domains, setDomains] = useState<Domain[]>(context?.domains || ([] as Domain[]));
   const enabledText = 'Enabled';
   const disabledText = 'Disabled';
 
@@ -200,6 +202,13 @@ export const DomainList = () => {
   // We shouldn't store the list of data in state because we don't want to have to sync that with props.
   activeSortIndex !== null && domains.sort(createCompareRows(activeSortIndex, activeSortDirection));
 
+  const onShowDetails = (domain: Domain | undefined) => {
+    if (domain !== undefined) {
+      context?.setEditing(domain);
+      navigate('/details/' + domain?.domain_id);
+    }
+  };
+
   return (
     <>
       <TableComposable>
@@ -223,7 +232,14 @@ export const DomainList = () => {
               <>
                 <Tr key={domain.domain_id}>
                   <Td>
-                    <Link to="/domains/{domain.domain_id}">{domain.title}</Link>
+                    <Button
+                      variant="link"
+                      onClick={() => {
+                        onShowDetails(domain);
+                      }}
+                    >
+                      {domain.title}
+                    </Button>
                   </Td>
                   <Td>
                     <DomainListFieldType domain_type={domain.domain_type} />
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 18672a4..b5c2b94 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -1,8 +1,8 @@
-import React, { Suspense, lazy } from 'react';
+import React, { lazy } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { Bullseye, Spinner } from '@patternfly/react-core';
 import WizardPage from './Routes/WizardPage/WizardPage';
+import DetailPage from './Routes/DetailPage/DetailPage';
 
 const DefaultPage = lazy(() => import(/* webpackChunkName: "DefaultPage" */ './Routes/DefaultPage/DefaultPage'));
 const OopsPage = lazy(() => import(/* webpackChunkName: "OopsPage" */ './Routes/OopsPage/OopsPage'));
@@ -17,22 +17,15 @@ const NoPermissionsPage = lazy(() => import(/* webpackChunkName: "NoPermissionsP
  *      component - component to be rendered when a route has been chosen.
  */
 const DomainRegistryRoutes = () => (
-  <Suspense
-    fallback={
-      <Bullseye>
-        <Spinner />
-      </Bullseye>
-    }
-  >
-    <Routes>
-      <Route path="/domains" Component={DefaultPage} />
-      <Route path="/domains/wizard" Component={WizardPage} />
-      <Route path="/oops" Component={OopsPage} />
-      <Route path="/no-permissions" Component={NoPermissionsPage} />
-      {/* Finally, catch all unmatched routes */}
-      <Route path="*" element={<Navigate to="/domains" replace />} />
-    </Routes>
-  </Suspense>
+  <Routes>
+    <Route path="/domains" Component={DefaultPage} />
+    <Route path="/details/:domain_id" Component={DetailPage} />
+    <Route path="/domains/wizard" Component={WizardPage} />
+    <Route path="/oops" Component={OopsPage} />
+    <Route path="/no-permissions" Component={NoPermissionsPage} />
+    {/* Finally, catch all unmatched routes */}
+    <Route path="*" element={<Navigate to="/domains" replace />} />
+  </Routes>
 );
 
 export default DomainRegistryRoutes;
diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx
index 67b7347..cc4e84f 100644
--- a/src/Routes/DefaultPage/DefaultPage.tsx
+++ b/src/Routes/DefaultPage/DefaultPage.tsx
@@ -10,6 +10,7 @@ import {
   CardBody,
   EmptyState,
   EmptyStateBody,
+  EmptyStateIcon,
   EmptyStateVariant,
   Flex,
   FlexItem,
@@ -27,24 +28,22 @@ import './DefaultPage.scss';
 import Section from '@redhat-cloud-services/frontend-components/Section';
 import { Domain, ResourcesApiFactory } from '../../Api/api';
 import { DomainList } from '../../Components/DomainList/DomainList';
-import { AppContext, IAppContext } from '../../AppContext';
+import { AppContext, AppContextType } from '../../AppContext';
 
 const Header = () => {
   const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
   const title = 'Directory and Domain Services';
 
   return (
-    <>
-      <PageHeader>
-        <PageHeaderTitle title={title} />
-        <p>
-          Manage registered identity domains to leverage host access controls from your existing identity and access management.{' '}
-          <Button component="a" target="_blank" variant="link" isInline icon={<ExternalLinkAltIcon />} iconPosition="right" href={linkLearnMoreAbout}>
-            Learn more about the domain registry.
-          </Button>
-        </p>
-      </PageHeader>
-    </>
+    <PageHeader>
+      <PageHeaderTitle title={title} />
+      <p>
+        Manage registered identity domains to leverage host access controls from your existing identity and access management.{' '}
+        <Button component="a" target="_blank" variant="link" isInline icon={<ExternalLinkAltIcon />} iconPosition="right" href={linkLearnMoreAbout}>
+          Learn more about the domain registry.
+        </Button>
+      </p>
+    </PageHeader>
   );
 };
 
@@ -52,13 +51,15 @@ const EmptyContent = () => {
   // FIXME Update this link in the future
   const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
   const navigate = useNavigate();
-  const appContext = useContext<IAppContext>(AppContext);
+  const appContext = useContext<AppContextType | undefined>(AppContext);
 
   const handleOpenWizard = () => {
-    appContext.wizard.setDomain({ domain_id: '', title: '', description: '' } as Domain);
-    appContext.wizard.setToken('');
-    appContext.wizard.setRegisteredStatus('initial');
-    navigate('/domains/wizard', { replace: true });
+    if (appContext !== undefined) {
+      appContext.wizard.setDomain({ domain_id: '', title: '', description: '' } as Domain);
+      appContext.wizard.setToken('');
+      appContext.wizard.setRegisteredStatus('initial');
+      navigate('/domains/wizard', { replace: true });
+    }
   };
 
   return (
@@ -66,7 +67,7 @@ const EmptyContent = () => {
       <Section>
         <Bullseye>
           <EmptyState variant={EmptyStateVariant.full}>
-            <RegistryIcon className="pf-u-color-200" size="xl" />
+            <EmptyStateIcon icon={RegistryIcon} />
             <Title headingLevel="h2" size="lg" className="pf-u-pt-sm">
               No identity domains registered
             </Title>
@@ -117,8 +118,7 @@ const ListContent = () => {
 
   // TODO Extract this code in a hook
   useEffect(() => {
-    // eslint-disable-next-line prefer-const
-    let local_domains: Domain[] = [];
+    const local_domains: Domain[] = [];
     resources_api
       .listDomains(undefined, offset, perPage, undefined)
       .then((res) => {
@@ -129,7 +129,7 @@ const ListContent = () => {
             .then((res_domain) => {
               local_domains[count++] = res_domain.data;
               if (res.data.data.length == local_domains.length) {
-                appContext.setDomains(local_domains);
+                appContext?.setDomains(local_domains);
                 const newOffset = Math.floor((offset + perPage - 1) / perPage) * perPage;
                 const newPage = newOffset / perPage;
                 setItemCount(res.data.meta.count);
@@ -152,10 +152,12 @@ const ListContent = () => {
   }, [page, perPage, offset]);
 
   const handleOpenWizard = () => {
-    appContext.wizard.setDomain({ domain_id: '', title: '', description: '' } as Domain);
-    appContext.wizard.setRegisteredStatus('initial');
-    appContext.wizard.setToken('');
-    navigate('/domains/wizard', { replace: true });
+    if (appContext !== undefined) {
+      appContext.wizard.setDomain({ domain_id: '', title: '', description: '' } as Domain);
+      appContext.wizard.setRegisteredStatus('initial');
+      appContext.wizard.setToken('');
+      navigate('/domains/wizard', { replace: true });
+    }
   };
 
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
@@ -220,7 +222,7 @@ const DefaultPage = () => {
 
   // States
   const [page, setPage] = useState<number>(0);
-  const [itemCount, setItemCount] = useState<number>(0);
+  const [itemCount, setItemCount] = useState<number>(appContext?.domains.length || -1);
   const [perPage] = useState<number>(10);
   const [offset, setOffset] = useState<number>(0);
 
@@ -228,8 +230,7 @@ const DefaultPage = () => {
 
   // TODO Extract in a hook
   useEffect(() => {
-    // eslint-disable-next-line prefer-const
-    let local_domains: Domain[] = [];
+    const local_domains: Domain[] = [];
     resources_api
       .listDomains(undefined, offset, perPage, undefined)
       .then((res) => {
@@ -240,7 +241,7 @@ const DefaultPage = () => {
             .then((res_domain) => {
               local_domains[count++] = res_domain.data;
               if (res.data.data.length == local_domains.length) {
-                appContext.setDomains(local_domains);
+                appContext?.setDomains(local_domains);
                 const newOffset = Math.floor((offset + perPage - 1) / perPage) * perPage;
                 const newPage = newOffset / perPage;
                 setItemCount(res.data.meta.count);
@@ -260,7 +261,7 @@ const DefaultPage = () => {
     return () => {
       // Finalizer
     };
-  }, [page, perPage, offset]);
+  }, []);
 
   const listContent = (
     <>
@@ -276,7 +277,8 @@ const DefaultPage = () => {
     </>
   );
 
-  const content = itemCount == 0 ? emptyContent : listContent;
+  // TODO Use similar logic to display a Spinner icon
+  const content = itemCount <= 0 ? emptyContent : listContent;
   return content;
 };
 
diff --git a/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.test.tsx b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.test.tsx
new file mode 100644
index 0000000..5cf9745
--- /dev/null
+++ b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+// import { DetailGeneral } from './DetailGeneral';
+// import { AppContextProvider } from '../../../../AppContext';
+
+test('expect sample-component to render children', () => {
+  render(<></>);
+  // render(
+  //   <AppContextProvider>
+  //     <DetailGeneral />
+  //   </AppContextProvider>
+  // );
+  // expect(screen.getByRole('heading')).toHaveTextContent('Name');
+  // expect(screen.getByRole('heading')).toHaveTextContent('Location');
+});
diff --git a/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx
new file mode 100644
index 0000000..4c7e357
--- /dev/null
+++ b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx
@@ -0,0 +1,323 @@
+import {
+  Button,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Icon,
+  Modal,
+  ModalVariant,
+  Switch,
+  Text,
+  TextArea,
+  TextInput,
+  Tooltip,
+} from '@patternfly/react-core';
+import React from 'react';
+import { useState } from 'react';
+import { Domain, ResourcesApiFactory } from '../../../../Api';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+
+interface DetailGeneralProps {
+  domain?: Domain;
+  onShowServerTab?: () => void;
+  onChange?: (domain: Domain) => void;
+}
+
+export const DetailGeneral = (props: DetailGeneralProps) => {
+  const domain = props.domain;
+  if (domain === undefined) {
+    return <></>;
+  }
+
+  const base_url = '/api/idmsvc/v1';
+  const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
+
+  // States
+  const [autoJoin, setAutoJoin] = useState<boolean | undefined>(domain.auto_enrollment_enabled);
+  const [title, setTitle] = useState<string>(domain.title || '');
+  const [description, setDescription] = useState<string>(domain.description || '');
+
+  const [editTitle, setEditTitle] = useState<string>(domain.title || '');
+  const [editDescription, setEditDescription] = useState<string>(domain.description || '');
+
+  const [isTitleModalOpen, setIsTitleModalOpen] = useState<boolean>(false);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState<boolean>(false);
+
+  // Control handlers
+  const handleSaveTitleButton = () => {
+    console.log('Save Title button pressed');
+    if (domain.domain_id) {
+      resources_api
+        .updateDomainUser(domain.domain_id, {
+          title: editTitle,
+        })
+        .then((response) => {
+          if (response.status == 200) {
+            setTitle(response.data.title || '');
+            if (props.onChange !== undefined) props.onChange({ ...domain, title: response.data.title });
+          } else {
+            // TODO show-up notification with error message
+          }
+        })
+        .catch((error) => {
+          // TODO show-up notification with error message
+          console.log('error at handleSaveTitleButton: ' + error);
+        });
+    }
+    setIsTitleModalOpen(false);
+  };
+
+  const handleCancelTitleButton = () => {
+    console.log('Cancel Title button pressed');
+    setIsTitleModalOpen(false);
+  };
+
+  const handleSaveDescriptionButton = () => {
+    console.log('Save Description button pressed');
+    if (domain.domain_id) {
+      resources_api
+        .updateDomainUser(domain.domain_id, {
+          description: editDescription,
+        })
+        .then((response) => {
+          if (response.status == 200) {
+            setDescription(response.data.description || '');
+            if (props.onChange !== undefined) props.onChange({ ...domain, description: response.data.description });
+          } else {
+            // TODO show-up notification with error message
+          }
+        })
+        .catch((error) => {
+          // TODO show-up notification with error message
+          console.log('error at handleSaveDescriptionButton: ' + error);
+        });
+    }
+    setIsDescriptionModalOpen(false);
+  };
+
+  const handleCancelDescriptionButton = () => {
+    console.log('Cancel Description button pressed');
+    setIsDescriptionModalOpen(false);
+  };
+
+  const handleAutoJoin = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+    console.log('toggled auto-join enable/disable');
+    if (domain.domain_id) {
+      resources_api
+        .updateDomainUser(domain.domain_id, {
+          auto_enrollment_enabled: !autoJoin,
+        })
+        .then((response) => {
+          if (response.status == 200) {
+            setAutoJoin(response.data.auto_enrollment_enabled);
+            if (props.onChange !== undefined) props.onChange({ ...domain, auto_enrollment_enabled: response.data.auto_enrollment_enabled });
+          } else {
+            // TODO show-up notification with error message
+          }
+        })
+        .catch((error) => {
+          // TODO show-up notification with error message
+          console.log('error onClose: ' + error);
+        });
+    }
+  };
+
+  return (
+    <>
+      <DescriptionList
+        isHorizontal
+        horizontalTermWidthModifier={{
+          default: '12ch',
+          sm: '15ch',
+          md: '20ch',
+          lg: '24ch',
+          xl: '28ch',
+          '2xl': '20ch',
+        }}
+      >
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            Identity domain type
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'Identity domain type'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>Red Hat IdM</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            Kerberos realm
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'Kerberos realm'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>{domain?.['rhel-idm']?.realm_name}</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            Display name
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'Display name'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>
+            {title}{' '}
+            <Button
+              variant="plain"
+              onClick={() => {
+                setEditTitle(title);
+                setIsTitleModalOpen(true);
+                return;
+              }}
+            >
+              <Icon>
+                <PencilAltIcon />
+              </Icon>
+            </Button>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm className="pf-u-align-text-top">
+            <Text>
+              Description
+              <Icon className="pf-u-ml-xs">
+                <Tooltip content={'Description'}>
+                  <OutlinedQuestionCircleIcon />
+                </Tooltip>
+              </Icon>
+            </Text>
+          </DescriptionListTerm>
+          <DescriptionListDescription className="pf-u-text-wrap">
+            <span style={{ whiteSpace: 'pre-line' }}>{description} </span>
+            <Button
+              className="pf-global--primary-color--100"
+              variant="link"
+              onClick={() => {
+                setEditDescription(description);
+                setIsDescriptionModalOpen(true);
+              }}
+            >
+              <Icon>
+                <PencilAltIcon />
+              </Icon>
+            </Button>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            Red Hat IdM servers
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'Red Hat IdM servers'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button
+              isInline
+              className="pf-global--primary-color--100"
+              variant="link"
+              onClick={() => {
+                props.onShowServerTab && props.onShowServerTab();
+              }}
+            >
+              {domain?.['rhel-idm']?.servers.length}
+            </Button>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            UUID
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'UUID'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>{domain?.domain_id}</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            Domain auto-join on launch
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'Domain auto-join on launch'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>
+            <Switch hasCheckIcon={true} label="Enabled" labelOff="Disabled" isChecked={autoJoin} onChange={handleAutoJoin} />
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>
+            Certificate Authority
+            <Icon className="pf-u-ml-xs">
+              <Tooltip content={'Certificate Authority'}>
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </Icon>
+          </DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button
+              isInline
+              variant="link"
+              onClick={() => {
+                // TODO Add changes when the API endpoint is implemented
+                console.warn('not implemented');
+                new Error('not implemented');
+                return;
+              }}
+            >
+              <Icon>
+                <DownloadIcon />
+              </Icon>{' '}
+              Download certificate
+            </Button>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      </DescriptionList>
+      <Modal
+        variant={ModalVariant.small}
+        title="Edit display name"
+        isOpen={isTitleModalOpen}
+        onClose={handleCancelTitleButton}
+        actions={[
+          <Button key="save" variant="primary" isDisabled={title == editTitle} onClick={handleSaveTitleButton}>
+            Save
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleCancelTitleButton}>
+            Cancel
+          </Button>,
+        ]}
+      >
+        <TextInput value={editTitle} type="text" onChange={(value) => setEditTitle(value)} />
+      </Modal>
+      <Modal
+        variant={ModalVariant.small}
+        title="Edit description"
+        isOpen={isDescriptionModalOpen}
+        onClose={handleCancelDescriptionButton}
+        actions={[
+          <Button key="save" variant="primary" isDisabled={description == editDescription} onClick={handleSaveDescriptionButton}>
+            Save
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleCancelDescriptionButton}>
+            Cancel
+          </Button>,
+        ]}
+      >
+        <TextArea autoResize resizeOrientation="vertical" value={editDescription} onChange={(value) => setEditDescription(value)} />
+      </Modal>
+    </>
+  );
+};
diff --git a/src/Routes/DetailPage/Components/DetailServers/DetailServers.test.tsx b/src/Routes/DetailPage/Components/DetailServers/DetailServers.test.tsx
new file mode 100644
index 0000000..36342aa
--- /dev/null
+++ b/src/Routes/DetailPage/Components/DetailServers/DetailServers.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+// import { DetailServers } from './DetailServers';
+
+test('expect sample-component to render children', () => {
+  render(<></>);
+  // expect(screen.getByRole('heading')).toHaveTextContent('Name');
+  // expect(screen.getByRole('heading')).toHaveTextContent('Location');
+});
diff --git a/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
new file mode 100644
index 0000000..8ab09f9
--- /dev/null
+++ b/src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx
@@ -0,0 +1,132 @@
+import { Flex, FlexItem, Stack, StackItem, TextInputGroupUtilities } from '@patternfly/react-core';
+import React from 'react';
+import { Domain, DomainIpaServer } from '../../../../Api';
+import { TableComposable, Tbody, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
+
+interface DetailServersProps {
+  domain?: Domain;
+}
+
+/**
+ * Since OnSort specifies sorted columns by index, we need sortable values
+ * for our object by column index.
+ * @param server the domain
+ * @returns an array with the indexable fields for comparing.
+ */
+const getSortableRowValues = (server: DomainIpaServer): string[] => {
+  const { fqdn, location, hcc_enrollment_server } = server;
+  const hcc_enrollment_server_label = hcc_enrollment_server === true ? 'Yes' : 'No';
+  return [fqdn, location || '', hcc_enrollment_server_label];
+};
+
+type fnCompareRows = (a: DomainIpaServer, b: DomainIpaServer) => number;
+
+/**
+ * Create an arrow function to compare rows when sorting the table
+ * content for the list of domains.
+ * @param activeSortIndex the index for the sorting column.
+ * @param activeSortDirection the direction for sorting the rows.
+ * @returns a lambda function that sort data by the selected criteria.
+ */
+function createCompareRows(activeSortIndex: number, activeSortDirection: 'asc' | 'desc' | undefined): fnCompareRows {
+  return (a: DomainIpaServer, b: DomainIpaServer) => {
+    const aValue = getSortableRowValues(a)[activeSortIndex];
+    const bValue = getSortableRowValues(b)[activeSortIndex];
+    if (aValue === bValue) {
+      return 0;
+    }
+    if (typeof aValue === 'undefined') {
+      if (activeSortDirection === 'asc') {
+        return -1;
+      }
+      return +1;
+    }
+    if (typeof bValue === 'undefined') {
+      if (activeSortDirection === 'asc') {
+        return +1;
+      }
+      return -1;
+    }
+
+    if (typeof aValue === 'string') {
+      // String sort
+      if (activeSortDirection === 'asc') {
+        return (aValue as string).localeCompare(bValue as string);
+      }
+      return (bValue as string).localeCompare(aValue as string);
+    }
+    return 0;
+  };
+}
+
+export const DetailServers = (props: DetailServersProps) => {
+  // const context = useContext(AppContext);
+  const domain = props.domain;
+  if (domain === undefined) {
+    return <></>;
+  }
+
+  const servers = domain['rhel-idm']?.servers;
+  if (servers === undefined) {
+    return <></>;
+  }
+
+  // Index of the currently sorted column
+  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
+  // as the identifier of the sorted column. See the "Compound expandable" example.
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number>(-1);
+  // Sort direction of the currently sorted column
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
+
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection,
+      defaultDirection: 'asc', // starting sort direction when first sorting a column. Defaults to 'asc'
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex,
+  });
+
+  // Note that we perform the sort as part of the component's render logic and not in onSort.
+  // We shouldn't store the list of data in state because we don't want to have to sync that with props.
+  activeSortIndex !== null && servers.sort(createCompareRows(activeSortIndex, activeSortDirection));
+
+  // FIXME Is subscription_manager_id unique?
+  return (
+    <>
+      <Stack>
+        <StackItem>
+          <Flex>
+            <FlexItem>
+              <TextInputGroupUtilities></TextInputGroupUtilities>
+            </FlexItem>
+          </Flex>
+        </StackItem>
+        <StackItem>
+          <TableComposable aria-label="Simple table" variant="compact" borders={true} className="pt-u-width-100">
+            <Thead>
+              <Tr>
+                <Th sort={getSortParams(0)}>Name</Th>
+                <Th sort={getSortParams(1)}>Location</Th>
+                <Th sort={getSortParams(2)}>HCC Enrollment</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {servers.map((server) => (
+                <Tr key={server.subscription_manager_id}>
+                  <Th>{server.fqdn}</Th>
+                  <Th>{server.location}</Th>
+                  <Th>{server.hcc_enrollment_server ? 'Yes' : 'No'}</Th>
+                </Tr>
+              ))}
+            </Tbody>
+          </TableComposable>
+        </StackItem>
+      </Stack>
+    </>
+  );
+};
diff --git a/src/Routes/DetailPage/Components/FilterField/filter-field.tsx b/src/Routes/DetailPage/Components/FilterField/filter-field.tsx
new file mode 100644
index 0000000..9f726e9
--- /dev/null
+++ b/src/Routes/DetailPage/Components/FilterField/filter-field.tsx
@@ -0,0 +1,79 @@
+import { Button, Dropdown, DropdownItem, DropdownToggle, InputGroup, TextInput } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+/** Define the values for the dropdown component. */
+type FilterType = 'Name' | 'Location';
+
+/** Define the allowed properties for InputFilterServer component. */
+interface InputFilterServerProps {
+  /** Indicate the column to filter if any. */
+  column?: FilterType;
+  /** Indicate the value to filter for the selected column. */
+  value?: string;
+  /** Event to communicate a state change in the component. */
+  onChange?: (column: string, value: string) => void;
+}
+
+/** Component to let the user select the column to filter and the content to filter the table for. */
+export const InputFilterServer = (props: InputFilterServerProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [value, setValue] = useState<string>(props.value || '');
+  const [filter, setFilter] = useState<FilterType>(props.column || 'Name');
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    console.info('event.target.value=' + event?.target);
+    setIsOpen(false);
+  };
+
+  const dropdownItems = [
+    <DropdownItem
+      key="Name"
+      value="Name"
+      component="button"
+      onClick={() => {
+        setFilter('Name');
+      }}
+    >
+      Name
+    </DropdownItem>,
+    <DropdownItem
+      key="Location"
+      value="Location"
+      component="button"
+      onClick={() => {
+        setFilter('Location');
+      }}
+    >
+      Location
+    </DropdownItem>,
+  ];
+
+  const onChange = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+    setValue(value);
+  };
+
+  return (
+    <>
+      <InputGroup>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={
+            <DropdownToggle onToggle={onToggle} icon={<FilterIcon />}>
+              {filter}
+            </DropdownToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={dropdownItems}
+        />
+        <TextInput id="input-filter-dropdown" aria-label="input with dropdown and button" value={value} onChange={onChange} />
+        <Button id="input-filter-button" variant="control" icon={<SearchIcon />} />
+      </InputGroup>
+    </>
+  );
+};
diff --git a/src/Routes/DetailPage/DetailPage.scss b/src/Routes/DetailPage/DetailPage.scss
new file mode 100644
index 0000000..acd9576
--- /dev/null
+++ b/src/Routes/DetailPage/DetailPage.scss
@@ -0,0 +1 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
diff --git a/src/Routes/DetailPage/DetailPage.tsx b/src/Routes/DetailPage/DetailPage.tsx
new file mode 100644
index 0000000..af547b2
--- /dev/null
+++ b/src/Routes/DetailPage/DetailPage.tsx
@@ -0,0 +1,173 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import React, { useContext, useEffect, useState } from 'react';
+
+import {
+  Card,
+  CardBody,
+  Dropdown,
+  DropdownItem,
+  Flex,
+  FlexItem,
+  KebabToggle,
+  Page,
+  PageSection,
+  Tab,
+  TabTitleText,
+  Tabs,
+} from '@patternfly/react-core';
+import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
+
+import './DetailPage.scss';
+import { Domain, ResourcesApiFactory } from '../../Api/api';
+import { AppContext, AppContextType } from '../../AppContext';
+import { DetailGeneral } from './Components/DetailGeneral/DetailGeneral';
+import { DetailServers } from './Components/DetailServers/DetailServers';
+
+/**
+ * It represents the detail page to show the information about a
+ * registered domain.
+ * @see https://stackoverflow.com/questions/75522048/react-how-to-access-urls-parameters
+ * @see https://reactrouter.com/en/main/hooks/use-params
+ */
+const DetailPage = () => {
+  const appContext = useContext<AppContextType | undefined>(AppContext);
+  const base_url = '/api/idmsvc/v1';
+  const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
+  const navigate = useNavigate();
+
+  // Params
+  const { domain_id } = useParams();
+
+  // States
+  const [domain, setDomain] = useState<Domain | undefined>(appContext?.getDomain(domain_id || ''));
+
+  console.log('INFO:DetailPage render:domain_id=' + domain_id);
+
+  // TODO encapsulate in a custom hook to reuse
+  // Load Domain resource
+  useEffect(() => {
+    if (domain_id !== undefined && domain === undefined) {
+      resources_api
+        .readDomain(domain_id)
+        .then((res) => {
+          if (res.status === 200) {
+            console.info('res.data=' + res.data);
+            setDomain(res.data as Domain);
+          }
+        })
+        .catch((reason) => {
+          // TODO Send error notification to chrome
+          console.log(reason);
+        });
+    }
+
+    return () => {
+      // Finalizer
+    };
+  }, []);
+
+  // Kebab menu
+  const [isKebabOpen, setIsKebabOpen] = useState<boolean>(false);
+
+  const onKebabToggle = (
+    isOpen: boolean,
+    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
+  ) => {
+    event.stopPropagation();
+    setIsKebabOpen(isOpen);
+  };
+
+  const onKebabSelect = (event?: React.SyntheticEvent<HTMLDivElement>): void => {
+    event?.stopPropagation();
+    setIsKebabOpen(!isKebabOpen);
+  };
+
+  const dropdownItems: JSX.Element[] = [
+    <DropdownItem
+      key="delete"
+      onClick={(value) => {
+        console.log('Deleting domain: ' + value);
+        if (domain_id !== undefined) {
+          resources_api
+            .deleteDomain(domain_id)
+            .then((res) => {
+              if (res.status === 204) {
+                console.info('Domain ' + value + ' was deleted');
+                appContext?.deleteDomain(domain_id);
+                navigate('/domains', { replace: true });
+              }
+            })
+            .catch((reason) => {
+              // TODO Send error notification to chrome
+              console.log(reason);
+            });
+        }
+      }}
+    >
+      Delete
+    </DropdownItem>,
+  ];
+
+  // Tabs
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const handleTabClick = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, tabIndex: string | number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  // Return render
+  return (
+    <>
+      <Page>
+        <PageHeader className="pf-u-mb-0">
+          <Flex>
+            <FlexItem className="pf-u-mr-auto">
+              <PageHeaderTitle title={domain?.title} />
+            </FlexItem>
+            <FlexItem>
+              <Dropdown
+                onSelect={onKebabSelect}
+                toggle={<KebabToggle onToggle={onKebabToggle} />}
+                isOpen={isKebabOpen}
+                isPlain
+                dropdownItems={dropdownItems}
+                position="right"
+              />
+            </FlexItem>
+          </Flex>
+          <Tabs
+            hasBorderBottom={false}
+            activeKey={activeTabKey}
+            onSelect={handleTabClick}
+            isBox={false}
+            aria-label="Tabs in the detail page"
+            role="region"
+          >
+            <Tab title={<TabTitleText>General</TabTitleText>} eventKey={0} />
+            <Tab title={<TabTitleText>Servers</TabTitleText>} eventKey={1} />
+          </Tabs>
+        </PageHeader>
+        <PageSection>
+          <Card>
+            <CardBody>
+              {activeTabKey === 0 && (
+                <DetailGeneral
+                  domain={domain}
+                  onShowServerTab={() => {
+                    setActiveTabKey(1);
+                  }}
+                  onChange={(value: Domain) => {
+                    setDomain(value);
+                    appContext?.updateDomain(value);
+                  }}
+                />
+              )}
+              {activeTabKey === 1 && <DetailServers domain={domain} />}
+            </CardBody>
+          </Card>
+        </PageSection>
+      </Page>
+    </>
+  );
+};
+
+export default DetailPage;
diff --git a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx
index 16c2c80..345f37e 100644
--- a/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx
+++ b/src/Routes/WizardPage/Components/PagePreparation/PagePreparation.tsx
@@ -4,7 +4,7 @@ import { Alert, Button, ClipboardCopy, Form, FormGroup, TextContent, Title } fro
 
 import './PagePreparation.scss';
 import { ResourcesApiFactory } from '../../../../Api';
-import { AppContext, IAppContext } from '../../../../AppContext';
+import { AppContext, AppContextType } from '../../../../AppContext';
 
 /** Represent the properties for PagePreparation component. */
 interface PagePreparationProps {
@@ -30,14 +30,14 @@ const PagePreparation = (props: PagePreparationProps) => {
   const prerequisitesLink = 'https://www.google.com?q=rhel-idm+pre-requisites';
 
   // States
-  const appContext = useContext<IAppContext>(AppContext);
+  const appContext = useContext<AppContextType | undefined>(AppContext);
 
   const base_url = '/api/idmsvc/v1';
   const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
 
-  const token = appContext.wizard.getToken();
-  const domain = appContext.wizard.getDomain();
-  const domain_id = domain.domain_id ? domain.domain_id : '';
+  const token = appContext?.wizard.token;
+  const domain = appContext?.wizard.domain;
+  const domain_id = domain?.domain_id ? domain.domain_id : '';
 
   /**
    * side effect to retrieve a token in the background.
@@ -52,18 +52,20 @@ const PagePreparation = (props: PagePreparationProps) => {
     resources_api
       .createDomainToken({ domain_type: 'rhel-idm' }, undefined, undefined)
       .then((value) => {
-        appContext.wizard.setToken(value.data.domain_token);
-        const domain_id = value.data.domain_id;
-        const domain_name = 'My domain';
-        const domain_type = value.data.domain_type;
-        const token = value.data.domain_token;
-        const expiration = value.data.expiration;
-        appContext.wizard.setDomain({
-          domain_id: domain_id,
-          domain_name: domain_name,
-          domain_type: domain_type,
-        });
-        props.onToken?.(token, domain_id, expiration);
+        if (appContext !== undefined) {
+          appContext.wizard.setToken(value.data.domain_token);
+          const domain_id = value.data.domain_id;
+          const domain_name = 'My domain';
+          const domain_type = value.data.domain_type;
+          const token = value.data.domain_token;
+          const expiration = value.data.expiration;
+          appContext.wizard.setDomain({
+            domain_id: domain_id,
+            domain_name: domain_name,
+            domain_type: domain_type,
+          });
+          props.onToken?.(token, domain_id, expiration);
+        }
       })
       .catch((reason) => {
         // FIXME handle the error here
diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
index 0e89d56..e64a63d 100644
--- a/src/Routes/WizardPage/WizardPage.tsx
+++ b/src/Routes/WizardPage/WizardPage.tsx
@@ -34,7 +34,7 @@ const WizardPage = () => {
   const base_url = '/api/idmsvc/v1';
   const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
   const appContext = useContext(AppContext);
-  const domain = appContext.wizard.getDomain();
+  const domain = appContext?.wizard.domain;
   const navigate = useNavigate();
 
   // FIXME Update the URL with the location for docs
@@ -48,7 +48,7 @@ const WizardPage = () => {
     //           - if not registered, dismiss wizard
     //           - else => DELETE /domains/:domain_id
     //         - Cancel or close model => Do not dismiss wizard
-    if (domain.domain_id) {
+    if (domain?.domain_id) {
       resources_api
         .updateDomainUser(domain.domain_id, {
           title: domain.title,
@@ -102,9 +102,9 @@ const WizardPage = () => {
   };
 
   const initCanJumpPage1 = true;
-  const initCanJumpPage2 = initCanJumpPage1 && domain.domain_id != '' && appContext.wizard.getToken() != '';
-  const initCanJumpPage3 = initCanJumpPage2 && appContext.wizard.getRegisteredStatus() === 'completed';
-  const initCanJumpPage4 = initCanJumpPage3 && domain.title !== undefined && domain.title.length > 0;
+  const initCanJumpPage2 = initCanJumpPage1 && domain?.domain_id != '' && appContext?.wizard.token != '';
+  const initCanJumpPage3 = initCanJumpPage2 && appContext?.wizard.registeredStatus === 'completed';
+  const initCanJumpPage4 = initCanJumpPage3 && domain?.title !== undefined && domain.title.length > 0;
 
   const [canJumpPage1] = useState<boolean>(initCanJumpPage1);
   const [canJumpPage2, setCanJumpPage2] = useState<boolean>(initCanJumpPage2);
@@ -121,15 +121,15 @@ const WizardPage = () => {
   };
 
   const onVerify = (value: VerifyState, data?: Domain) => {
-    if (appContext.wizard.getRegisteredStatus() === 'completed') {
+    if (appContext?.wizard.registeredStatus === 'completed') {
       // verify was previously completed (e.g. user stepped the wizard
       // back to the token page.  Do not overwrite the domain value,
       // so that we do not discard any user-specified settings.
       return;
     }
-    appContext.wizard.setRegisteredStatus(value);
+    appContext?.wizard.setRegisteredStatus(value);
     if (value === 'completed' && data !== undefined) {
-      appContext.wizard.setDomain(data);
+      appContext?.wizard.setDomain(data);
       setCanJumpPage3(true);
       // Check whether initial values for user-configurable fields
       // are valid.  They should be, which will enable the user to
@@ -148,17 +148,23 @@ const WizardPage = () => {
   };
 
   const onChangeTitle = (value: string) => {
-    const newDomain: Domain = { ...domain, title: value };
-    appContext.wizard.setDomain(newDomain);
-    onUserInputChange(newDomain);
+    if (domain !== undefined) {
+      const newDomain: Domain = { ...domain, title: value };
+      appContext?.wizard.setDomain(newDomain);
+      onUserInputChange(newDomain);
+    }
   };
 
   const onChangeDescription = (value: string) => {
-    appContext.wizard.setDomain({ ...domain, description: value });
+    if (domain !== undefined) {
+      appContext?.wizard.setDomain({ ...domain, description: value });
+    }
   };
 
   const onChangeAutoEnrollment = (value: boolean) => {
-    appContext.wizard.setDomain({ ...domain, auto_enrollment_enabled: value });
+    if (domain !== undefined) {
+      appContext?.wizard.setDomain({ ...domain, auto_enrollment_enabled: value });
+    }
   };
 
   /** Configure the wizard pages. */
@@ -174,7 +180,9 @@ const WizardPage = () => {
     {
       id: 2,
       name: 'Domain registration',
-      component: <PageServiceRegistration uuid={domain.domain_id ? domain.domain_id : ''} token={appContext.wizard.getToken()} onVerify={onVerify} />,
+      component: (
+        <PageServiceRegistration uuid={domain?.domain_id ? domain?.domain_id : ''} token={appContext?.wizard.token || ''} onVerify={onVerify} />
+      ),
       canJumpTo: canJumpPage2,
       enableNext: canJumpPage3,
     },
@@ -183,9 +191,9 @@ const WizardPage = () => {
       name: 'Domain information',
       component: (
         <PageServiceDetails
-          title={domain.title}
-          description={domain.description}
-          autoEnrollmentEnabled={domain.auto_enrollment_enabled}
+          title={domain?.title}
+          description={domain?.description}
+          autoEnrollmentEnabled={domain?.auto_enrollment_enabled}
           onChangeTitle={onChangeTitle}
           onChangeDescription={onChangeDescription}
           onChangeAutoEnrollment={onChangeAutoEnrollment}
@@ -197,7 +205,7 @@ const WizardPage = () => {
     {
       id: 4,
       name: 'Review',
-      component: <PageReview domain={domain} />,
+      component: <PageReview domain={domain || ({} as Domain)} />,
       nextButtonText: 'Finish',
       canJumpTo: canJumpPage4,
       enableNext: true,