diff --git a/package-lock.json b/package-lock.json
index 0cca048..8424333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,12 @@
 {
-  "name": "Chrome_Extension_GPT3",
+  "name": "GPT-Prompter project",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "GPT-Prompter project",
+      "version": "1.0.0",
       "dependencies": {
         "@webcomponents/custom-elements": "^1.5.1",
         "gpt3-tokenizer": "^1.1.5",
@@ -12,6 +15,7 @@
       },
       "devDependencies": {
         "copy-webpack-plugin": "^11.0.0",
+        "crx-hotreload": "^1.0.6",
         "css-loader": "^6.7.3",
         "html-webpack-plugin": "^5.5.0",
         "style-loader": "^3.3.2",
@@ -702,6 +706,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crx-hotreload": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crx-hotreload/-/crx-hotreload-1.0.6.tgz",
+      "integrity": "sha512-W07F3gXyCTrHf4w1W2v6y3PHBYyYtJKCiBmgf0FkkteFh9GhqeV9HR7+UbKKfnrx39oC+PHycz9NmBMerIcbGA==",
+      "dev": true
+    },
     "node_modules/css-loader": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
@@ -3003,6 +3013,12 @@
         "which": "^2.0.1"
       }
     },
+    "crx-hotreload": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crx-hotreload/-/crx-hotreload-1.0.6.tgz",
+      "integrity": "sha512-W07F3gXyCTrHf4w1W2v6y3PHBYyYtJKCiBmgf0FkkteFh9GhqeV9HR7+UbKKfnrx39oC+PHycz9NmBMerIcbGA==",
+      "dev": true
+    },
     "css-loader": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
