diff --git a/src/app/chat/chat-content/chat-content.component.ts b/src/app/chat/chat-content/chat-content.component.ts
index cf8fd0b..9111117 100644
--- a/src/app/chat/chat-content/chat-content.component.ts
+++ b/src/app/chat/chat-content/chat-content.component.ts
@@ -2,15 +2,15 @@ import {
   AfterViewChecked,
   AfterViewInit,
   Component,
+  ElementRef,
   OnInit,
   ViewChild,
-  ElementRef,
 } from '@angular/core';
+
+import { ApiKeyService } from 'src/app/services/api-key.service';
 import { ChatService } from '../../services/chat.service';
 import { MarkdownService } from 'ngx-markdown';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ApiKeyService } from 'src/app/services/api-key.service';
-import { ChatCompletionRequestMessage } from 'openai';
 
 @Component({
   selector: 'app-chat-content',
@@ -28,7 +28,7 @@ export class ChatContentComponent
   ) {}
 
   @ViewChild('window') window!: any;
-  public messages: ChatCompletionRequestMessage[] = [];
+  public messages: any[] = [];
   apiKey: string | null = '';
   isBusy: boolean = false;
   currChatSelected: string = '';
@@ -63,7 +63,7 @@ export class ChatContentComponent
       return;
     }
     element.value = '';
