diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.jsx b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
index 582171e435..f2d2e7db6b 100644
--- a/client/src/components/Endpoints/SaveAsPresetDialog.jsx
+++ b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import DialogTemplate from '../ui/DialogTemplate';
-import { Dialog } from '../ui/Dialog.tsx';
-import { Input } from '../ui/Input.tsx';
-import { Label } from '../ui/Label.tsx';
+import {Dialog, DialogTemplate, Input, Label} from '../ui/';
 import { cn } from '~/utils/';
 import cleanupPreset from '~/utils/cleanupPreset';
 import { useCreatePresetMutation } from '~/data-provider';
diff --git a/client/src/components/Input/NewConversationMenu/index.jsx b/client/src/components/Input/NewConversationMenu/index.jsx
index 27a11c2a0c..20d5bf922c 100644
--- a/client/src/components/Input/NewConversationMenu/index.jsx
+++ b/client/src/components/Input/NewConversationMenu/index.jsx
@@ -10,17 +10,17 @@ import FileUpload from './FileUpload';
 import getIcon from '~/utils/getIcon';
 import getDefaultConversation from '~/utils/getDefaultConversation';
 import { useDeletePresetMutation, useCreatePresetMutation } from '~/data-provider';
-import { Button } from '../../ui/Button.tsx';
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '../../ui/DropdownMenu.tsx';
-import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
-import DialogTemplate from '../../ui/DialogTemplate';
+  DropdownMenuTrigger,
+  DialogTemplate,
+  Dialog, DialogTrigger
+} from '../../ui/';
 import { cn } from '~/utils/';
 
 import store from '~/store';
diff --git a/client/src/components/Input/SetTokenDialog/index.jsx b/client/src/components/Input/SetTokenDialog/index.jsx
index bea7b84794..8180cf604b 100644
--- a/client/src/components/Input/SetTokenDialog/index.jsx
+++ b/client/src/components/Input/SetTokenDialog/index.jsx
@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
-import DialogTemplate from '../../ui/DialogTemplate';
-import { Dialog } from '../../ui/Dialog.tsx';
+import { Dialog, DialogTemplate } from '../../ui';
 import * as Checkbox from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 import FileUpload from '../NewConversationMenu/FileUpload';
diff --git a/client/src/components/ui/DialogTemplate.jsx b/client/src/components/ui/DialogTemplate.tsx
similarity index 74%
rename from client/src/components/ui/DialogTemplate.jsx
rename to client/src/components/ui/DialogTemplate.tsx
index eccb3010a4..74669ec6ad 100644
--- a/client/src/components/ui/DialogTemplate.jsx
+++ b/client/src/components/ui/DialogTemplate.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, ReactNode, Ref } from 'react';
 import {
   DialogClose,
   DialogContent,
@@ -6,10 +6,26 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from './Dialog.tsx';
+} from './';
 import { cn } from '~/utils/';
 
-const DialogTemplate = forwardRef((props, ref) => {
+type SelectionProps = {
+  selectHandler?: () => void;
+  selectClasses?: string;
+  selectText?: string;
+};
+
+type DialogTemplateProps = {
+  title: string;
+  description?: string;
+  main?: ReactNode;
+  buttons?: ReactNode;
+  leftButtons?: ReactNode;
+  selection?: SelectionProps;
+  className?: string;
+};
+
+const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
   const { title, description, main, buttons, leftButtons, selection, className } = props;
   const { selectHandler, selectClasses, selectText } = selection || {};
 
@@ -18,7 +34,7 @@ const DialogTemplate = forwardRef((props, ref) => {
   return (
     <DialogContent ref={ref} className={cn('shadow-2xl dark:bg-gray-900', className || '')}>
       <DialogHeader>
-        <DialogTitle className="text-gray-800 dark:text-white">{title}</DialogTitle>
+        <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">{title}</DialogTitle>
         {description && (
           <DialogDescription className="text-gray-600 dark:text-gray-300">
             {description}