diff --git a/packages/components/viewer/index.js b/packages/components/viewer/index.js
index e497b0896f..eb65a152d3 100644
--- a/packages/components/viewer/index.js
+++ b/packages/components/viewer/index.js
@@ -91,8 +91,9 @@ export const Viewer = (props) => {
               className="mediaPlayerClose"
             >
               <IconButton
+                color={"#fff"}
                 iconName="/static/images/cross.react.svg"
-                size={25}
+                size={17}
                 isClickable
               />
             </ControlBtn>
diff --git a/packages/components/viewer/styled-viewer.js b/packages/components/viewer/styled-viewer.js
index cf6c8f2687..2491e77cb9 100644
--- a/packages/components/viewer/styled-viewer.js
+++ b/packages/components/viewer/styled-viewer.js
@@ -61,10 +61,10 @@ const StyledViewerContainer = styled.div`
   }
   .mediaPlayerClose {
     position: fixed;
-    top: 4px;
+    top: 10px;
     right: 10px;
-    height: 25px;
-    width: 25px;
+    height: 17px;
+    width: 17px;
     svg {
       path {
         fill: ${(props) => props.theme.mediaViewer.iconColor};