diff --git a/package.json b/package.json
index 5e0630b..3476a3e 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,10 @@
-{ "name": "GPT-Prompter-project",
+{
+  "name": "GPT-Prompter project",
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "webpack",
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
@@ -13,6 +15,7 @@
   },
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
+    "crx-hotreload": "^1.0.6",
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.2",
diff --git a/src/background.js b/src/background.js
index ee87841..451258f 100644
--- a/src/background.js
+++ b/src/background.js
@@ -204,6 +204,7 @@ chrome.runtime.onMessage.addListener((message, sender) => {
   else if (message.text === "launchGPT") {
     // Get the tab from the sender
     const { tab } = sender; // this line is equivalent to const tab = sender.tab;
+    console.log(typeof message.prompt.prompt, message.prompt);
     // Launch GPT
     chrome.storage.sync.get("APIKEY", function (items) {
       (async () => {
diff --git a/src/gpt3.js b/src/gpt3.js
index 9134c52..621d5e6 100644
--- a/src/gpt3.js
+++ b/src/gpt3.js
@@ -77,6 +77,7 @@ async function promptGPT3Prompting(prompt, items, tabs) {
   var model = prompt["model"];
   // if the model is gpt-4 or gpt-3.5-turbo, we need to check that the text is a valid json
   if (model == "gpt-4" || model == "gpt-3.5-turbo") {
+    console.log('Check',typeof text)
     if (typeof text !== "object") 
      {text = [{"role": "user", "content": text}];}
   }
diff --git a/src/history.html b/src/history.html
index 921bc5d..1943bbc 100644
--- a/src/history.html
+++ b/src/history.html
@@ -15,7 +15,7 @@
     <div class="container-fluid">
         <div class="row">
             <div class="logoimage" style="display:flex; padding: 40px;">
-                <img src="../icons/NewiconA128.png">
+                <img src="icons/NewiconA128.png">
             </div>
             <div class="typewriter">
                 <h1 style="margin-bottom: -1rem;" >
diff --git a/src/hot-reload.js b/src/hot-reload.js
new file mode 100644
index 0000000..ec101b8
--- /dev/null
+++ b/src/hot-reload.js
@@ -0,0 +1,6 @@
+const crxHotreload = require('crx-hotreload');
+
+if (module.hot) {
+  module.hot.accept();
+  crxHotreload();
+}
diff --git a/src/manifest.json b/src/manifest.json
index 83a2c28..06aa963 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "GPT-Prompter",
-  "version": "0.0.3.2",
-  "description": "Fast custom prompts to GPT-3 and ChatGPT API",
+  "version": "0.0.3.3",
+  "description": "Fast custom prompts to GPT-3, GPT-4 and ChatGPT API",
   "manifest_version": 3,
   "icons": {
     "16": "icons/iconA16.png",
diff --git a/src/popup.html b/src/popup.html
index 1154a68..75005a0 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -26,7 +26,7 @@
       >
         <div class="card-body">
           <h5>
-            <img src="../icons/NewiconA48.png" alt="logo" class="logoimage" />
+            <img src="icons/NewiconA48.png" alt="logo" class="logoimage" />
             GPT-Prompter<br />
           </h5>
           <!-- <p class="card-text">Here are the instructions to configure the plugin to work properly</p> -->
@@ -93,7 +93,7 @@ <h5>
         style="border-radius: 0px"
       >
         <div class="card-header" style="border: 0" id="advancedSettingsHeader">
-          <img src="../icons/NewiconA16.png" alt="logo" class="logo" />
+          <img src="icons/NewiconA16.png" alt="logo" class="logo" />
           <b style="display: inline-block; line-height: 40px">
             Advanced Settings</b
           >
@@ -133,7 +133,7 @@ <h5>
       >
         <div class="card-header" id="promptDesignHeader">
           <div style="display: inline-block; vertical-align: middle">
-            <img src="../icons/NewiconA16.png" alt="logo" class="logo" />
+            <img src="icons/NewiconA16.png" alt="logo" class="logo" />
             <b style="display: inline-block; line-height: 40px"
               >Prompt Design</b
             >
@@ -384,7 +384,7 @@ <h5>
       <div class="card text-bg-light" style="border-radius: 0px">
         <div class="card-header" id="yourPromptsHeader">
           <div style="display: inline-block; vertical-align: middle">
-            <img src="../icons/NewiconA16.png" alt="logo" class="logo" />
+            <img src="icons/NewiconA16.png" alt="logo" class="logo" />
             <b style="display: inline-block; line-height: 40px">Your Prompts</b>
           </div>
           <button
diff --git a/src/popup_world.js b/src/popup_world.js
index 54f7621..6ee2cc6 100644
--- a/src/popup_world.js
+++ b/src/popup_world.js
@@ -762,7 +762,7 @@ class popUpClass extends HTMLElement {
         let modelToUse = this.getBodyData(targetId, "model");
         let textPrompt = this.getTextareaValue(targetId)
         if (modelToUse === "gpt-3.5-turbo" || modelToUse === "gpt-4") {
-          textPrompt = JSON.stringify([{"role": "user", "content": textPrompt}])
+          textPrompt = [{"role": "user", "content": textPrompt}]
         }
 
         const promptObj = {
@@ -840,7 +840,7 @@ class popUpClass extends HTMLElement {
 
         // append the user text to the previous messages
         previousmessages.push({"role":"user", "content": userTextPrompt});
-        let textPrompt = JSON.stringify(previousmessages);
+        let textPrompt = previousmessages;
         const promptObj = {
           prompt: textPrompt,
           model: modelToUse,
diff --git a/webpack.config.js b/webpack.config.js
index a5c0ecc..05f6682 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,42 +8,47 @@ const extensionName = 'GPT-Prompter';
 const extensionVersion = manifestJson.version;
 
 
+module.exports = (env, argv) => {
+  const isDevelopment = argv.mode === 'development';
 
-module.exports = {
-  mode: 'production',
-  entry: {
-    markdown: './src/markdown.js',
-    content: './src/content.js',
-    background: './src/background.js',
-    popup_world: './src/popup_world.js',
-    popup: './src/popup.js',
-    history: './src/history.js',
-  },
-  output: {
-    filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './src/popup.html',
-      filename: 'popup.html',
-      chunks: ['popup'],
-    }),
-    new HtmlWebpackPlugin({
-      template: './src/history.html',
-      filename: 'history.html',
-      chunks: ['history'],
-    }),
-    new CopyWebpackPlugin({
-      patterns: [
-        { from: 'src/style.css', to: 'style.css' },
-        { from: 'src/manifest.json', to: 'manifest.json' },
-        { from: 'src/icons', to: 'icons' }, 
-      ],
-    }),
-    new ZipWebpackPlugin({
-      path: path.resolve(__dirname, 'zips'),
-      filename: `${extensionName}-${extensionVersion}.zip`,
-    }),// Add the zip-webpack-plugin instance
-  ],
+  return {
+    mode: argv.mode,
+    entry: {
+      markdown: './src/markdown.js',
+      content: './src/content.js',
+      background: isDevelopment
+        ? ['./src/background.js', './src/hot-reload.js']
+        : './src/background.js',
+      popup_world: './src/popup_world.js',
+      popup: './src/popup.js',
+      history: './src/history.js',
+    },
+    output: {
+      filename: '[name].bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './src/popup.html',
+        filename: 'popup.html',
+        chunks: ['popup'],
+      }),
+      new HtmlWebpackPlugin({
+        template: './src/history.html',
+        filename: 'history.html',
+        chunks: ['history'],
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: 'src/style.css', to: 'style.css' },
+          { from: 'src/manifest.json', to: 'manifest.json' },
+          { from: 'src/icons', to: 'icons' },
+        ],
+      }),
+      new ZipWebpackPlugin({
+        path: path.resolve(__dirname, 'zips'),
+        filename: `${extensionName}-${extensionVersion}.zip`,
+      }), // Add the zip-webpack-plugin instance
+    ],
+  };
 };