diff --git a/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-21-00-19.json b/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-21-00-19.json
new file mode 100644
index 0000000000000..2f42ad25a4d29
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/mergeStyles-Dialog-round1_2018-02-21-00-19.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Convert Dialog to mergeStyles, part 1 - file structure",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-jojanz@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx
new file mode 100644
index 0000000000000..8e8a7b26de447
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css,
+  getId
+} from '../../Utilities';
+import { IDialogProps } from './Dialog.types';
+import { DialogType } from './DialogContent.types';
+import { Modal } from '../../Modal';
+import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
+import * as stylesImport from './Dialog.scss';
+const styles: any = stylesImport;
+
+import { DialogContent } from './DialogContent';
+
+@withResponsiveMode
+export class DialogBase extends BaseComponent<IDialogProps, {}> {
+  public static defaultProps: IDialogProps = {
+    modalProps: {
+      isDarkOverlay: true,
+      isBlocking: false,
+      className: '',
+      containerClassName: ''
+    },
+    dialogContentProps: {
+      type: DialogType.normal,
+      className: '',
+      topButtonsProps: [],
+    },
+    hidden: true,
+  };
+
+  private _id: string;
+  private _defaultTitleTextId: string;
+  private _defaultSubTextId: string;
+
+  constructor(props: IDialogProps) {
+    super(props);
+
+    this._id = getId('Dialog');
+    this._defaultTitleTextId = this._id + '-title';
+    this._defaultSubTextId = this._id + '-subText';
+
+    this._warnDeprecations({
+      'isOpen': 'hidden',
+      'type': 'dialogContentProps.type',
+      'subText': 'dialogContentProps.subText',
+      'contentClassName': 'dialogContentProps.className',
+      'topButtonsProps': 'dialogContentProps.topButtonsProps',
+      'className': 'modalProps.className',
+      'isDarkOverlay': 'modalProps.isDarkOverlay',
+      'isBlocking': 'modalProps.isBlocking',
+      'containerClassName': 'modalProps.containerClassName',
+      'onDismissed': 'modalProps.onDismissed',
+      'onLayerDidMount': 'modalProps.onLayerDidMount',
+      'ariaDescribedById': 'modalProps.subtitleAriaId',
+      'ariaLabelledById': 'modalProps.titleAriaId'
+    });
+  }
+
+  public render() {
+    const {
+      elementToFocusOnDismiss,
+      firstFocusableSelector,
+      forceFocusInsideTrap,
+      ignoreExternalFocusing,
+      isBlocking,
+      isClickableOutsideFocusTrap,
+      isDarkOverlay,
+      isOpen,
+      className,
+      onDismiss,
+      onDismissed,
+      onLayerDidMount,
+      responsiveMode,
+      subText,
+      title,
+      type,
+      contentClassName,
+      topButtonsProps,
+      dialogContentProps,
+      modalProps,
+      containerClassName,
+      hidden
+    } = this.props;
+
+    return (
+      <Modal
+        elementToFocusOnDismiss={ elementToFocusOnDismiss }
+        firstFocusableSelector={ firstFocusableSelector }
+        forceFocusInsideTrap={ forceFocusInsideTrap }
+        ignoreExternalFocusing={ ignoreExternalFocusing }
+        isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap }
+        onDismissed={ onDismissed }
+        onLayerDidMount={ onLayerDidMount }
+        responsiveMode={ responsiveMode }
+        { ...modalProps }
+        isDarkOverlay={ isDarkOverlay !== undefined ? isDarkOverlay : modalProps!.isDarkOverlay }
+        isBlocking={ isBlocking !== undefined ? isBlocking : modalProps!.isBlocking }
+        isOpen={ isOpen !== undefined ? isOpen : !hidden }
+        className={ css('ms-Dialog', className ? className : modalProps!.className) }
+        containerClassName={ css(styles.main, containerClassName ? containerClassName : modalProps!.containerClassName) }
+        onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
+        subtitleAriaId={ this._getSubTextId() }
+        titleAriaId={ this._getTitleTextId() }
+      >
+        <DialogContent
+          titleId={ this._defaultTitleTextId }
+          subTextId={ this._defaultSubTextId }
+          title={ title }
+          subText={ subText }
+          showCloseButton={ isBlocking !== undefined ? !isBlocking : !modalProps!.isBlocking }
+          topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
+          type={ type !== undefined ? type : dialogContentProps!.type }
+          onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
+          className={ css(contentClassName ? contentClassName : dialogContentProps!.className) }
+          { ...dialogContentProps }
+        >
+          { this.props.children }
+        </DialogContent>
+      </Modal>
+    );
+  }
+
+  private _getSubTextId = (): string | undefined => {
+    const { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;
+    let id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
+
+    if (!id) {
+      id = (subText || (dialogContentProps && dialogContentProps.subText)) && this._defaultSubTextId;
+    }
+
+    return id;
+  }
+
+  private _getTitleTextId = (): string | undefined => {
+    const { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;
+    let id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
+
+    if (!id) {
+      id = (title || (dialogContentProps && dialogContentProps.title)) && this._defaultTitleTextId;
+    }
+
+    return id;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
new file mode 100644
index 0000000000000..c5536f6e55f5f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
@@ -0,0 +1,28 @@
+import { IDialogStyleProps, IDialogStyles } from './Dialog.types';
+import {
+  IStyle,
+  ITheme,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IDialogStyleProps
+): IDialogStyles => {
+  const {
+    className,
+    theme,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  return ({
+    root: [
+      'ms-Dialog',
+      {
+        // Insert css properties
+
+      }
+    ],
+
+    // Insert className styles
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx
index 5c2e5ac89d2b0..21b58689ced00 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx
@@ -5,7 +5,7 @@ import * as renderer from 'react-test-renderer';
 
 import { mount } from 'enzyme';
 
-import { Dialog } from './Dialog';
+import { DialogBase } from './Dialog.base';
 import { DialogContent } from './DialogContent';
 import { DialogType } from './DialogContent.types';
 
@@ -26,7 +26,7 @@ describe('Dialog', () => {
     };
 
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ { onDismissed: handleDismissed } }
       />
@@ -51,7 +51,7 @@ describe('Dialog', () => {
 
   it('Properly attaches auto-generated aria attributes IDs', () => {
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ { onDismissed: () => {/* no-op */ } } }
         dialogContentProps={ {
@@ -72,7 +72,7 @@ describe('Dialog', () => {
   it('Properly attaches IDs when aria-describedby is passed', () => {
     const subTextAriaId = 'subtextariaid';
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ {
           onDismissed: () => {/* no-op */ },
@@ -96,7 +96,7 @@ describe('Dialog', () => {
   it('Properly attaches IDs when aria-labelledby is passed', () => {
     const titleAriaId = 'titleariaid';
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ {
           onDismissed: () => {/* no-op */ },
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
index c1df330949100..ca3b141d644ba 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
@@ -1,146 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-  getId
-} from '../../Utilities';
-import { IDialogProps } from './Dialog.types';
-import { DialogType } from './DialogContent.types';
-import { Modal } from '../../Modal';
-import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
-
-import { DialogContent } from './DialogContent';
-
-@withResponsiveMode
-export class Dialog extends BaseComponent<IDialogProps, {}> {
-  public static defaultProps: IDialogProps = {
-    modalProps: {
-      isDarkOverlay: true,
-      isBlocking: false,
-      className: '',
-      containerClassName: ''
-    },
-    dialogContentProps: {
-      type: DialogType.normal,
-      className: '',
-      topButtonsProps: [],
-    },
-    hidden: true,
-  };
-
-  private _id: string;
-  private _defaultTitleTextId: string;
-  private _defaultSubTextId: string;
-
-  constructor(props: IDialogProps) {
-    super(props);
-
-    this._id = getId('Dialog');
-    this._defaultTitleTextId = this._id + '-title';
-    this._defaultSubTextId = this._id + '-subText';
-
-    this._warnDeprecations({
-      'isOpen': 'hidden',
-      'type': 'dialogContentProps.type',
-      'subText': 'dialogContentProps.subText',
-      'contentClassName': 'dialogContentProps.className',
-      'topButtonsProps': 'dialogContentProps.topButtonsProps',
-      'className': 'modalProps.className',
-      'isDarkOverlay': 'modalProps.isDarkOverlay',
-      'isBlocking': 'modalProps.isBlocking',
-      'containerClassName': 'modalProps.containerClassName',
-      'onDismissed': 'modalProps.onDismissed',
-      'onLayerDidMount': 'modalProps.onLayerDidMount',
-      'ariaDescribedById': 'modalProps.subtitleAriaId',
-      'ariaLabelledById': 'modalProps.titleAriaId'
-    });
-  }
-
-  public render() {
-    const {
-      elementToFocusOnDismiss,
-      firstFocusableSelector,
-      forceFocusInsideTrap,
-      ignoreExternalFocusing,
-      isBlocking,
-      isClickableOutsideFocusTrap,
-      isDarkOverlay,
-      isOpen,
-      className,
-      onDismiss,
-      onDismissed,
-      onLayerDidMount,
-      responsiveMode,
-      subText,
-      title,
-      type,
-      contentClassName,
-      topButtonsProps,
-      dialogContentProps,
-      modalProps,
-      containerClassName,
-      hidden
-    } = this.props;
-
-    return (
-      <Modal
-        elementToFocusOnDismiss={ elementToFocusOnDismiss }
-        firstFocusableSelector={ firstFocusableSelector }
-        forceFocusInsideTrap={ forceFocusInsideTrap }
-        ignoreExternalFocusing={ ignoreExternalFocusing }
-        isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap }
-        onDismissed={ onDismissed }
-        onLayerDidMount={ onLayerDidMount }
-        responsiveMode={ responsiveMode }
-        { ...modalProps }
-        isDarkOverlay={ isDarkOverlay !== undefined ? isDarkOverlay : modalProps!.isDarkOverlay }
-        isBlocking={ isBlocking !== undefined ? isBlocking : modalProps!.isBlocking }
-        isOpen={ isOpen !== undefined ? isOpen : !hidden }
-        className={ css('ms-Dialog', className ? className : modalProps!.className) }
-        containerClassName={ css(styles.main, containerClassName ? containerClassName : modalProps!.containerClassName) }
-        onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
-        subtitleAriaId={ this._getSubTextId() }
-        titleAriaId={ this._getTitleTextId() }
-      >
-        <DialogContent
-          titleId={ this._defaultTitleTextId }
-          subTextId={ this._defaultSubTextId }
-          title={ title }
-          subText={ subText }
-          showCloseButton={ isBlocking !== undefined ? !isBlocking : !modalProps!.isBlocking }
-          topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
-          type={ type !== undefined ? type : dialogContentProps!.type }
-          onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
-          className={ css(contentClassName ? contentClassName : dialogContentProps!.className) }
-          { ...dialogContentProps }
-        >
-          { this.props.children }
-        </DialogContent>
-      </Modal>
-    );
-  }
-
-  private _getSubTextId = (): string | undefined => {
-    const { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;
-    let id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
-
-    if (!id) {
-      id = (subText || (dialogContentProps && dialogContentProps.subText)) && this._defaultSubTextId;
-    }
-
-    return id;
-  }
-
-  private _getTitleTextId = (): string | undefined => {
-    const { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;
-    let id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
-
-    if (!id) {
-      id = (title || (dialogContentProps && dialogContentProps.title)) && this._defaultTitleTextId;
-    }
-
-    return id;
-  }
-}
+  IDialogProps,
+  IDialogStyleProps,
+  IDialogStyles
+} from './Dialog.types';
+import { DialogBase } from './Dialog.base';
+import { getStyles } from './Dialog.styles';
+
+export const Dialog = styled<IDialogProps, IDialogStyleProps, IDialogStyles>(
+  DialogBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts
index 951d35f5537ee..5a8a95acb6e7b 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { IModalProps } from '../../Modal';
-import { Dialog } from './Dialog';
+import { DialogBase } from './Dialog.base';
 import { DialogType, IDialogContentProps } from './DialogContent.types';
 import { IButtonProps } from '../Button/Button.types';
 import { IWithResponsiveModeState } from '../../utilities/decorators/withResponsiveMode';
 import { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IDialog {
 
 }
 
-export interface IDialogProps extends React.Props<Dialog>, IWithResponsiveModeState, IAccessiblePopupProps {
+export interface IDialogProps extends React.Props<DialogBase>, IWithResponsiveModeState, IAccessiblePopupProps {
 
   /**
    * Optional callback to access the IDialog interface. Use this instead of ref for accessing
@@ -18,6 +20,16 @@ export interface IDialogProps extends React.Props<Dialog>, IWithResponsiveModeSt
    */
   componentRef?: (component: IDialog) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IDialogStyleProps, IDialogStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
   /**
   * Props to be passed through to Dialog Content
   */
@@ -132,5 +144,27 @@ export interface IDialogProps extends React.Props<Dialog>, IWithResponsiveModeSt
   * @deprecated Pass through via modalProps.subtitleAriaId instead
   */
   ariaDescribedById?: string;
+}
+
+export interface IDialogStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  // Insert Dialog style props below
+}
+
+export interface IDialogStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
 
+  // Insert Dialog classNames below
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/index.ts b/packages/office-ui-fabric-react/src/components/Dialog/index.ts
index 0a40969d0aea4..565c09db9a331 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Dialog/index.ts
@@ -1,4 +1,5 @@
 export * from './Dialog';
+export * from './Dialog.base';
 export * from './DialogContent';
 export * from './DialogFooter';
 export * from './Dialog.types';