diff --git a/docs/package-lock.json b/docs/package-lock.json
index 448e181a..164e0f15 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -3971,11 +3971,11 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -5182,9 +5182,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -11712,6 +11712,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unified": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
diff --git a/extensions/web-widget/package-lock.json b/extensions/web-widget/package-lock.json
index addedafe..05466a04 100644
--- a/extensions/web-widget/package-lock.json
+++ b/extensions/web-widget/package-lock.json
@@ -152,12 +152,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -294,9 +294,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
diff --git a/frontend/package.json b/frontend/package.json
index 5f7a11d8..5edec918 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "@reduxjs/toolkit": "^1.9.2",
     "@vercel/analytics": "^0.1.10",
     "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 904dd279..b74d22f2 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -19,7 +19,7 @@ export default function Hero({
   }>;
   return (
     <div
-      className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
+      className={`mt-16 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
     >
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 4fb34186..487e8ea7 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -191,11 +191,11 @@ export default function Conversation() {
   };
 
   return (
-    <div className="flex h-screen flex-col gap-1">
+    <div className="flex h-screen flex-col gap-7 pb-2">
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[83vh]"
+        className="flex h-[90%] w-full flex-1 justify-center overflow-y-auto p-4 md:h-[83vh]"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -234,8 +234,8 @@ export default function Conversation() {
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
 
-      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
-        <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
+        <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
           <div
             id="inputbox"
             ref={inputRef}
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 3a3842b2..fc5d469e 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -42,7 +42,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="ml-10 mr-2 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
+        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white">
           <ReactMarkdown className="whitespace-pre-wrap break-normal leading-normal">
             {message}
           </ReactMarkdown>
@@ -53,7 +53,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-wrap self-start ${className} group flex-col pr-20  dark:text-bright-gray`}
+        className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
       >
         <div className="flex flex-wrap self-start lg:flex-nowrap">
           <Avatar
@@ -68,7 +68,7 @@ const ConversationBubble = forwardRef<
           />
 
           <div
-            className={`ml-2 mr-5 flex max-w-[90vw] rounded-3xl bg-gray-1000 p-3.5 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
+            className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
               type === 'ERROR'
                 ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
                 : 'flex-col rounded-3xl'
@@ -208,82 +208,82 @@ const ConversationBubble = forwardRef<
               </>
             )}
           </div>
-          <div className="flex justify-center">
-            <div
-              className={`relative mr-5  block items-center justify-center lg:invisible 
+        </div>
+        <div className="my-2 flex justify-start lg:ml-12">
+          <div
+            className={`relative mr-5  block items-center justify-center lg:invisible 
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
-            >
-              <div className="absolute left-2 top-4">
-                <CoppyButton text={message} />
-              </div>
+          >
+            <div>
+              <CoppyButton text={message} />
             </div>
-            <div
-              className={`relative mr-5 flex items-center justify-center ${
-                !isLikeClicked ? 'lg:invisible' : ''
-              } ${
-                feedback === 'LIKE' || type !== 'ERROR'
-                  ? 'group-hover:lg:visible'
-                  : ''
-              }`}
-            >
-              <div className="absolute left-6 top-4">
-                <div
-                  className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${
-                    isLikeHovered
-                      ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                      : 'bg-[#ffffff] dark:bg-transparent'
-                  }`}
-                >
-                  <Like
-                    className={`cursor-pointer 
+          </div>
+          <div
+            className={`relative mr-5 flex items-center justify-center ${
+              !isLikeClicked ? 'lg:invisible' : ''
+            } ${
+              feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
+                : ''
+            }`}
+          >
+            <div>
+              <div
+                className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${
+                  isLikeHovered
+                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
+                    : 'bg-[#ffffff] dark:bg-transparent'
+                }`}
+              >
+                <Like
+                  className={`cursor-pointer 
                   ${
                     isLikeClicked || feedback === 'LIKE'
                       ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
                       : 'fill-none  stroke-gray-4000'
                   }`}
-                    onClick={() => {
-                      handleFeedback?.('LIKE');
-                      setIsLikeClicked(true);
-                      setIsDislikeClicked(false);
-                    }}
-                    onMouseEnter={() => setIsLikeHovered(true)}
-                    onMouseLeave={() => setIsLikeHovered(false)}
-                  ></Like>
-                </div>
+                  onClick={() => {
+                    handleFeedback?.('LIKE');
+                    setIsLikeClicked(true);
+                    setIsDislikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsLikeHovered(true)}
+                  onMouseLeave={() => setIsLikeHovered(false)}
+                ></Like>
               </div>
             </div>
-            <div
-              className={`mr-13 relative flex items-center justify-center ${
-                !isDislikeClicked ? 'lg:invisible' : ''
-              } ${
-                feedback === 'DISLIKE' || type !== 'ERROR'
-                  ? 'group-hover:lg:visible'
-                  : ''
-              }`}
-            >
-              <div className="absolute left-10 top-4">
-                <div
-                  className={`flex items-center justify-center rounded-full p-2 ${
-                    isDislikeHovered
-                      ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                      : 'bg-[#ffffff] dark:bg-transparent'
+          </div>
+          <div
+            className={`mr-13 relative flex items-center justify-center ${
+              !isDislikeClicked ? 'lg:invisible' : ''
+            } ${
+              feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
+                : ''
+            }`}
+          >
+            <div>
+              <div
+                className={`flex items-center justify-center rounded-full p-2 ${
+                  isDislikeHovered
+                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
+                    : 'bg-[#ffffff] dark:bg-transparent'
+                }`}
+              >
+                <Dislike
+                  className={`cursor-pointer ${
+                    isDislikeClicked || feedback === 'DISLIKE'
+                      ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
+                      : 'fill-none  stroke-gray-4000'
                   }`}
-                >
-                  <Dislike
-                    className={`cursor-pointer ${
-                      isDislikeClicked || feedback === 'DISLIKE'
-                        ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                        : 'fill-none  stroke-gray-4000'
-                    }`}
-                    onClick={() => {
-                      handleFeedback?.('DISLIKE');
-                      setIsDislikeClicked(true);
-                      setIsLikeClicked(false);
-                    }}
-                    onMouseEnter={() => setIsDislikeHovered(true)}
-                    onMouseLeave={() => setIsDislikeHovered(false)}
-                  ></Dislike>
-                </div>
+                  onClick={() => {
+                    handleFeedback?.('DISLIKE');
+                    setIsDislikeClicked(true);
+                    setIsLikeClicked(false);
+                  }}
+                  onMouseEnter={() => setIsDislikeHovered(true)}
+                  onMouseLeave={() => setIsDislikeHovered(false)}
+                ></Dislike>
               </div>
             </div>
           </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 519b5f74..c1d80714 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -409,9 +409,9 @@ template {
   width: 0;
 }
 
-.bottom-safe {
+/* .bottom-safe {
   bottom: env(safe-area-inset-bottom, 0);
-}
+} */
 
 .inputbox-style[contenteditable] {
   padding-left: 36px;
diff --git a/frontend/src/locale/i18n.ts b/frontend/src/locale/i18n.ts
index 32b25db7..dbf5ae1b 100644
--- a/frontend/src/locale/i18n.ts
+++ b/frontend/src/locale/i18n.ts
@@ -1,29 +1,38 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 import en from './en.json'; //English
 import es from './es.json'; //Spanish
 import jp from './jp.json'; //Japanese
 import zh from './zh.json'; //Mandarin
 
-i18n.use(initReactI18next).init({
-  resources: {
-    en: {
-      translation: en,
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: en,
+      },
+      es: {
+        translation: es,
+      },
+      jp: {
+        translation: jp,
+      },
+      zh: {
+        translation: zh,
+      },
     },
-    es: {
-      translation: es,
+    fallbackLng: 'en',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'docsgpt-locale',
     },
-    jp: {
-      translation: jp,
-    },
-    zh: {
-      translation: zh,
-    },
-  },
-});
+  });
 
-const locale = localStorage.getItem('docsgpt-locale') ?? 'en';
-i18n.changeLanguage(locale);
+i18n.changeLanguage(i18n.language);
 
 export default i18n;