diff --git a/addon/components/chat-container.js b/addon/components/chat-container.js
index 4530787..f81ecf3 100644
--- a/addon/components/chat-container.js
+++ b/addon/components/chat-container.js
@@ -3,4 +3,8 @@ import { inject as service } from '@ember/service';
 
 export default class ChatContainerComponent extends Component {
     @service chat;
+    constructor() {
+        super(...arguments);
+        this.chat.restoreOpenedChats();
+    }
 }
diff --git a/addon/components/chat-tray.js b/addon/components/chat-tray.js
index e3ab845..a82668f 100644
--- a/addon/components/chat-tray.js
+++ b/addon/components/chat-tray.js
@@ -29,6 +29,7 @@ export default class ChatTrayComponent extends Component {
     }
 
     @action removeChannel(chatChannelRecord) {
+        this.chat.closeChannel(chatChannelRecord);
         this.chat.deleteChatChannel(chatChannelRecord);
         this.reloadChannels();
     }
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 884853a..2b3b1fe 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,4 +1,4 @@
-<div class="chat-window-container" {{did-insert this.positionWindow}} ...attributes>
+<div class="chat-window-container {{if this.pendingAttachmentFiles "has-attachments"}}" {{did-insert this.positionWindow}} ...attributes>
     <div class="chat-window-controls-container">
         <div class="chat-window-name">
             {{n-a this.channel.name "Untitled Chat"}}
@@ -11,7 +11,7 @@
                             <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant user)}}>
                                 <div class="flex-1 flex flex-row items-center">
                                     <div class="w-6">
-                                        <FaIcon @icon="user" />
+                                        <FaIcon @icon="user" @size="xs" />
                                     </div>
                                     <span>{{user.name}}</span>
                                 </div>
@@ -39,31 +39,15 @@
             </div>
         {{/each}}
     </div>
-    <div class="chat-window-messages-container" {{did-insert this.autoScrollMessagesWindow}}>
+    <div class="chat-window-messages-container" {{did-insert this.scrollMessageWindowBottom}}>
         <div class="chat-window-messages">
-            {{#each this.channel.messages as |chatMessage|}}
-                <div class="chat-message-container">
-                    <div class="chat-message-sender-bubble">
-                        <Image src={{chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.sender.name}} />
-                        <div class="chat-message-sender-name">{{chatMessage.sender.name}}</div>
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                            <InputInfo @text={{chatMessage.sender.name}} />
-                        </Attach::Tooltip>
-                    </div>
-                    <div class="chat-message-content-bubble-container">
-                        <div class="chat-message-content-bubble {{if (eq chatMessage.sender_uuid this.currentUser.id) 'sender-bubble'}}">
-                            {{chatMessage.content}}
-                        </div>
-                        <div class="chat-message-created-at">{{chatMessage.createdAgo}}</div>
-                    </div>
-                </div>
-            {{/each}}
+            <ChatWindow::Feed @channel={{this.channel}} />
         </div>
     </div>
-    <div class="chat-window-input-container">
+    <div class="chat-window-input-container {{if this.pendingAttachmentFiles "has-attachments"}}">
         <div class="chat-window-attachments-container">
             <div class="chat-window-attachment-input">
-                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.onFileAddedHandler}}>
+                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{perform this.uploadAttachmentFile}}>
                     <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
                         <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
                         <span>Add Attachment</span>
@@ -76,15 +60,19 @@
                     </div>
                 {{/if}}
             </div>
