diff --git a/gok/gok.controller.js b/gok/gok.controller.js
index 6a1305b..2f80043 100644
--- a/gok/gok.controller.js
+++ b/gok/gok.controller.js
@@ -54,7 +54,9 @@ let prepareDetailedFileList = (parentDirPath, fileList) => {
                 // Other file details can be added as and when required
                 return {
                     name : stats.name,
-                    isDirectory : stats.isDirectory
+                    isDirectory : stats.isDirectory,
+                    size : stats.size,
+                    uploadedOn : stats.birthtime.toLocalDateString()
                 }
             })
             .catch((error) => {
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 9965979..7c592a2 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -11190,15 +11190,6 @@
         "extsprintf": "1.3.0"
       }
     },
-    "video-react": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/video-react/-/video-react-0.10.4.tgz",
-      "integrity": "sha512-Gu/Yw9+AhcKcTPSltY9eyZ+xR/u6eX4GfgBL2TcBrZQ0cVy9x3U/vT73xX3CcItTK4tnNNHWsv71krQtzyn6RQ==",
-      "requires": {
-        "classnames": "2.2.5",
-        "prop-types": "15.6.1"
-      }
-    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
diff --git a/ui/package.json b/ui/package.json
index 4a5ce37..9f35761 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,8 +12,7 @@
     "react-scripts": "1.1.1",
     "redux": "^3.7.2",
     "semantic-ui-css": "^2.3.0",
-    "semantic-ui-react": "^0.78.3",
-    "video-react": "^0.10.4"
+    "semantic-ui-react": "^0.78.3"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/ui/src/App.js b/ui/src/App.js
index 2df6793..a1b0e26 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -77,7 +77,7 @@ class App extends Component {
                     />
                 </Grid.Row>
 
-                <Grid.Row style={{ paddingTop : '10em', zIndex : 1 }} stretched>
+                <Grid.Row style={{ paddingTop : '10em', zIndex : 1, height: '100vh' }} stretched>
                     <Grid.Column only='computer' computer={3}>
                         <SideBar
                             fileList={this.state.topLevelDirectories}
@@ -87,7 +87,7 @@ class App extends Component {
                         />
                     </Grid.Column>
 
-                    <Grid.Column mobile={16} computer={13}>
+                    <Grid.Column mobile={16} computer={13} style={{ overflowY : 'scroll'}}>
                         <ContentArea
                             fileList={this.state.fileList}
                             basePath={this.props.root}
diff --git a/ui/src/components/ContentArea.js b/ui/src/components/ContentArea.js
index e31c472..19a4c3e 100644
--- a/ui/src/components/ContentArea.js
+++ b/ui/src/components/ContentArea.js
@@ -39,6 +39,8 @@ const VideoPlayer = (props) => {
             controls
             autoPlay
             src={props.src}
+            height={window.innerHeight - 60}
+            width={window.innerWidth - 60}
         />
     )
 }
@@ -96,6 +98,20 @@ class ContentArea extends Component {
                     />
                 );
                 break;
+            case '.html':
+                fileViewer = (
+                    <div>
+                        <iframe
+                            src={url}
+                            title="HTML Display Component"
+                            height={window.innerHeight - 60}
+                            width={window.innerWidth - 60}
+                            frameborder="0"
+                            style={{background: '#FFFFFF'}}
+                        />
+                    </div>
+                );
+                break;
             default:
                 fileViewer = (
                     <a href={url}>View in browser</a>
@@ -117,7 +133,7 @@ class ContentArea extends Component {
                 open={this.state.modalOpen}
                 onClose={this.handleModalClose}
                 closeOnEscape={true}
-                closeIcon
+                closeIcon={{ name: 'remove', size: 'big', link: true, className: 'icon-placement'}}
             >
                 <Modal.Content style={{ textAlign : 'center' }}>
                     { this.getFileViewer() }
@@ -136,6 +152,15 @@ class ContentArea extends Component {
         }
     }
 
+    formatBytes = (bytes,decimals) => {
+        if(bytes === 0) return '0 Bytes';
+        var k = 1024,
+            dm = decimals || 2,
+            sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+            i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    }
+
     renderFileList = () => {
         let dirArr = [], fileArr = [];
         for(let i=0;i<this.props.fileList.length;i++){
@@ -166,11 +191,14 @@ class ContentArea extends Component {
 
                         <span className="popup">
                             { path.relative(this.props.basePath, path.resolve(this.props.currentPath, file.name)) }
+                            { file.isDirectory ? null : <span><br/>File Size: { this.formatBytes(file.size, 2) }</span>}
+                            <br/>
+                            Uploaded On : { file.uploadedOn }
                         </span>
 
                         <Divider fitted hidden style={{ paddingTop : '0.4em' }}/>
 
-                        <div style={{ color : 'black', width : '100%', wordWrap : 'break-word' }}>
+                        <div style={{ color : 'black', width : '100%', wordWrap : 'break-word', fontSize : '16px' }}>
                             { path.basename(file.name) }
                         </div>
                     </a>
@@ -181,10 +209,10 @@ class ContentArea extends Component {
 
     render() {
         return (
-            <div style={{ minHeight : '56em', height : 'auto', padding : '0em', width : '100%' }}>
+            <div>
                 { this.renderModal() }
 
-                <Card.Group style={{ fontSize : '18px', paddingLeft : '1em', textAlign : 'left', width : '100%' }}>
+                <Card.Group style={{ fontSize : '18px', paddingLeft : '1em', paddingBottom : '3em', textAlign : 'left', width : '100%' }}>
                     {this.props.fileList.length > 0 && this.renderFileList()}
                     {this.props.fileList.length === 0 && this.renderEmptyFolder()}
                 </Card.Group>
diff --git a/ui/src/components/style.css b/ui/src/components/style.css
index 19062ab..ce3a288 100644
--- a/ui/src/components/style.css
+++ b/ui/src/components/style.css
@@ -4,19 +4,24 @@
     background-color: black;
     color: #fff;
     opacity: 0.8;
-    text-align: center;
+    text-align: left;
     padding: 5px;
-    border-radius: 6px;
-    position: absolute;
+    border-radius: 6px 0px 0px 0px;
+    position: fixed;
+    right: 0;
     bottom: 0;
-    left: 0;
     z-index: 1;
+    font-size: 16px;
 }
 
 .fileItem:hover .popup {
     visibility: visible;
 }
 
+.icon-placement {
+    float: right;
+}
+
 .watermark{
     width: 100%;
     text-align: center;
diff --git a/ui/src/index.js b/ui/src/index.js
index eff4f1d..80ac585 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -5,7 +5,6 @@ import App from './App';
 
 import './index.css';
 import 'semantic-ui-css/semantic.min.css';
-import '../node_modules/video-react/dist/video-react.css';
 
 import { FS_ROOT } from './config/config';