diff --git a/src/components/Home/Chat/Chat.js b/src/components/Home/Chat/Chat.js
index b47a257..d311092 100644
--- a/src/components/Home/Chat/Chat.js
+++ b/src/components/Home/Chat/Chat.js
@@ -10,6 +10,11 @@ import { useSelector } from 'react-redux'
 import { selectActiveConversation } from '../../../state/actions/conversations'
 import FileDialog from './FileDialog'
 
+export const fileTypes = {
+  image: 'image',
+  video: 'video',
+}
+
 const useStyles = makeStyles({
   root: {
     flex: 1,
@@ -48,6 +53,7 @@ const Chat = () => {
       id: msgId,
       text,
       ...(file ? { file: 'pending' } : {}),
+      ...(file ? { fileType: Object.keys(fileTypes).find(type => file.type.includes(type)) } : {}),
       from: currentUser.uid,
       date: new Date(),
     })
diff --git a/src/components/Home/Chat/Messages.js b/src/components/Home/Chat/Messages.js
index 1b64ef5..b8acc8b 100644
--- a/src/components/Home/Chat/Messages.js
+++ b/src/components/Home/Chat/Messages.js
@@ -18,6 +18,7 @@ import Drawer from '@material-ui/core/Drawer'
 import Fab from '@material-ui/core/Fab'
 import CloseIcon from '@material-ui/icons/Close'
 import EmojiText from './EmujiText'
+import { fileTypes } from './Chat'
 
 const useStyles = makeStyles({
   root: {
@@ -128,6 +129,10 @@ const useStyles = makeStyles({
     flex: 'initial',
     flexDirection: 'row',
   },
+  video: {
+    width: '100%',
+    height: ' auto',
+  },
 })
 
 const Messages = ({ isDragOn }, listRef) => {
@@ -241,7 +246,8 @@ const Messages = ({ isDragOn }, listRef) => {
               {
                 messages.map((message) => (
                   <React.Fragment key={message.id}>
-                    <ListItem className={message.from === currentUserId ? classes.listItemSelf : classes.listItem}>
+                    <ListItem
+                      className={message.from === currentUserId ? classes.listItemSelf : classes.listItem}>
                       <ListItemAvatar className={classes.avatar}>
                         <Avatar src={users[message.from].photoURL} />
                       </ListItemAvatar>
@@ -249,9 +255,22 @@ const Messages = ({ isDragOn }, listRef) => {
                         message.file && (
                           message.file !== 'pending' ? (
                             <div className={classes.imgContainer}>
-                              <Button onClick={() => setZoomImg(message.file)}>
-                                <img className={classes.img} src={message.file} />
-                              </Button>
+                              {
+                                message.fileType && (
+                                  message.fileType === fileTypes.image ? (
+                                    <Button
+                                      onClick={() => setZoomImg(message.file)}>
+                                      <img className={classes.img}
+                                           src={message.file} />
+                                    </Button>
+                                  ) : message.fileType === fileTypes.video ? (
+                                    <video className={classes.video} controls>
+                                      <source src={message.file}
+                                              type="video/mp4" />
+                                    </video>
+                                  ) : <h3>none</h3>
+                                )
+                              }
                             </div>
                           ) : <CircularProgress color="secondary" />
                         )