-            {{#each this.pendingAttachmentFiles as |pendingFile|}}
-                <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
-            {{/each}}
+            {{#if this.pendingAttachmentFiles}}
+                <div class="chat-window-pending-attachments-container">
+                    {{#each this.pendingAttachmentFiles as |pendingFile|}}
+                        <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
+                    {{/each}}
+                </div>
+            {{/if}}
         </div>
         <div class="chat-window-input-box">
             <Textarea @value={{this.pendingMessageContent}} placeholder="Type your message here" class="chat-window-input" rows="3" />
         </div>
         <div class="chat-window-submit-container">
-            <Button @type="primary" @icon="paper-plane" @text="Send" @size="xs" @onClick={{this.sendMessage}} />
+            <Button @type="primary" @icon="paper-plane" @text="Send" @size="xs" @onClick={{perform this.sendMessage}} @disabled={{not this.pendingMessageContent}} @isLoading={{and (not this.sendMessage.isIdle) (not this.uploadAttachmentFile.isIdle)}} />
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index ce67b41..d2c29f8 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -58,13 +58,19 @@ export default class ChatWindowComponent extends Component {
                     this.channel.reloadParticipants();
                     break;
                 case 'chat_message.created':
-                    this.chat.insertMessageFromSocket(this.channel, socketEvent.data);
+                    this.chat.insertChatMessageFromSocket(this.channel, socketEvent.data);
+                    break;
+                case 'chat_log.created':
+                    this.chat.insertChatLogFromSocket(this.channel, socketEvent.data);
+                    break;
+                case 'chat_attachment.created':
+                    this.chat.insertChatAttachmentFromSocket(this.channel, socketEvent.data);
                     break;
             }
         });
     }
 
-    @action onFileAddedHandler(file) {
+    @task *uploadAttachmentFile(file) {
         // since we have dropzone and upload button within dropzone validate the file state first
         // as this method can be called twice from both functions
         if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
@@ -75,7 +81,7 @@ export default class ChatWindowComponent extends Component {
         this.pendingAttachmentFile = file;
 
         // Queue and upload immediatley
-        this.fetch.uploadFile.perform(
+        yield this.fetch.uploadFile.perform(
             file,
             {
                 path: `uploads/chat/${this.channel.id}/attachments`,
@@ -101,36 +107,11 @@ export default class ChatWindowComponent extends Component {
         this.pendingAttachmentFiles.removeObject(pendingFile);
     }
 
-    @action sendMessage() {
-        this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent).then((chatMessageRecord) => {
-            this.sendAttachments(chatMessageRecord);
-        });
+    @task *sendMessage() {
+        const attachments = this.pendingAttachmentFiles.map((file) => file.id);
+        yield this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent, attachments);
         this.pendingMessageContent = '';
-    }
-
-    @action sendAttachments(chatMessageRecord) {
-        // create file attachments
-        const attachments = this.pendingAttachmentFiles.map((file) => {
-            const attachment = this.store.createRecord('chat-attachment', {
-                chat_channel_uuid: this.channel.id,
-                file_uuid: file.id,
-                sender_uuid: this.sender.id,
-            });
-
-            if (chatMessageRecord) {
-                attachment.set('chat_message_uuid', chatMessageRecord.id);
-            }
-
-            return attachment;
-        });
-
-        // clear pending attachments
         this.pendingAttachmentFiles = [];
-
-        // save attachments
-        return all(attachments.map((_) => _.save())).then((response) => {
-            console.log(response);
-        });
     }
 
     @action closeChannel() {
@@ -156,7 +137,7 @@ export default class ChatWindowComponent extends Component {
     @action positionWindow(chatWindowElement) {
         const chatWindowWidth = chatWindowElement.offsetWidth;
         const multiplier = this.chat.openChannels.length - 1;
-        const marginRight = (chatWindowWidth + 20) * multiplier;
+        const marginRight = multiplier === 0 ? 16 : (chatWindowWidth + 16) * multiplier;
         chatWindowElement.style.marginRight = `${marginRight}px`;
 
         // reposition when chat is closed
@@ -165,11 +146,8 @@ export default class ChatWindowComponent extends Component {
         });
     }
 
-    @action autoScrollMessagesWindow(messagesWindowContainerElement) {
+    @action scrollMessageWindowBottom(messagesWindowContainerElement) {
         messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
-        setInterval(() => {
-            messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
-        }, 1000);
     }
 
     @task *loadAvailableUsers(params = {}) {
diff --git a/addon/components/chat-window/attachment.hbs b/addon/components/chat-window/attachment.hbs
index fb5c4b1..69f17d2 100644
--- a/addon/components/chat-window/attachment.hbs
+++ b/addon/components/chat-window/attachment.hbs
@@ -1 +1,15 @@
-{{yield}}
\ No newline at end of file
+<a href="#" class="chat-attachment-container" {{on "click" this.download}}>
+    {{#if this.chatAttachment.isImage}}
+        <Image src={{this.chatAttachment.url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{this.chatAttachment.filename}} class="chat-attachment-image-preview" />
+    {{else}}
+        <div class="chat-attachment-file-preview">
+            <div class="file-icon file-icon-{{this.extension}}">
+                <FaIcon @icon={{this.icon}} />
+            </div>
+            <div class="chat-attachment-file-preview-filename">{{this.chatAttachment.filename}}</div>
+        </div>
+    {{/if}}
+    <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+        <InputInfo @text="Click to download attachment" />
+    </Attach::Tooltip>
+</a>
\ No newline at end of file
diff --git a/addon/components/chat-window/attachment.js b/addon/components/chat-window/attachment.js
index 81dd870..d353f01 100644
--- a/addon/components/chat-window/attachment.js
+++ b/addon/components/chat-window/attachment.js
@@ -1,3 +1,47 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
-export default class ChatWindowAttachmentComponent extends Component {}
+export default class ChatWindowAttachmentComponent extends Component {
+    @tracked chatAttachment;
+    @tracked icon;
+
+    constructor(owner, { record }) {
+        super(...arguments);
+        this.chatAttachment = record;
+        this.icon = this.getIcon(record);
+    }
+
+    @action download() {
+        return this.chatAttachment.download();
+    }
+
+    getExtension(chatAttachment) {
+        const filename = chatAttachment.filename;
+        const extensionMatch = filename.match(/\.(.+)$/);
+        return extensionMatch ? extensionMatch[1] : null;
+    }
+
+    getIcon(chatAttachment) {
+        this.extension = this.getExtension(chatAttachment);
+
+        return getWithDefault(
+            {
+                xlsx: 'file-excel',
+                xls: 'file-excel',
+                xlsb: 'file-excel',
+                xlsm: 'file-excel',
+                csv: 'file-spreadsheet',
+                tsv: 'file-spreadsheet',
+                docx: 'file-word',
+                docm: 'file-word',
+                pdf: 'file-pdf',
+                ppt: 'file-powerpoint',
+                pptx: 'file-powerpoint',
+            },
+            this.extension,
+            'file-alt'
+        );
+    }
+}
diff --git a/addon/components/chat-window/feed.hbs b/addon/components/chat-window/feed.hbs
index fb5c4b1..baaea44 100644
--- a/addon/components/chat-window/feed.hbs
+++ b/addon/components/chat-window/feed.hbs
@@ -1 +1,7 @@
-{{yield}}
\ No newline at end of file
+{{#if (has-block)}}
+    {{yield @channel.feed}}
+{{else}}
+    {{#each @channel.feed as |item|}}
+        {{component (concat "chat-window/" item.type) record=item.record}}
+    {{/each}}
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/chat-window/log.hbs b/addon/components/chat-window/log.hbs
index fb5c4b1..9a4736c 100644
--- a/addon/components/chat-window/log.hbs
+++ b/addon/components/chat-window/log.hbs
@@ -1 +1,8 @@
-{{yield}}
\ No newline at end of file
+<div class="chat-log-container">
+    <div class="chat-log-content-bubble-container">
+        <div class="chat-log-content-bubble">
+            {{this.chatLog.resolved_content}}
+        </div>
+        <div class="chat-log-created-at">{{this.chatLog.createdAgo}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window/log.js b/addon/components/chat-window/log.js
index dfc184b..6ac5139 100644
--- a/addon/components/chat-window/log.js
+++ b/addon/components/chat-window/log.js
@@ -1,3 +1,10 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default class ChatWindowLogComponent extends Component {}
+export default class ChatWindowLogComponent extends Component {
+    @tracked chatLog;
+    constructor(owner, { record }) {
+        super(...arguments);
+        this.chatLog = record;
+    }
+}
diff --git a/addon/components/chat-window/message.hbs b/addon/components/chat-window/message.hbs
index fb5c4b1..b07f142 100644
--- a/addon/components/chat-window/message.hbs
+++ b/addon/components/chat-window/message.hbs
@@ -1 +1,22 @@
-{{yield}}
\ No newline at end of file
+<div class="chat-message-container {{if this.chatMessage.attachments "has-attachments"}}">
+    <div class="chat-message-sender-bubble">
+        <Image src={{this.chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.chatMessage.sender.name}} />
+        <div class="chat-message-sender-name">{{this.chatMessage.sender.name}}</div>
+        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+            <InputInfo @text={{this.chatMessage.sender.name}} />
+        </Attach::Tooltip>
+    </div>
+    <div class="chat-message-content-bubble-container {{if this.chatMessage.attachments "has-attachments"}}">
+        {{#if this.chatMessage.attachments}}
+            <div class="chat-message-attachments-container">
+                {{#each this.chatMessage.attachments as |attachment|}}
+                    <ChatWindow::Attachment @record={{attachment}} />
+                {{/each}}
+            </div>
+        {{/if}}
+        <div class="chat-message-content-bubble {{if (eq this.chatMessage.sender_uuid this.currentUser.id) 'sender-bubble'}}">
+            {{this.chatMessage.content}}
+        </div>
+        <div class="chat-message-created-at">{{this.chatMessage.createdAgo}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window/message.js b/addon/components/chat-window/message.js
index d754913..ca5fe1c 100644
--- a/addon/components/chat-window/message.js
+++ b/addon/components/chat-window/message.js
@@ -1,3 +1,10 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default class ChatWindowMessageComponent extends Component {}
+export default class ChatWindowMessageComponent extends Component {
+    @tracked chatMessage;
+    constructor(owner, { record }) {
+        super(...arguments);
+        this.chatMessage = record;
+    }
+}
diff --git a/addon/components/chat-window/pending-attachment.hbs b/addon/components/chat-window/pending-attachment.hbs
index ed06d8d..ff3f589 100644
--- a/addon/components/chat-window/pending-attachment.hbs
+++ b/addon/components/chat-window/pending-attachment.hbs
@@ -1,7 +1,7 @@
 <div class="chat-window-pending-attachment">
     <div class="chat-window-pending-attachment-preview">
         {{#if this.isImage}}
-            <Image src={{@file.url}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
+            <Image src={{@file.url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
         {{else}}
             <div class="x-fleetbase-file-preview">
                 <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="2xl" />
@@ -12,24 +12,10 @@
         {{truncate-filename @file.original_filename}}
     </div>
     <div class="chat-window-pending-attachment-actions">
-        <DropdownButton @dropdownId="x-fleetbase-file-actions-dropdown" @icon="ellipsis" @iconSize="xs" @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
-            <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                <div class="px-1">
-                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
-                        {{t "component.file.dropdown-label"}}
-                    </div>
-                </div>
-                <div class="next-dd-menu-seperator"></div>
-                <div role="group" class="px-1">
-                    {{!-- template-lint-disable no-nested-interactive --}}
-                    <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onRemove" dd)}}>
-                        <span class="mr-1">
-                            <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
-                        </span>
-                        {{t "common.delete"}}
-                    </a>
-                </div>
-            </div>
-        </DropdownButton>
+        <a href="javascript:;" {{on "click" this.remove}}>
+            <span class="mr-1">
+                <FaIcon @icon="trash" class="text-red-500" />
+            </span>
+        </a>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window/pending-attachment.js b/addon/components/chat-window/pending-attachment.js
index cadb3e0..ef79feb 100644
--- a/addon/components/chat-window/pending-attachment.js
+++ b/addon/components/chat-window/pending-attachment.js
@@ -13,13 +13,9 @@ export default class ChatWindowPendingAttachmentComponent extends Component {
         this.isImage = this.isImageFile(file);
     }
 
-    @action onDropdownItemClick(action, dd) {
-        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof this.args[action] === 'function') {
-            this.args[action](this.file);
+    @action remove() {
+        if (typeof this.args.onRemove === 'function') {
+            this.args.onRemove(this.file);
         }
     }
 
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index 52f4a7e..5df994f 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -1,6 +1,21 @@
 .chat-tray-panel-container {
-    @apply mt-3 bg-white border border-gray-200 shadow-md rounded-lg dark:bg-gray-900 dark:border-gray-700 space-y-2 truncate;
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 0.1),
+        0 2px 4px -2px rgb(0 0 0 / 0.1);
+    margin-top: 0.75rem;
+    background-color: #f9fafb;
+    border: 1px #e5e7eb solid;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     width: 400px;
+    @apply space-y-2;
+}
+
+body[data-theme='dark'] .chat-tray-panel-container {
+    background-color: #111827;
+    border-color: #374151;
 }
 
 .chat-container {
@@ -20,44 +35,72 @@
     display: flex;
     flex-direction: column;
     width: 360px;
-    height: 400px;
+    height: 483px;
+    min-height: 483px;
+    max-height: 553px;
     box-shadow:
         0 4px 6px -1px rgb(0 0 0 / 0.1),
         0 2px 4px -2px rgb(0 0 0 / 0.1);
-    border: 1px #94a3b8 solid;
-    border-radius: 0.5rem;
-    background-color: #d1d5db;
+    border: 1px #d1d5db solid;
+    border-radius: 1rem;
+    background-color: #f9fafb;
 }
 
-.chat-window-container:first-child {
-    margin-right: 2rem;
+.chat-window-container.has-attachments {
+    min-height: 513px;
+}
+
+body[data-theme='dark'] .chat-window-container {
+    background-color: #1f2937;
+    border-color: #374151;
+}
+
+.chat-window-container a,
+.chat-window-container button {
+    cursor: default !important;
 }
 
 .chat-window-input-container {
     display: flex;
     flex-direction: column;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
     border-bottom-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
 }
 
+body[data-theme='dark'] .chat-window-input-container {
+    background-color: #1f2937;
+}
+
 .chat-window-input-box {
     flex: 1;
     width: 100%;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
+}
+
+body[data-theme='dark'] .chat-window-input-box {
+    background-color: #1f2937;
 }
 
 .chat-window-input {
+    height: 80px;
+    max-height: 80px;
+    min-height: 80px;
     flex: 1;
-    border-radius: 1rem;
     padding: 0.6rem;
-    background-color: #d1d5db;
+    font-size: 0.75rem;
+    background-color: #f9fafb;
     width: 100%;
     border: 0;
     outline: none;
     box-shadow: none;
 }
 
+body[data-theme='dark'] .chat-window-input {
+    background-color: #1f2937;
+    color: #f9fafb;
+}
+
 .chat-window-input:focus {
     border: 0;
     outline: none;
@@ -88,6 +131,15 @@
     color: #f9fafb;
 }
 
+body[data-theme='dark'] .chat-window-attachment-input a.btn.btn-xs,
+body[data-theme='dark'] .chat-window-attachment-input a,
+body[data-theme='dark'] .chat-window-submit-container button.btn.btn-xs,
+body[data-theme='dark'] .chat-window-submit-container button {
+    background-color: #374151;
+    color: #f3f4f6;
+    border-color: #111827;
+}
+
 .chat-window-attachment-input a.btn.btn-xs:hover,
 .chat-window-attachment-input a:hover,
 .chat-window-submit-container button.btn.btn-xs:hover,
@@ -98,16 +150,30 @@
     opacity: 0.5;
 }
 
+body[data-theme='dark'] .chat-window-attachment-input a.btn.btn-xs:hover,
+body[data-theme='dark'] .chat-window-attachment-input a:hover,
+body[data-theme='dark'] .chat-window-submit-container button.btn.btn-xs:hover,
+body[data-theme='dark'] .chat-window-submit-container button:hover {
+    background-color: #374151;
+    color: #f3f4f6;
+    border-color: #111827;
+    opacity: 0.5;
+}
+
 .chat-window-controls-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
     padding: 0.5rem 0.5rem;
 }
 
+body[data-theme='dark'] .chat-window-controls-container {
+    background-color: #1f2937;
+}
+
 .chat-window-controls-container .chat-window-name {
     display: flex;
     align-items: center;
@@ -118,6 +184,11 @@
     flex: 1;
 }
 
+body[data-theme='dark'] .chat-window-controls-container,
+body[data-theme='dark'] .chat-window-controls-container .chat-window-name {
+    color: #fff;
+}
+
 .chat-window-controls-container .chat-window-controls {
     display: flex;
     flex-direction: row;
@@ -129,15 +200,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #9ca3af;
-    border: 1px solid #9ca3af;
-    border-radius: 0.25rem;
+    background-color: #e5e7eb;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
     height: 24px;
     width: 24px;
     text-align: center;
     font-size: 0.75rem;
     margin-left: 0.25rem;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    cursor: default;
+}
+
+.chat-window-controls-container .chat-window-controls .chat-window-button svg {
+    font-size: 0.5rem;
 }
 
 .chat-window-controls-container .chat-window-controls .chat-window-button:hover {
@@ -145,15 +221,21 @@
 }
 
 .chat-window-controls-container .chat-window-controls .chat-window-close-button {
-    color: #dc2626;
+    background-color: #b91c1c;
+    border-color: #dc2626;
+    color: #fee2e2;
 }
 
 .chat-window-participants-container {
     padding: 0rem 0.5rem 0.5rem 0.5rem;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
     display: flex;
 }
 
+body[data-theme='dark'] .chat-window-participants-container {
+    background-color: #1f2937;
+}
+
 .chat-window-participants-container > .chat-window-participant-name {
     border: 1px #2563eb solid;
     color: #e5e7eb;
@@ -215,14 +297,22 @@
 }
 
 .chat-window-messages-container {
-    height: 280px;
+    height: 230px;
+    max-height: 230px;
+    min-height: 230px;
     width: 100%;
     background-color: #fff;
-    border-bottom: 1px #94a3b8 solid;
-    border-top: 1px #94a3b8 solid;
+    border-bottom: 1px #e5e7eb solid;
+    border-top: 1px #e5e7eb solid;
     overflow-y: scroll;
 }
 
+body[data-theme='dark'] .chat-window-messages-container {
+    border-color: #374151;
+    background-color: #323b49;
+    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
 .chat-window-messages {
     height: 100%;
     width: 100%;
@@ -230,6 +320,129 @@
     padding: 0.25rem 0;
 }
 
+body[data-theme='dark'] .chat-window-messages {
+    background-color: #323b49;
+    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+.chat-window-pending-attachments-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: start;
+    padding-top: 0.5rem;
+    width: 100%;
+    height: 30px;
+}
+
+.chat-window-pending-attachment {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: start;
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    background-color: #f9fafb;
+    border: 1px #fff solid;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    color: #0f172a;
+    position: relative;
+    padding: 0.1rem 0.25rem;
+    opacity: 0.9;
+    margin-right: 0.15rem;
+    max-height: 26px;
+}
+
+body[data-theme='dark'] .chat-window-pending-attachment {
+    background-color: #374151;
+    border-color: #1f2937;
+    color: #f3f4f6;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-preview {
+    display: flex;
+    align-items: center;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-preview > .x-fleetbase-file-preview > .file-icon svg {
+    font-size: 0.75rem;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-preview > .flb--img.x-fleetbase-file-preview {
+    height: 20px;
+    border-radius: 0.05rem;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-name {
+    font-size: 0.55rem;
+    display: flex;
+    align-items: center;
+    margin-left: 0.25rem;
+    height: 20px;
+    max-height: 20px;
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-actions {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    font-size: 0.65rem;
+}
+
+.chat-log-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.7rem;
+    padding-bottom: 0.15rem;
+}
+
+.chat-log-container .chat-log-content-bubble-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    padding: 0 0.35rem;
+}
+
+.chat-log-container .chat-log-content-bubble {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7rem;
+    background-color: #f9fafb;
+    width: 100%;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    color: #0f172a;
+    text-align: center;
+}
+
+body[data-theme='dark'] .chat-log-container .chat-log-content-bubble {
+    background-color: #374151;
+    color: #f9fafb;
+    border: 1px solid rgb(31 41 55 / 70%);
+}
+
+.chat-log-container .chat-log-created-at {
+    font-size: 0.5rem;
+    margin-top: 0.2rem;
+    color: #475569;
+}
+
+body[data-theme='dark'] .chat-log-container .chat-log-created-at {
+    color: #f9fafb;
+}
+
 .chat-message-container {
     display: flex;
     flex-direction: row;
@@ -242,22 +455,96 @@
     padding: 0 0.35rem;
 }
 
-.chat-message-container .chat-message-content-bubble {
+.chat-message-container .chat-message-content-bubble-container.has-attachments .chat-message-content-bubble {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container {
+    display: flex;
+    flex-direction: row;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    padding: 0.5rem 0.5rem 0rem 0.5rem;
+    background-color: rgb(229 231 235 / 65%);
+    width: 100%;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+body[data-theme='dark'] .chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container {
+    background-color: #1f2937;
+    color: #f9fafb;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-container {
+    margin-right: 0.15rem;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-image-preview {
+    height: 45px;
+    width: 50px;
+    border-radius: 0.25rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    border: 1px #fff solid;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: start;
+    align-self: start;
+    background-color: #fff;
+    height: 45px;
+    width: 50px;
+    padding: 0.15rem;
+    border-radius: 0.25rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    border: 1px #fff solid;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview:hover,
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview:focus {
+    border-color: #3b82f6;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview .chat-attachment-file-preview-filename {
+    font-size: 0.45rem;
+    color: #000;
+    width: 50px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-content-bubble {
     border-radius: 0.25rem;
     padding: 0.5rem 0.5rem 1rem 0.5rem;
     font-size: 0.7rem;
-    background-color: #d1d5db;
+    background-color: rgb(229 231 235 / 65%);
     width: 100%;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     color: #0f172a;
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-content-bubble-container .chat-message-content-bubble {
+    background-color: #1f2937;
+    color: #f9fafb;
+}
+
 .chat-message-container .chat-message-created-at {
     font-size: 0.5rem;
     margin-top: 0.2rem;
     color: #475569;
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-created-at {
+    color: #f9fafb;
+}
+
 .chat-message-container .chat-message-sender-bubble {
     width: 60px;
     display: flex;
@@ -274,10 +561,16 @@
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-sender-bubble > img {
+    border-color: #1f2937;
+}
+
 .chat-message-container .chat-message-sender-bubble > .chat-message-sender-name {
     margin-top: 0.15rem;
     display: flex;
     align-items: center;
+    justify-content: center;
+    text-align: center;
     width: 50px;
     max-width: 50px;
     max-width: 60px;
@@ -288,6 +581,10 @@
     color: #475569;
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-sender-bubble > .chat-message-sender-name {
+    color: #fff;
+}
+
 .chat-window-attachments-container {
     display: flex;
     flex-direction: column;
@@ -302,13 +599,15 @@
 }
 
 .chat-tray-channel-preview:hover {
-    opacity: .5;
+    opacity: 0.5;
 }
 
 .chat-tray-channel-preview .chat-tray-channel-preview-last-message {
+    display: flex;
     width: 285px;
     max-width: 285px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
\ No newline at end of file
+    text-align: left;
+}