diff --git a/common/changes/office-ui-fabric-react/laxmika-DetailsColumnCSSFix_2018-06-22-09-35.json b/common/changes/office-ui-fabric-react/laxmika-DetailsColumnCSSFix_2018-06-22-09-35.json
new file mode 100644
index 0000000000000..0910ec31b60b1
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/laxmika-DetailsColumnCSSFix_2018-06-22-09-35.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "CSS changes for draggable columns, to show the gripper ICON only on hover",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "laxmika@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
index 7d375d9df58c6..9861cc62e1d1a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
@@ -66,7 +66,7 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
         data-automationid={'ColumnsHeaderColumn'}
         data-item-key={column.key}
       >
-        {isDraggable && <Icon iconName={'GripperBarVertical'} className={css(styles.GripperBarVerticalStyle)} />}
+        {isDraggable && <Icon iconName={'GripperBarVertical'} className={css(styles.gripperBarVerticalStyle)} />}
         {onRenderColumnHeaderTooltip(
           {
             hostClassName: css(styles.cellTooltip),