diff --git a/api-catalog-ui/frontend/src/components/Error/Error.jsx b/api-catalog-ui/frontend/src/components/Error/Error.jsx
index 9fc657b5d2..8000f9dc35 100644
--- a/api-catalog-ui/frontend/src/components/Error/Error.jsx
+++ b/api-catalog-ui/frontend/src/components/Error/Error.jsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
-import { Dialog, DialogBody, DialogHeader, DialogTitle, DialogFooter, DialogActions, Button, Text } from 'mineral-ui';
+import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, IconButton } from '@material-ui/core';
+
 import formatError from './ErrorFormatter';
 
 export default class Error extends Component {
@@ -10,37 +11,35 @@ export default class Error extends Component {
 
     render() {
         const { errors } = this.props;
-        const isTrue = true;
-        const isFalse = false;
         return (
             <div>
                 {errors &&
                     errors.length > 0 && (
-                        <Dialog
-                            variant="danger"
-                            appSelector="#App"
-                            closeOnClickOutside={isFalse}
-                            hideOverlay={isTrue}
-                            modeless={isFalse}
-                            isOpen={errors.length > 0}
-                        >
-                            <DialogHeader>
-                                <DialogTitle>Error</DialogTitle>
-                            </DialogHeader>
-                            <DialogBody>
+                        <Dialog variant="danger" open={errors.length > 0}>
+                            <DialogTitle>Error</DialogTitle>
+                            <DialogContent data-testid="dialog-content">
                                 {errors !== null && errors !== undefined && errors.length > 0 ? (
                                     errors.map(error => formatError(error))
                                 ) : (
-                                    <Text>No Errors Found</Text>
+                                    <DialogContentText style={{ color: 'black' }}>No Errors Found</DialogContentText>
                                 )}
-                            </DialogBody>
-                            <DialogFooter>
-                                <DialogActions>
-                                    <Button size="medium" variant="danger" onClick={this.closeDialog}>
-                                        Close
-                                    </Button>
-                                </DialogActions>
-                            </DialogFooter>
+                            </DialogContent>
+                            <DialogActions>
+                                <IconButton
+                                    size="medium"
+                                    variant="outlined"
+                                    style={{
+                                        border: '1px solid #de1b1b',
+                                        backgroundColor: '#de1b1b',
+                                        borderRadius: '0.1875em',
+                                        fontSize: '15px',
+                                        color: 'white',
+                                    }}
+                                    onClick={this.closeDialog}
+                                >
+                                    Close
+                                </IconButton>
+                            </DialogActions>
                         </Dialog>
                     )}
             </div>
diff --git a/api-catalog-ui/frontend/src/components/Error/Error.test.jsx b/api-catalog-ui/frontend/src/components/Error/Error.test.jsx
index 7136271946..089f20839e 100644
--- a/api-catalog-ui/frontend/src/components/Error/Error.test.jsx
+++ b/api-catalog-ui/frontend/src/components/Error/Error.test.jsx
@@ -10,8 +10,8 @@ describe('>>> Error component tests', () => {
         const errorResponse = 'Could not determine error';
         const apiError = new ApiError('ABC123', 123, new MessageType(40, 'ERROR', 'E'), 'Bad stuff happened');
         const wrapper = enzyme.shallow(<Error errors={[apiError]} />);
-        expect(wrapper.find('DialogBody').exists()).toEqual(true);
-        expect(wrapper.find('Text').prop('children')).toBe(errorResponse);
+        expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
+        expect(wrapper.find('[data-testid="dialog-content"]').children().text()).toBe(errorResponse);
     });
 
     it('Should display the dialog and the error message for Ajax error', () => {
@@ -26,8 +26,8 @@ describe('>>> Error component tests', () => {
             null
         );
         const wrapper = enzyme.shallow(<Error errors={[ajaxError]} />);
-        expect(wrapper.find('DialogBody').exists()).toEqual(true);
-        expect(wrapper.find('Text').prop('children')).toBe(errorResponse);
+        expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
+        expect(wrapper.find('[data-testid="dialog-content"]').children().text()).toBe(errorResponse);
     });
 
     it('Should not display the dialog if there are no errors', () => {
diff --git a/api-catalog-ui/frontend/src/components/Error/ErrorDialog.jsx b/api-catalog-ui/frontend/src/components/Error/ErrorDialog.jsx
index 254b0cf272..196a37c483 100644
--- a/api-catalog-ui/frontend/src/components/Error/ErrorDialog.jsx
+++ b/api-catalog-ui/frontend/src/components/Error/ErrorDialog.jsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { Dialog, DialogBody, DialogHeader, DialogTitle, DialogFooter, DialogActions, Button, Text } from 'mineral-ui';
+import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, IconButton } from '@material-ui/core';
 
 export default class ErrorDialog extends Component {
     // eslint-disable-next-line react/sort-comp
@@ -32,33 +32,30 @@ export default class ErrorDialog extends Component {
     render() {
         const { refreshedStaticApisError } = this.props;
         const refreshError = this.getCorrectRefreshMessage(refreshedStaticApisError);
-        const isTrue = true;
-        const isFalse = false;
         return (
             <div>
                 {refreshedStaticApisError &&
                     (refreshedStaticApisError.status || typeof refreshedStaticApisError === 'object') && (
-                        <Dialog
-                            variant="danger"
-                            appSelector="#App"
-                            closeOnClickOutside={isFalse}
-                            hideOverlay={isTrue}
-                            modeless={isFalse}
-                            isOpen={refreshedStaticApisError !== null}
-                        >
-                            <DialogHeader>
-                                <DialogTitle>Error</DialogTitle>
-                            </DialogHeader>
-                            <DialogBody>
-                                <Text>{refreshError}</Text>
-                            </DialogBody>
-                            <DialogFooter>
-                                <DialogActions>
-                                    <Button size="medium" variant="danger" onClick={this.closeDialog}>
-                                        Close
-                                    </Button>
-                                </DialogActions>
-                            </DialogFooter>
+                        <Dialog variant="danger" open={refreshedStaticApisError !== null}>
+                            <DialogTitle style={{ color: '#de1b1b' }}>Error</DialogTitle>
+                            <DialogContent data-testid="dialog-content">
+                                <DialogContentText style={{ color: 'black' }}>{refreshError}</DialogContentText>
+                            </DialogContent>
+                            <DialogActions>
+                                <IconButton
+                                    variant="outlined"
+                                    style={{
+                                        border: '1px solid #de1b1b',
+                                        backgroundColor: '#de1b1b',
+                                        borderRadius: '0.1875em',
+                                        fontSize: '15px',
+                                        color: 'white',
+                                    }}
+                                    onClick={this.closeDialog}
+                                >
+                                    Close
+                                </IconButton>
+                            </DialogActions>
                         </Dialog>
                     )}
             </div>
diff --git a/api-catalog-ui/frontend/src/components/Error/ErrorDialog.test.jsx b/api-catalog-ui/frontend/src/components/Error/ErrorDialog.test.jsx
index ec08806754..e423873b56 100644
--- a/api-catalog-ui/frontend/src/components/Error/ErrorDialog.test.jsx
+++ b/api-catalog-ui/frontend/src/components/Error/ErrorDialog.test.jsx
@@ -12,7 +12,7 @@ describe('>>> ErrorDialog component tests', () => {
             messageType: 'ERROR',
         };
         const wrapper = shallow(<ErrorDialog refreshedStaticApisError={messageText} clearError={jest.fn()} />);
-        expect(wrapper.find('DialogBody').exists()).toEqual(true);
+        expect(wrapper.find('[data-testid="dialog-content"]').exists()).toEqual(true);
     });
 
     it('should not render the ErrorDialog if there is not an error while refreshing apis', () => {
diff --git a/api-catalog-ui/frontend/src/components/Error/ErrorFormatter.jsx b/api-catalog-ui/frontend/src/components/Error/ErrorFormatter.jsx
index c34ca6132f..c74b01dabe 100644
--- a/api-catalog-ui/frontend/src/components/Error/ErrorFormatter.jsx
+++ b/api-catalog-ui/frontend/src/components/Error/ErrorFormatter.jsx
@@ -1,4 +1,4 @@
-import { Text } from 'mineral-ui';
+import { Typography } from '@material-ui/core';
 import renderHTML from 'react-render-html';
 import uuidv4 from 'uuid/v4';
 
@@ -24,9 +24,9 @@ function extractAjaxError(error) {
 
 function formaHtmlError(message, color) {
     return (
-        <Text key={uuidv4()} element="h5" fontWeight="semiBold" color={color}>
+        <Typography key={uuidv4()} variant="h5" style={{ color, fontWeight: 'semiBold' }}>
             {renderHTML(message)}
-        </Text>
+        </Typography>
     );
 }
 
diff --git a/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx b/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx
index c9a4058ef5..78a344f2c8 100644
--- a/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx
+++ b/api-catalog-ui/frontend/src/components/ErrorBoundary/BigShield/BigShield.jsx
@@ -1,8 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import { Component } from 'react';
-import Text from 'mineral-ui/Text';
-import { Button } from 'mineral-ui';
-import IconChevronLeft from 'mineral-ui-icons/IconChevronLeft';
+import { Typography, Button } from '@material-ui/core';
+import ArrowBackIosNewIcon from '@material-ui/icons/ArrowBackIos';
 import '../../Dashboard/Dashboard.css';
 import './BigShield.css';
 
@@ -29,7 +28,7 @@ export default class BigShield extends Component {
     };
 
     render() {
-        const iconBack = <IconChevronLeft />;
+        const iconBack = <ArrowBackIosNewIcon />;
         const { history } = this.props;
         let disableButton = true;
         if (history !== undefined && history !== null) {
@@ -61,11 +60,11 @@ export default class BigShield extends Component {
                         )}
                         <br />
                         <div className="local-dev-debug">
-                            <Text element="h2" style={{ color: '#de1b1b' }}>
+                            <Typography variant="h4" style={{ color: '#de1b1b' }}>
                                 An unexpected browser error occurred
-                            </Text>
+                            </Typography>
                             <br />
-                            <Text element="h3" fontWeight="semiBold" color="black">
+                            <Typography variant="h6" style={{ color: 'black', fontWeight: 'semiBold' }}>
                                 You are seeing this page because an unexpected error occurred while rendering your page.
                                 <br />
                                 <br />
@@ -75,12 +74,12 @@ export default class BigShield extends Component {
                                 {!disableButton && (
                                     <b>You can return to the Dashboard by clicking on the button above.</b>
                                 )}
-                            </Text>
-                            <Text element="h4" color="#de1b1b">
+                            </Typography>
+                            <Typography variant="h6" color="#de1b1b">
                                 <pre>
                                     <code>{this.state.error.message}</code>
                                 </pre>
-                            </Text>
+                            </Typography>
 
                             <div className="wrap-collabsible">
                                 <input id="collapsible" className="toggle" type="checkbox" />
@@ -90,11 +89,11 @@ export default class BigShield extends Component {
                                 </label>
                                 <div className="collapsible-content">
                                     <div className="content-inner">
-                                        <Text element="h5">
+                                        <Typography variant="h5">
                                             <pre>
                                                 <code>{stack}</code>
                                             </pre>
-                                        </Text>
+                                        </Typography>
                                     </div>
                                 </div>
                             </div>
@@ -108,11 +107,11 @@ export default class BigShield extends Component {
                                 </label>
                                 <div className="collapsible-content2">
                                     <div className="content-inner2">
-                                        <Text element="h5">
+                                        <Typography variant="h5">
                                             <pre>
                                                 <code>{componentStack}</code>
                                             </pre>
-                                        </Text>
+                                        </Typography>
                                     </div>
                                 </div>
                             </div>
diff --git a/api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.jsx b/api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.jsx
index 030615e7f0..519d643f7d 100644
--- a/api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.jsx
+++ b/api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import { Component } from 'react';
-import Text from 'mineral-ui/Text';
+import { Typography } from '@material-ui/core';
 import '../BigShield/BigShield.css';
 
 export default class Shield extends Component {
@@ -34,11 +34,11 @@ export default class Shield extends Component {
                     </label>
                     <div className="collapsible-content">
                         <div className="content-inner">
-                            <Text element="h5">
+                            <Typography variant="h5">
                                 <pre style={{ textAlign: 'left' }}>
                                     <code>{this.state.error.stack}</code>
                                 </pre>
-                            </Text>
+                            </Typography>
                         </div>
                     </div>
                 </div>
diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/InstanceInfo.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/InstanceInfo.jsx
index 626182f5f5..35a132ca99 100644
--- a/api-catalog-ui/frontend/src/components/ServiceTab/InstanceInfo.jsx
+++ b/api-catalog-ui/frontend/src/components/ServiceTab/InstanceInfo.jsx
@@ -1,4 +1,4 @@
-import { Text, Tooltip, ThemeProvider } from 'mineral-ui';
+import { Typography, Tooltip } from '@material-ui/core';
 import { Component } from 'react';
 import './InstanceInfo.css';
 import Shield from '../ErrorBoundary/Shield/Shield';
@@ -11,36 +11,34 @@ export default class InstanceInfo extends Component {
             selectedService.apiId[selectedVersion || selectedService.defaultApiVersion] ||
             selectedService.apiId.default;
         return (
-            <ThemeProvider>
-                <Shield title="Cannot display information about selected instance">
-                    <div className="apiInfo-item">
-                        <Tooltip
-                            key={selectedService.baseUrl}
-                            content="The instance URL for this service"
-                            placement="bottom"
-                        >
-                            <Text>
-                                {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-                                <label htmlFor="instanceUrl">Instance URL:</label>
-                                <span id="instanceUrl">{selectedService.baseUrl}</span>
-                            </Text>
-                        </Tooltip>
-                    </div>
-                    <div className="apiInfo-item">
-                        <Tooltip
-                            key={selectedService.apiId}
-                            content="API IDs of the APIs that are provided by this service"
-                            placement="bottom"
-                        >
-                            <Text>
-                                {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-                                <label htmlFor="apiid">API ID:</label>
-                                <span id="appid">{apiId}</span>
-                            </Text>
-                        </Tooltip>
-                    </div>
-                </Shield>
-            </ThemeProvider>
+            <Shield title="Cannot display information about selected instance">
+                <div className="apiInfo-item">
+                    <Tooltip
+                        key={selectedService.baseUrl}
+                        content="The instance URL for this service"
+                        placement="bottom"
+                    >
+                        <Typography>
+                            {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+                            <label htmlFor="instanceUrl">Instance URL:</label>
+                            <span id="instanceUrl">{selectedService.baseUrl}</span>
+                        </Typography>
+                    </Tooltip>
+                </div>
+                <div className="apiInfo-item">
+                    <Tooltip
+                        key={selectedService.apiId}
+                        content="API IDs of the APIs that are provided by this service"
+                        placement="bottom"
+                    >
+                        <Typography>
+                            {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+                            <label htmlFor="apiid">API ID:</label>
+                            <span id="appid">{apiId}</span>
+                        </Typography>
+                    </Tooltip>
+                </div>
+            </Shield>
         );
     }
 }