-    const message: ChatCompletionRequestMessage = {
+    const message: any = {
       role: 'user',
       content: prompt,
     };
@@ -74,12 +74,11 @@ export class ChatContentComponent
       const completion = await this.chatService.createCompletionViaOpenAI(
         this.messages
       );
-      console.log(completion);
       const completionMessage = this.markdownService.parse(
-        completion.data.choices[0].message?.content!
+        completion.choices[0].message?.content!
       );
 
-      const responseMessage: ChatCompletionRequestMessage = {
+      const responseMessage: any = {
         role: 'assistant',
         content: completionMessage,
       };
diff --git a/src/app/services/chat-data.service.ts b/src/app/services/chat-data.service.ts
index 671aa99..05ed0d4 100644
--- a/src/app/services/chat-data.service.ts
+++ b/src/app/services/chat-data.service.ts
@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { ChatCompletionMessage } from 'openai/resources';
 import { ChatHistoryDetails } from '../shared/models/chat-history-details.model';
-import { ChatCompletionRequestMessage } from 'openai';
+import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
@@ -16,7 +16,7 @@ export class ChatDataService {
 
   public setLocalStorageForSingleChat(
     chatName: string,
-    chatData: ChatCompletionRequestMessage
+    chatData: ChatCompletionMessage
   ): void {
     localStorage.setItem(`${chatName}`, JSON.stringify(chatData));
   }
diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts
index ccc00ef..145839b 100644
--- a/src/app/services/chat.service.ts
+++ b/src/app/services/chat.service.ts
@@ -1,16 +1,18 @@
-import { Injectable } from '@angular/core';
-import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from 'openai';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { ChatCompletion, ChatCompletionMessage, ChatCompletionMessageParam } from 'openai/resources';
+import OpenAI, { ClientOptions } from 'openai';
+
 import { ChatDataService } from './chat-data.service';
+import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ChatService {
-  openai!: OpenAIApi;
+  openai!: OpenAI;
 
-  messages: ChatCompletionRequestMessage[] = [];
-  private messagesSubject = new BehaviorSubject<ChatCompletionRequestMessage[]>(
+  messages: ChatCompletionMessage[] = [];
+  private messagesSubject = new BehaviorSubject<ChatCompletionMessage[]>(
     []
   );
 
@@ -19,55 +21,56 @@ export class ChatService {
   }
 
   public updateConfiguration(): void {
-    const configuration = new Configuration({
+    const configuration: ClientOptions = {
       apiKey: this.chatDataService.getAPIKeyFromLocalStore() ?? '',
-    });
+      dangerouslyAllowBrowser: true
+    };
 
-    this.openai = new OpenAIApi(configuration);
+    this.openai = new OpenAI(configuration);
   }
 
-  async createCompletionViaOpenAI(messages: ChatCompletionRequestMessage[]) {
-    return await this.openai.createChatCompletion(
-      {
-        model: 'gpt-3.5-turbo',
-        messages: messages,
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Agent': 'OpenAPI-Generator/1.0/Javascript',
-        },
-      }
-    );
+  async createCompletionViaOpenAI(messages: ChatCompletionMessageParam[]): Promise<ChatCompletion> {
+    return new Promise((resolve, reject) => {
+      this.openai.chat.completions.create(
+        {
+          model: 'gpt-4o',
+          messages: messages,
+        }
+      ).then(message => {
+        resolve(message);
+      }).catch(err => {
+        reject(err);
+      })
+    })
   }
 
-  async getTitleFromChatGpt(messages: ChatCompletionRequestMessage[]) {
-    return await this.openai.createChatCompletion(
-      {
-        model: 'gpt-3.5-turbo',
-        messages: [
-          {
-            role: 'user',
-            content: `create a max 10 character title from below messages. ${JSON.stringify(
-              messages
-            )}`,
-          },
-        ],
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Agent': 'OpenAPI-Generator/1.0/Javascript',
-        },
-      }
-    );
+  async getTitleFromChatGpt(messages: ChatCompletionMessageParam[]): Promise<ChatCompletion> {
+    return new Promise((resolve, reject) => {
+      this.openai.chat.completions.create(
+        {
+          model: 'gpt-4o',
+          messages: [
+            {
+              role: 'user',
+              content: `create a max 10 character title from below messages. ${JSON.stringify(
+                messages
+              )}`,
+            },
+          ],
+        }
+      ).then(message => {
+        resolve(message)
+      }).catch(err => {
+        reject(err);
+      })
+    })
   }
 
-  public setMessagesSubject(event: ChatCompletionRequestMessage[]) {
+  public setMessagesSubject(event: ChatCompletionMessage[]) {
     this.messagesSubject.next(event);
   }
 
-  public getMessagesSubject(): Observable<ChatCompletionRequestMessage[]> {
+  public getMessagesSubject(): Observable<ChatCompletionMessage[]> {
     return this.messagesSubject.asObservable();
   }
 }
diff --git a/src/app/shared/models/chat-history-details.model.ts b/src/app/shared/models/chat-history-details.model.ts
index 2f46d3a..9e735fc 100644
--- a/src/app/shared/models/chat-history-details.model.ts
+++ b/src/app/shared/models/chat-history-details.model.ts
@@ -1,7 +1,7 @@
-import { ChatCompletionRequestMessage } from 'openai';
+import { ChatCompletionMessage } from "openai/resources";
 
 export interface ChatHistoryDetails {
   id: string;
   title: string;
-  messages: ChatCompletionRequestMessage[];
+  messages: ChatCompletionMessage[];
 }
diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts
index 9dfb91f..bd36d0a 100644
--- a/src/app/sidebar/sidebar.component.ts
+++ b/src/app/sidebar/sidebar.component.ts
@@ -1,14 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { ChatDataService } from '../services/chat-data.service';
-import { v4 as uuidv4 } from 'uuid';
-import { ChatService } from '../services/chat.service';
-import { Router } from '@angular/router';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { UserDialogComponent } from '../user-dialog/user-dialog.component';
+
 import { ApiKeyService } from '../services/api-key.service';
-import { ChatHistoryDetails } from '../shared/models/chat-history-details.model';
+import { ChatCompletionMessage } from 'openai/resources';
+import { ChatDataService } from '../services/chat-data.service';
 import ChatHistories from '../shared/models/chat-histories.model';
-import { ChatCompletionRequestMessage } from 'openai';
+import { ChatHistoryDetails } from '../shared/models/chat-history-details.model';
+import { ChatService } from '../services/chat.service';
+import { UserDialogComponent } from '../user-dialog/user-dialog.component';
+import { v4 as uuidv4 } from 'uuid';
+
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
@@ -18,12 +19,11 @@ export class SidebarComponent implements OnInit {
   constructor(
     private chatDataService: ChatDataService,
     private chatService: ChatService,
-    private router: Router,
     private dialogModel: MatDialog,
     private apiKeyService: ApiKeyService
   ) {}
 
-  messages: ChatCompletionRequestMessage[] = [];
+  messages: ChatCompletionMessage[] = [];
   chatHistories: ChatHistories = {
     chatHistoryDetails: [],
   };
@@ -42,7 +42,7 @@ export class SidebarComponent implements OnInit {
     if (this.isHistoricalChat === false) {
       const chatHistoryId = uuidv4();
       const title = (await this.chatService.getTitleFromChatGpt(this.messages))
-        .data.choices[0].message?.content!;
+        .choices[0].message?.content!;
 
       const chatHistory: ChatHistoryDetails = {
         id: chatHistoryId,
@@ -126,7 +126,6 @@ export class SidebarComponent implements OnInit {
     const result = this.chatHistories.chatHistoryDetails.some(
       (c) => c.id === id
     );
-    console.log(result);
     return result;
   }
 }