diff --git a/chat/consumers.py b/chat/consumers.py
index 897d060..44c1225 100644
--- a/chat/consumers.py
+++ b/chat/consumers.py
@@ -32,6 +32,8 @@ async def disconnect(self, code):
     async def receive(self, text_data=None, bytes_data=None):
         text_data_json = json.loads(text_data)
         message = text_data_json['message']
+        image_caption = text_data_json['image_caption']
+        message_type = text_data_json['message_type']
 
         # Send message to room group
         await self.channel_layer.group_send(
@@ -39,7 +41,9 @@ async def receive(self, text_data=None, bytes_data=None):
             {
                 'type': 'chat_message',
                 'username': self.scope['user'].username.title(),
-                'message': message
+                'message': message,
+                'message_type': message_type,
+                'image_caption': image_caption
             }
         )
 
@@ -48,9 +52,13 @@ async def chat_message(self, event):
         """ exhange message here """
         message = event['message']
         username = event['username']
+        image_caption = event['image_caption']
+        message_type = event['message_type']
 
         # Send message to WebSocket
         await self.send(text_data=json.dumps({
             'message': message,
-            'username': username
+            'username': username,
+            'image_caption': image_caption,
+            'message_type': message_type
         }))
diff --git a/chat/static/chat/style.css b/chat/static/chat/style.css
index c8eb42e..e49fac4 100644
--- a/chat/static/chat/style.css
+++ b/chat/static/chat/style.css
@@ -186,7 +186,7 @@
 }
 /* room side bar groups */
 
