diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index 13274f3..3308892 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -1,8 +1,4 @@
 import React, { Component } from 'react';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import ErrorIcon from '@material-ui/icons/Error';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -12,6 +8,10 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import { css } from 'emotion';
 
 import Button from '../../muiComponents/Button';
+import Dialog from '../../muiComponents/Dialog';
+import DialogTitle from '../../muiComponents/DialogTitle';
+import DialogContent from '../../muiComponents/DialogContent';
+import DialogActions from '../../muiComponents/DialogActions';
 
 import * as classes from './styles';
 
diff --git a/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx b/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
index d27a1f9..c23a8bf 100644
--- a/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
+++ b/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
 
 import Button from '../../muiComponents/Button';
+import Dialog from '../../muiComponents/Dialog';
+import DialogActions from '../../muiComponents/DialogActions';
 
 import { Title, Content } from './styles';
 import { Props } from './types';
diff --git a/src/components/RegistryInfoDialog/styles.ts b/src/components/RegistryInfoDialog/styles.ts
index 4832753..8bdc1b6 100644
--- a/src/components/RegistryInfoDialog/styles.ts
+++ b/src/components/RegistryInfoDialog/styles.ts
@@ -1,20 +1,16 @@
 import styled from 'react-emotion';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
 
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';
+import DialogTitle from '../../muiComponents/DialogTitle';
+import DialogContent from '../../muiComponents/DialogContent';
 
 export const Title = styled(DialogTitle)({
-  '&&': {
-    backgroundColor: colors.primary,
-    color: colors.white,
-    fontSize: fontSize.lg,
-  },
+  backgroundColor: colors.primary,
+  color: colors.white,
+  fontSize: fontSize.lg,
 });
 
 export const Content = styled(DialogContent)({
-  '&&': {
-    padding: '0 24px',
-  },
+  padding: '0 24px',
 });
diff --git a/src/muiComponents/Dialog/Dialog.tsx b/src/muiComponents/Dialog/Dialog.tsx
new file mode 100644
index 0000000..eb520cb
--- /dev/null
+++ b/src/muiComponents/Dialog/Dialog.tsx
@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIDialog, DialogProps } from '@material-ui/core/Dialog';
+
+type DialogRef = HTMLDivElement;
+
+const Dialog = forwardRef<DialogRef, DialogProps>(function Dialog(props, ref) {
+  return <MaterialUIDialog {...props} ref={ref} />;
+});
+
+export default Dialog;
diff --git a/src/muiComponents/Dialog/index.ts b/src/muiComponents/Dialog/index.ts
new file mode 100644
index 0000000..e3f43f0
--- /dev/null
+++ b/src/muiComponents/Dialog/index.ts
@@ -0,0 +1 @@
+export { default } from './Dialog';
diff --git a/src/muiComponents/DialogActions/DialogActions.tsx b/src/muiComponents/DialogActions/DialogActions.tsx
new file mode 100644
index 0000000..1c2f44d
--- /dev/null
+++ b/src/muiComponents/DialogActions/DialogActions.tsx
@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIDialogActions, DialogActionsProps } from '@material-ui/core/DialogActions';
+
+type DialogActionsRef = HTMLDivElement;
+
+const DialogActions = forwardRef<DialogActionsRef, DialogActionsProps>(function DialogActions(props, ref) {
+  return <MaterialUIDialogActions {...props} ref={ref} />;
+});
+
+export default DialogActions;
diff --git a/src/muiComponents/DialogActions/index.ts b/src/muiComponents/DialogActions/index.ts
new file mode 100644
index 0000000..8723122
--- /dev/null
+++ b/src/muiComponents/DialogActions/index.ts
@@ -0,0 +1 @@
+export { default } from './DialogActions';
diff --git a/src/muiComponents/DialogContent/DialogContent.tsx b/src/muiComponents/DialogContent/DialogContent.tsx
new file mode 100644
index 0000000..853149e
--- /dev/null
+++ b/src/muiComponents/DialogContent/DialogContent.tsx
@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIDialogContent, DialogContentProps } from '@material-ui/core/DialogContent';
+
+type DialogContentRef = HTMLDivElement;
+
+const DialogContent = forwardRef<DialogContentRef, DialogContentProps>(function DialogContent(props, ref) {
+  return <MaterialUIDialogContent {...props} ref={ref} />;
+});
+
+export default DialogContent;
diff --git a/src/muiComponents/DialogContent/index.ts b/src/muiComponents/DialogContent/index.ts
new file mode 100644
index 0000000..75dfdf4
--- /dev/null
+++ b/src/muiComponents/DialogContent/index.ts
@@ -0,0 +1 @@
+export { default } from './DialogContent';
diff --git a/src/muiComponents/DialogTitle/DialogTitle.tsx b/src/muiComponents/DialogTitle/DialogTitle.tsx
new file mode 100644
index 0000000..0264735
--- /dev/null
+++ b/src/muiComponents/DialogTitle/DialogTitle.tsx
@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIDialogTitle, DialogTitleProps } from '@material-ui/core/DialogTitle';
+
+type DialogTitleRef = HTMLDivElement;
+
+const DialogTitle = forwardRef<DialogTitleRef, DialogTitleProps>(function DialogTitle(props, ref) {
+  return <MaterialUIDialogTitle {...props} ref={ref} />;
+});
+
+export default DialogTitle;
diff --git a/src/muiComponents/DialogTitle/index.ts b/src/muiComponents/DialogTitle/index.ts
new file mode 100644
index 0000000..69720d1
--- /dev/null
+++ b/src/muiComponents/DialogTitle/index.ts
@@ -0,0 +1 @@
+export { default } from './DialogTitle';
diff --git a/src/pages/Version/styles.ts b/src/pages/Version/styles.ts
index a107e51..bd1d35e 100644
--- a/src/pages/Version/styles.ts
+++ b/src/pages/Version/styles.ts
@@ -1,13 +1,11 @@
 import styled from 'react-emotion';
-import DialogTitle from '@material-ui/core/DialogTitle';
 
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';
+import DialogTitle from '../../muiComponents/DialogTitle';
 
 export const Title = styled(DialogTitle)({
-  '&&': {
-    backgroundColor: colors.primary,
-    color: colors.white,
-    fontSize: fontSize.lg,
-  },
+  backgroundColor: colors.primary,
+  color: colors.white,
+  fontSize: fontSize.lg,
 });