diff --git a/packages/collaboration-extension/src/chat.ts b/packages/collaboration-extension/src/chat.ts
index eb6f624a..98fed86f 100644
--- a/packages/collaboration-extension/src/chat.ts
+++ b/packages/collaboration-extension/src/chat.ts
@@ -195,18 +195,22 @@ export const chat: JupyterFrontEndPlugin<ChatPanel> = {
       execute: async args => {
         let filepath = (args.filepath as string) ?? '';
         if (!filepath) {
-          let name = args.name ?? '';
-          if (!args.name) {
-            name =
-              (
-                await InputDialog.getText({
-                  label: 'Name',
-                  placeholder: 'untitled',
-                  title: 'Name of the chat'
-                })
-              ).value ?? '';
+          let name: string | null = (args.name as string) ?? null;
+          if (!name) {
+            name = (
+              await InputDialog.getText({
+                label: 'Name',
+                placeholder: 'untitled',
+                title: 'Name of the chat'
+              })
+            ).value;
           }
-          if (name) {
+          // no-op if the dialog has been cancelled
+          // fill the filepath if the dialog has been validated with content
+          // otherwise create a new untitled chat (empty filepath)
+          if (name === null) {
+            return;
+          } else if (name) {
             filepath = `${name}${chatFileType.extensions[0]}`;
           }
         }
diff --git a/packages/docprovider/src/chat/widget.tsx b/packages/docprovider/src/chat/widget.tsx
index e179c8b6..038eacc3 100644
--- a/packages/docprovider/src/chat/widget.tsx
+++ b/packages/docprovider/src/chat/widget.tsx
@@ -25,8 +25,11 @@ import * as React from 'react';
 
 import { CollaborativeChatModel } from './model';
 
-const SECTION_CLASS = 'jp-collaborativeChat-section';
-const TOOLBAR_CLASS = 'jp-collaborativeChat-toolbar';
+const SIDEPANEL_CLASS = 'jp-collab-chat-sidepanel';
+const ADD_BUTTON_CLASS = 'jp-collab-chat-add';
+const OPEN_SELECT_CLASS = 'jp-collab-chat-open';
+const SECTION_CLASS = 'jp-collab-chat-section';
+const TOOLBAR_CLASS = 'jp-collab-chat-toolbar';
 
 /**
  * DocumentWidget: widget that represents the view or editor for a file type.
@@ -59,23 +62,25 @@ export class ChatPanel extends SidePanel {
    */
   constructor(options: ChatPanel.IOptions) {
     super(options);
-
+    this.addClass(SIDEPANEL_CLASS);
     this._commands = options.commands;
     this._rmRegistry = options.rmRegistry;
     this._themeManager = options.themeManager;
 
-    const { commands, filebrowser } = options;
     const addChat = new CommandToolbarButton({
-      commands,
+      commands: this._commands,
       id: ChatPanel.CommandIDs.createChat,
       icon: addIcon
     });
+    addChat.addClass(ADD_BUTTON_CLASS);
     this.toolbar.addItem('createChat', addChat);
 
+    const { filebrowser } = options;
     const openChat = new ChatSelect({
       filebrowser,
       handleChange: this._chatSelected.bind(this)
     });
+    openChat.addClass(OPEN_SELECT_CLASS);
     this.toolbar.addItem('openChat', openChat);
 
     const content = this.content as AccordionPanel;
@@ -203,7 +208,8 @@ class ChatSection extends PanelWithToolbar {
       icon: closeIcon,
       className: 'jp-mod-styled',
       onClick: () => {
-        console.log('should close the chat');
+        this.model.dispose();
+        this.dispose();
       }
     });
     this.toolbar.addItem('collaborativeChat-close', closeButton);