diff --git a/src/components/ChatBox/Markdown.tsx b/src/components/ChatBox/Markdown.tsx
index 1c0c1ce..3c6ec79 100644
--- a/src/components/ChatBox/Markdown.tsx
+++ b/src/components/ChatBox/Markdown.tsx
@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark as mdCodeTheme } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import rehypeMathjax from 'rehype-mathjax'
+// import rehypeMathjax from 'rehype-mathjax'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
@@ -15,11 +15,11 @@ const Markdown: FC<Props> = ({ raw }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm, remarkMath]}
-      rehypePlugins={[rehypeMathjax]}
+      // rehypePlugins={[rehypeMathjax]}
       components={{
-        code({ inline, className, children, ...props }) {
+        code({ className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || '')
-          return !inline ? (
+          return (
             <SyntaxHighlighter
               style={mdCodeTheme}
               // FIXME: Azure OpenAI Service does not return the language of block code.
@@ -30,11 +30,11 @@ const Markdown: FC<Props> = ({ raw }) => {
             >
               {String(children).replace(/\n$/, '')}
             </SyntaxHighlighter>
-          ) : (
-            <code className={classNames('font-semibold', className)}>
-              `{children}`
-            </code>
           )
+
+          // <code className={classNames('font-semibold', className)}>
+          //   `{children}`
+          // </code>
         },
         p({ className, children, ...props }) {
           return (
@@ -61,34 +61,31 @@ const Markdown: FC<Props> = ({ raw }) => {
           )
         },
         ol({ className, children, ...props }) {
-          const _props = { ...props, ordered: props.ordered.toString() }
           return (
             <ol
               className={classNames('mb-3 list-disc pl-3 last:mb-0', className)}
-              {..._props}
+              {...props}
             >
               {children}
             </ol>
           )
         },
         ul({ className, children, ...props }) {
-          const _props = { ...props, ordered: props.ordered.toString() }
           return (
             <ul
               className={classNames(
                 'mb-3 list-decimal pl-3 last:mb-0',
                 className
               )}
-              {..._props}
+              {...props}
             >
               {children}
             </ul>
           )
         },
         li({ className, children, ...props }) {
-          const _props = { ...props, ordered: props.ordered.toString() }
           return (
-            <li className={classNames('mb-3 last:mb-0', className)} {..._props}>
+            <li className={classNames('mb-3 last:mb-0', className)} {...props}>
               {children}
             </li>
           )
diff --git a/src/components/Configuration/ImageGeneration.tsx b/src/components/Configuration/ImageGeneration.tsx
index c370a7d..0abb174 100644
--- a/src/components/Configuration/ImageGeneration.tsx
+++ b/src/components/Configuration/ImageGeneration.tsx
@@ -105,9 +105,7 @@ const Configuration: FC = () => {
                   {...formik.getFieldProps('size')}
                 >
                   {sizes.map((size) => (
-                    <MenuItem key={size} value={size}>
-                      {size}
-                    </MenuItem>
+                    <MenuItem key={size}>{size}</MenuItem>
                   ))}
                 </Select>
                 <FormHelperText>
@@ -126,9 +124,7 @@ const Configuration: FC = () => {
                   {...formik.getFieldProps('responseFormat')}
                 >
                   {responseFormats.map((responseFormat) => (
-                    <MenuItem key={responseFormat} value={responseFormat}>
-                      {responseFormat}
-                    </MenuItem>
+                    <MenuItem key={responseFormat}>{responseFormat}</MenuItem>
                   ))}
                 </Select>
                 <FormHelperText>
diff --git a/src/components/ImportAndExportDexie/index.tsx b/src/components/ImportAndExportDexie/index.tsx
index f94ba1f..9532daa 100644
--- a/src/components/ImportAndExportDexie/index.tsx
+++ b/src/components/ImportAndExportDexie/index.tsx
@@ -19,7 +19,7 @@ const ImportAndExportDexie: FC = () => {
       const text = await blob.text()
       const filename = `dexie-export-${Date.now()}.json`
       await writeTextFile(filename, text, {
-        dir: BaseDirectory.Download
+        baseDir: BaseDirectory.Download
       })
 
       toast.success(
diff --git a/src/configurations/imageGeneration.ts b/src/configurations/imageGeneration.ts
index efaf0ca..14726ce 100644
--- a/src/configurations/imageGeneration.ts
+++ b/src/configurations/imageGeneration.ts
@@ -1,7 +1,4 @@
-import {
-  CreateImageRequestResponseFormatEnum,
-  CreateImageRequestSizeEnum
-} from 'openai'
+import { ImageGenerateParams } from 'openai/resources'
 
 export interface ImageGenerationConfiguration {
   n: number
@@ -9,13 +6,13 @@ export interface ImageGenerationConfiguration {
   responseFormat: (typeof responseFormats)[number]
 }
 
-export const sizes: CreateImageRequestSizeEnum[] = [
+export const sizes: ImageGenerateParams['size'][] = [
   '256x256',
   '512x512',
   '1024x1024'
 ]
 
-export const responseFormats: CreateImageRequestResponseFormatEnum[] = [
+export const responseFormats: ImageGenerateParams['response_format'][] = [
   'url',
   'b64_json'
 ]
diff --git a/src/hooks/useAudio.ts b/src/hooks/useAudio.ts
index f02d6d1..6a0e344 100644
--- a/src/hooks/useAudio.ts
+++ b/src/hooks/useAudio.ts
@@ -1,3 +1,5 @@
+import { AudioResponseFormat } from 'openai/resources'
+import { Uploadable } from 'openai/src/uploads'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { AudioTranscriptionConfiguration } from 'src/configurations/audioTranscription'
 import { AudioTranslationConfiguration } from 'src/configurations/audioTranslation'
@@ -26,20 +28,16 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
       setLoading(true)
 
       // TODO: Uses pure fetch.
-      const transcription = await openai.createTranscription(
-        hashFile.file,
+      const transcription = await openai.audio.transcriptions.create({
+        file: hashFile.file as Uploadable,
         model,
         prompt,
-        responseFormat,
+        response_format: responseFormat as AudioResponseFormat,
         temperature,
-        language === '' ? undefined : language
-      )
+        language: language === '' ? undefined : language
+      })
 
-      saveCommonAssistantMessage(
-        // If `responseFormat` is `json` or `verbose_json`, the result is `transcription.data.text`.
-        // If `responseFormat` is `text`, `vtt` `or `srt`, the result is `transcription.data`.
-        transcription.data.text || (transcription.data as unknown as string)
-      )
+      saveCommonAssistantMessage(transcription.text)
     } catch (error) {
       showApiRequestErrorToast()
       rollbackMessage()
@@ -59,18 +57,16 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
       setLoading(true)
 
       // TODO: Uses pure fetch.
-      const translation = await openai.createTranslation(
-        hashFile.file,
+      const translation = await openai.audio.translations.create({
+        file: hashFile.file,
         model,
         prompt,
-        responseFormat,
+        response_format: responseFormat as AudioResponseFormat,
         temperature
-      )
+      })
 
       saveCommonAssistantMessage(
-        // If `responseFormat` is `json` or `verbose_json`, the result is `translation.data.text`.
-        // If `responseFormat` is `text`, `vtt` `or `srt`, the result is `translation.data`.
-        translation.data.text || (translation.data as unknown as string)
+        translation.text
       )
     } catch (error) {
       showApiRequestErrorToast()
diff --git a/src/hooks/useChatCompletion.ts b/src/hooks/useChatCompletion.ts
index d944e04..23eab9c 100644
--- a/src/hooks/useChatCompletion.ts
+++ b/src/hooks/useChatCompletion.ts
@@ -1,4 +1,4 @@
-import { CreateChatCompletionRequest } from 'openai'
+import { ChatCompletionCreateParams } from 'openai/resources'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import toast from 'src/components/Snackbar'
 import { ChatConfiguration, models } from 'src/configurations/chatCompletion'
@@ -46,7 +46,7 @@ const useChatCompletion = (prompt: string) => {
       )
       return
     }
-    const context: CreateChatCompletionRequest['messages'] = []
+    const context: ChatCompletionCreateParams['messages'] = []
     currConversation.messages
       .slice()
       .reverse()
diff --git a/src/hooks/useImageGeneration.ts b/src/hooks/useImageGeneration.ts
index 5125a87..1281594 100644
--- a/src/hooks/useImageGeneration.ts
+++ b/src/hooks/useImageGeneration.ts
@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import { ImagesResponse } from 'openai'
+import { ImagesResponse } from 'openai/resources'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { ImageGenerationConfiguration } from 'src/configurations/imageGeneration'
 import { useMessages, useServices } from 'src/hooks'
diff --git a/src/hooks/useOpenAI.ts b/src/hooks/useOpenAI.ts
index d50012c..073c404 100644
--- a/src/hooks/useOpenAI.ts
+++ b/src/hooks/useOpenAI.ts
@@ -1,17 +1,11 @@
-import {  OpenAI } from 'openai'
+import { OpenAI } from 'openai'
 import { useSettings } from 'src/hooks'
 
-class CustomFormData extends FormData {
-  getHeaders() {
-    return {}
-  }
-}
-
 const useOpenAI = () => {
   const { settings } = useSettings()
 
   const openai = new OpenAI({
-    apiKey: settings?.openaiSecretKey,
+    apiKey: settings?.openaiSecretKey || '',
     organization: settings?.openaiOrganizationId,
     dangerouslyAllowBrowser: true
   })
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index d5545b2..add07ed 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -67,13 +67,15 @@ const useSettings = () => {
       }
 
       if (currSettings.assistantAvatarFilename) {
-        const src = await transformFilenameToSrc(
-          currSettings.assistantAvatarFilename
-        )
+        try {
+          const src = await transformFilenameToSrc(
+            currSettings.assistantAvatarFilename
+          )
 
-        if (src) {
-          setSettings({ ...currSettings, assistantAvatarFilename: src })
-        } else {
+          if (src) {
+            setSettings({ ...currSettings, assistantAvatarFilename: src })
+          }
+        } catch {
           // if transform is error
           setSettings(currSettings)
         }
diff --git a/src/hooks/useSevices.ts b/src/hooks/useSevices.ts
index 49450e9..70060a3 100644
--- a/src/hooks/useSevices.ts
+++ b/src/hooks/useSevices.ts
@@ -1,8 +1,8 @@
 import {
-  CreateChatCompletionRequest,
-  CreateCompletionRequest,
-  CreateImageRequest
-} from 'openai'
+  ChatCompletionCreateParams,
+  CompletionCreateParams,
+  ImageGenerateParams,
+} from 'openai/resources'
 import {
   OPENAI_CHAT_COMPLETION_URL,
   OPENAI_IMAGE_GENERATION_URL,
@@ -37,28 +37,28 @@ const useServices = () => {
 
   const company = {
     [Companies.Azure]: {
-      [Products.ChatCompletion]: (body: CreateChatCompletionRequest) =>
+      [Products.ChatCompletion]: (body: ChatCompletionCreateParams) =>
         _fetch(
           `${settings?.azureEndPoint}/openai/deployments/${settings?.azureDeploymentName}/chat/completions?api-version=2023-03-15-preview`,
           body
         ),
-      [Products.TextCompletion]: (body: CreateCompletionRequest) =>
+      [Products.TextCompletion]: (body: CompletionCreateParams) =>
         _fetch(
           `${settings?.azureEndPoint}/openai/deployments/${settings?.azureDeploymentName}/completions?api-version=2022-12-01`,
           body
         ),
-      [Products.ImageGeneration]: (body: CreateImageRequest) =>
+      [Products.ImageGeneration]: (body: ImageGenerateParams) =>
         _fetch(
           `${settings?.azureEndPoint}/openai/images/generations:submit?api-version=2023-06-01-preview`,
           body
         )
     },
     [Companies.OpenAI]: {
-      [Products.ChatCompletion]: (body: CreateChatCompletionRequest) =>
+      [Products.ChatCompletion]: (body: ChatCompletionCreateParams) =>
         _fetch(OPENAI_CHAT_COMPLETION_URL, body),
-      [Products.TextCompletion]: (body: CreateCompletionRequest) =>
+      [Products.TextCompletion]: (body: CompletionCreateParams) =>
         _fetch(OPENAI_TEXT_COMPLETION_URL, body),
-      [Products.ImageGeneration]: (body: CreateImageRequest) =>
+      [Products.ImageGeneration]: (body: ImageGenerateParams) =>
         _fetch(OPENAI_IMAGE_GENERATION_URL, body)
     }
   }
diff --git a/src/hooks/useTextCompletion.ts b/src/hooks/useTextCompletion.ts
index f478b88..71860c8 100644
--- a/src/hooks/useTextCompletion.ts
+++ b/src/hooks/useTextCompletion.ts
@@ -1,4 +1,4 @@
-import { CreateCompletionResponse } from 'openai'
+import { Completion } from 'openai/resources'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { TextCompletionConfiguration } from 'src/configurations/textCompletion'
 import { useMessages, useServices } from 'src/hooks'
@@ -41,7 +41,7 @@ const useTextCompletion = (prompt: string) => {
         frequency_penalty: frequencyPenalty,
         presence_penalty: presencePenalty
       })
-      const completion: CreateCompletionResponse = await response.json()
+      const completion: Completion = await response.json()
 
       const preResponseText = preResponse.checked ? preResponse.content : ''
       const postResponseText = postResponse.checked ? postResponse.content : ''