-.room-container { 
+.room-container__msg { 
     display:grid;
     width: 100%;
     min-height: 99vh;
@@ -198,6 +198,19 @@
                          "msg-input";
 }
 
+.room-container__preview-img {
+    display:grid;
+    width: 100%;
+    height:99vh;
+    grid-template-rows: 59px auto;
+    grid-template-areas: "msg-header"
+                         "preview-msg-box";
+}
+
+.preview-img-box {
+    grid-area: preview-msg-box;
+}
+
 .msg-header {
     grid-area: msg-header;
     background-color: #EDEDED;
@@ -267,11 +280,161 @@ svg {
     grid-area: msg-box;
     padding-left:4rem;
     padding-right:4rem;
-    /*background-color: #e5ddd5; */
+}
+
+.msg-box--background {
     background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
     overflow-y: scroll;
 }
 
+.preview-img {
+    background-color: #EEE;
+    display: grid;
+    padding:0;
+    grid-template-rows: 49px 1fr 60px 120px;
+    gap: 2rem;
+}
+
+.preview-img__header {
+    background-color: #00bfa5ff;
+    display: grid;
+    grid-template-columns: 42px auto;
+    align-items: center;
+    align-content: center;
+    padding: 1.5rem;
+}
+
+.preview-img__header__close {
+    display: grid; /* need this to remove svg padding bottom */
+}
+
+.preview-img__header__label {
+    font-size: 19px;
+    /* overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis; */
+    font-weight: 500;
+    color: white;
+}
+
+.preview-img__snipped-big {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    justify-content: center;
+}
+
+.preview-img__snipped-big__border {
+    display:grid;
+    justify-content: center;
+}
+
+.preview-img__snipped-big__border img {
+    height:100%;
+    object-fit: cover; 
+}
+
+
+.preview-img__caption {
+    justify-self: center;
+    align-self: end;
+    width: 75%;
+    display: grid;
+    grid-template-columns: auto 50px;
+    padding-right: .5rem;
+    margin-bottom:.75rem;
+    border-bottom: 2px solid #00bfa5ff;
+}
+
+.preview-img__caption input[type="text"] {
+    width: 100%;
+    padding: 0px 0px 3px;
+    margin: 6px 0px;
+    box-sizing: border-box;  
+    outline:none;
+    border:0;
+    background-color:inherit;
+    font-size: 1rem;
+}
+
+.preview-img__caption__emoji {
+    justify-self: right;
+}
+
+.preview-img__footer {
+    background-color: #d9d9d9ff;
+    display: grid;
+    grid-template-columns: 1fr 78px 78px 1fr;
+    grid-template-areas: ". img-small add-file btn-img-send";
+    gap: .25rem;
+    padding-top: 1.5rem;
+    padding-left: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-right: 2.5rem;
+    position: relative;
+}
+
+.preview-img__footer__img-small {
+    background-color: white;
+    padding:5px;
+    grid-area: img-small;
+    width: 100%;
+    height: 100%;
+}
+
+.preview-img__footer__img-small img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.preview-img__footer__addfile {
+    background-color: white;
+    padding:8px;
+    width: 100%;
+    grid-area: add-file;
+    display: grid;
+    align-items: center;
+    justify-self: center;
+    gap: .2rem;
+}
+
+.preview-img__footer__addfile__img {
+    justify-self: center;
+    align-self: end;
+    display: grid;
+}
+
+.preview-img__footer__addfile__label {
+    justify-self: center;
+    align-self: start;
+    font-size: .68rem;
+    font-weight: 600;
+    color: #00A5F4;
+}
+
+.preview-img__footer__button {
+    justify-self: end;
+    grid-area: btn-img-send;
+    padding: 0;
+    background-color: #09e85eff;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0,0,0,.4);
+    width: 60px;
+    height: 60px;
+    display:grid;
+    align-items: center;
+    justify-items: center;
+    position:absolute;
+    top: -55px;
+
+}
+
+.preview-img__footer__button-arrow {
+    display: grid;
+}
+
+
 .msg-input {
     grid-area: msg-input;
     padding: 1rem;
@@ -328,7 +491,7 @@ svg {
     padding: 0.5rem;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 1fr 20px;
     grid-template-areas: "s-msg"
                          "s-time";
 
@@ -344,7 +507,7 @@ svg {
     padding: 0.5rem;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 20px 1fr;
     grid-template-areas: "r-user"
                          "r-msg"
                          "r-time";
@@ -362,6 +525,11 @@ svg {
     font-size: .90rem;
 }
 
+.s-msg img {
+    max-width: 330px;
+    max-height: 249px;
+}
+
 .s-time {
     grid-area: s-time;
     font-size: .70rem;
@@ -390,6 +558,11 @@ svg {
     font-size: .90rem;
 }
 
+.r-msg img {
+    max-width: 330px;
+    max-height: 249px;
+}
+
 .r-time {
     grid-area: r-time;
     font-size: .70rem;
diff --git a/chat/templates/chat/room.html b/chat/templates/chat/room.html
index aed14a6..d5fc531 100644
--- a/chat/templates/chat/room.html
+++ b/chat/templates/chat/room.html
@@ -70,42 +70,19 @@
                 <!-- room side bar groups -->
 
             </div>
-        <div class="room-container">
-                <!-- msg chat header -->
-                <div class="msg-header mat-elevation-z6">
-                    <div class="h-avatar"><img src="{{chatgroup.icon.url}}"></div>
-                    <div class="h-users">
-                        <div class="h-user-group">{{chatgroup.name|title}}</div>
-                        <div class="h-user-member">{{participants}}</div>
-                    </div>
-                    <div class="h-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3 6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2 0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z"></path></svg></div>
-                    <div class="h-attach"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171 3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205 7.207a5.577 5.577 0 0 0-1.645 3.971z"></path></svg></div>
-                    <div class="h-menu"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg></div>
-                </div>
-                <!-- msg chat header -->
 
-                <!-- msg box -->
-                <div class="msg-box" >
-                    <div id="new-message-chat"></div>
-                </div>
-                <!-- msg box -->
+            <div id='room-message'>
+                {% include 'chat/room_message.html' %} 
+            </div>
+
+            <div id='room-preview-img' style='display:none' >
+                {% include 'chat/room_preview_image.html' %} 
+            </div>
 
-                <!-- msg input -->
-                <div class="msg-input">
-                    <div class="emoji">
-                        <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" id="smiley" x="3147" y="3209"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z" fill="#7d8489"/></svg>
-                    </div>
-                    <div class="type-a-message">
-                        <input id="chat-message-input" type="text" placeholder="Type a message"><br>
-                    </div>
-                    <div class="mic">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd"  d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.531-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path></svg>
-                    </div>
-                </div>
-                <!-- msg input -->
-        </div>
         </div>
+
     <script>
+        
         const roomId = '{{chatgroup.id}}'
 
         const chatSocket = new WebSocket(
@@ -114,7 +91,7 @@
 
         chatSocket.onmessage = function(e) {
             const data = JSON.parse(e.data);
-            broadcastMessage(data.message, data.username)
+            broadcastMessage(data.message, data.username, data.message_type, data.image_caption)
             scrollBottom()
         };
 
@@ -129,11 +106,33 @@
                 const messageInputDom = document.querySelector('#chat-message-input');
                 const message = messageInputDom.value;
                 chatSocket.send(JSON.stringify({
-                    'message': message
+                    'message': message,
+                    'message_type': 'text',
+                    'image_caption': null
                 }));
                 messageInputDom.value = '';
             }
         };
+        
+        document.querySelector('#chat-message-input').onpaste = function(e) {
+            let item = e.clipboardData.items[0];
+            console.log(item);
+            if (item.type.includes('image')) {
+                let blob = item.getAsFile();
+
+                let reader = new FileReader();
+                reader.onload = function(event) {
+                    document.getElementById("snipped-big-img").src = event.target.result;
+                    document.getElementById('snipped-small-img').src = event.target.result;
+                };
+
+                reader.readAsDataURL(blob);
+                document.querySelector('#room-preview-img').style.display = 'grid';
+                document.querySelector('#room-message').style.display = 'none';
+                document.querySelector('#add-caption-input').focus();
+            }
+
+        }
 
         function scrollBottom() {
             let msgbox = document.querySelector(".msg-box")
@@ -147,10 +146,14 @@
 
         }
     
-        function broadcastMessage(msg, user) { 
+        function broadcastMessage(msg, user, msg_type, img_caption) { 
             // create a new div element 
             let newDiv = document.createElement("div"); 
             // and give it some content 
+            console.log(msg_type, 'broadcastMessage')
+            if (msg_type == 'image') {
+                msg = `<img src="${msg}"> <br/> ${img_caption}`;
+            }
 
             if (user == '{{request.user.username|title}}') {
                 var msg1 = `<div class="right-msg-container">
@@ -178,14 +181,56 @@
             let parentDiv = currentDiv.parentNode;
             parentDiv.insertBefore(newDiv, currentDiv); 
 
-            // side bar group time
-            document.getElementById('rsb-g{{chatgroup.id}}').innerHTML = `${user}: ${msg}`;
-            document.getElementById('rsb-t{{chatgroup.id}}').innerHTML = getTime();
+            setSidebarMessage(msg_type, user, msg);
+
+        }
+
+        document.getElementById('btnClosePreviewImg').onclick = function(e) {
+            goRoomMsg();
+        }
+
+        document.getElementById('btnSendImg').onclick = function(e) {
+            sendImage();
+            goRoomMsg();
+        }
+        document.querySelector('#add-caption-input').onkeyup = function(e) {
+            if (e.keyCode === 13) {  // enter, return
+                sendImage();
+                goRoomMsg();
+            }
         }
 
         function redirect(url) {
             window.location = url;
         }
 
+        function goRoomMsg() {
+            document.querySelector('#room-message').style.display = 'grid';
+            document.querySelector('#room-preview-img').style.display = 'none';
+            document.getElementById("snipped-big-img").src = '';
+            document.getElementById("snipped-small-img").src = '';
+            document.querySelector('#add-caption-input').value = '';
+            document.querySelector('#chat-message-input').focus();
+        }
+
+        function setSidebarMessage(msg_type, user, msg) {
+            // side bar message
+            if (msg_type == 'image') {
+                document.getElementById('rsb-g{{chatgroup.id}}').innerHTML = 'Photo';
+            } else {
+                document.getElementById('rsb-g{{chatgroup.id}}').innerHTML = `${user}: ${msg}`;
+            }
+            document.getElementById('rsb-t{{chatgroup.id}}').innerHTML = getTime();
+        }
+
+
+        function sendImage() {
+            chatSocket.send(JSON.stringify({
+                'message': document.getElementById("snipped-big-img").src,
+                'message_type': 'image',
+                'image_caption': document.querySelector('#add-caption-input').value
+            }));
+        }
+
     </script>
 {% endblock content %}
\ No newline at end of file
diff --git a/chat/templates/chat/room_message.html b/chat/templates/chat/room_message.html
new file mode 100644
index 0000000..e0fce34
--- /dev/null
+++ b/chat/templates/chat/room_message.html
@@ -0,0 +1,35 @@
+<div class="room-container__msg">
+        <!-- msg chat header -->
+        <div class="msg-header mat-elevation-z6">
+            <div class="h-avatar"><img src="{{chatgroup.icon.url}}"></div>
+            <div class="h-users">
+                <div class="h-user-group">{{chatgroup.name|title}}</div>
+                <div class="h-user-member">{{participants}}</div>
+            </div>
+            <div class="h-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3 6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2 0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z"></path></svg></div>
+            <div class="h-attach"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171 3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205 7.207a5.577 5.577 0 0 0-1.645 3.971z"></path></svg></div>
+            <div class="h-menu"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg></div>
+        </div>
+        <!-- msg chat header -->
+
+        <!-- msg box  -->
+        <div class="msg-box msg-box--background" >
+            <div id="new-message-chat"></div>
+        </div>
+        <!-- msg box -->
+
+        <!-- msg input -->
+        <div class="msg-input">
+            <div class="emoji">
+                <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" id="smiley" x="3147" y="3209"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z" fill="#7d8489"/></svg>
+            </div>
+            <div class="type-a-message">
+                <input id="chat-message-input" type="text" placeholder="Type a message"><br>
+            </div>
+            <div class="mic">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd"  d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.531-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path></svg>
+            </div>
+        </div>
+        <!--  msg input -->
+
+</div>
\ No newline at end of file
diff --git a/chat/templates/chat/room_preview_image.html b/chat/templates/chat/room_preview_image.html
new file mode 100644
index 0000000..46c1d5a
--- /dev/null
+++ b/chat/templates/chat/room_preview_image.html
@@ -0,0 +1,53 @@
+<div class="room-container__preview-img" >
+        <!-- msg chat header -->
+        <div class="msg-header mat-elevation-z6">
+            <div class="h-avatar"><img src="{{chatgroup.icon.url}}"></div>
+            <div class="h-users">
+                <div class="h-user-group">{{chatgroup.name|title}}</div>
+                <div class="h-user-member">{{participants}}</div>
+            </div>
+            <div class="h-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3 6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2 0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z"></path></svg></div>
+            <div class="h-attach"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171 3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205 7.207a5.577 5.577 0 0 0-1.645 3.971z"></path></svg></div>
+            <div class="h-menu"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg></div>
+        </div>
+        <!-- msg chat header -->
+        
+        <div id='room-preview-img' class="preview-img-box preview-img">
+
+            <div class="preview-img__header">
+                <div class="preview-img__header__close"><svg xmlns="http://www.w3.org/2000/svg" id="btnClosePreviewImg" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="none" ><path fill="#b0ebe2ff" d="M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z"></path></svg></div>
+                <div class="preview-img__header__label">Preview</div>
+            </div>
+
+            <div class="preview-img__snipped-big">
+                <div class='preview-img__snipped-big__border'><img id='snipped-big-img' ></div>
+            </div>
+
+            <div class="preview-img__caption">
+                <span class='preview-img__caption__add'><input id='add-caption-input' type="text" placeholder="Add a caption..."></span>
+                <span class='preview-img__caption__emoji'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path fill="currentColor" d="M9.5 1.7C4.8 1.7 1 5.5 1 10.2s3.8 8.5 8.5 8.5 8.5-3.8 8.5-8.5-3.8-8.5-8.5-8.5zm0 15.9c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4 7.4 3.3 7.4 7.4-3.3 7.4-7.4 7.4z"></path><path fill="currentColor" d="M6.8 9.8c.7-.1 1.2-.7 1.1-1.4-.1-.6-.5-1.1-1.1-1.1-.7 0-1.2.7-1.1 1.4 0 .6.5 1 1.1 1.1zM13.9 11.6c-1.4.2-2.9.3-4.4.4-1.5 0-2.9-.1-4.4-.4-.2 0-.4.1-.4.3v.2c.9 1.8 2.7 2.9 4.7 3 2-.1 3.8-1.2 4.8-3 .1-.2 0-.4-.1-.5h-.2zm-4.1 2c-2.3 0-3.5-.8-3.7-1.4 2.3.4 4.6.4 6.9 0 0 .1-.4 1.4-3.2 1.4zM12.2 9.8c.7-.1 1.2-.7 1.1-1.4-.1-.6-.5-1.1-1.1-1.1-.7 0-1.2.7-1.1 1.4.1.6.5 1 1.1 1.1z"></path></svg></span>
+            </div>
+
+            <div class='preview-img__footer'>
+
+                <div class="preview-img__footer__img-small">
+                    <img id='snipped-small-img'>
+                </div>
+
+                <div class="preview-img__footer__addfile">
+                    <div class="preview-img__footer__addfile__img">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="none"><path fill="#00A5F4" d="M20 13.5h-6.5V20h-2.9v-6.5H4v-2.9h6.5V4h2.9v6.5H20v3z"></path></svg>
+                    </div>
+                    <div class="preview-img__footer__addfile__label">
+                        ADD FILE
+                    </div>
+                </div>
+                <div class="preview-img__footer__button">
+                    <div class="preview-img__footer__button-arrow">
+                        <svg id='btnSendImg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="none" width="24" height="24"><path fill="white" d="M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z"></path></svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+</div>
\ No newline at end of file