diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index df7895ed..1081ddf0 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -81,7 +81,8 @@
       "sourceDoc": "Source Document",
       "createNew": "Create New",
       "noData": "No existing Chatbots",
-      "deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?"
+      "deleteConfirmation": "Are you sure you want to delete the API key '{{name}}'?",
+      "description": "Here you can create and manage your chatbots. Chatbots can be deployed to websites as widgets or used inside your applications."
     },
     "analytics": {
       "label": "Analytics",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 123f9fdd..e699a3c6 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -81,7 +81,8 @@
       "sourceDoc": "Documento Fuente",
       "createNew": "Crear Nuevo",
       "noData": "No hay chatbots existentes",
-      "deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?"
+      "deleteConfirmation": "¿Estás seguro de que quieres eliminar la clave API '{{name}}'?",
+      "description": "Aquí puede crear y gestionar sus chatbots. Los chatbots se pueden implementar en sitios web como widgets o utilizarse dentro de sus aplicaciones."
     },
     "analytics": {
       "label": "Analítica",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index b4cd1531..7c716135 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -80,7 +80,8 @@
       "sourceDoc": "ソースドキュメント",
       "createNew": "新規作成",
       "noData": "既存のチャットボットはありません",
-      "deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？"
+      "deleteConfirmation": "APIキー '{{name}}' を削除してもよろしいですか？",
+      "description": "ここでチャットボットを作成・管理できます。チャットボットはウィジェットとしてウェブサイトに導入したり、アプリケーション内で使用したりすることができます。"
     },
     "analytics": {
       "label": "分析",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index d6bc2bdf..3ec75bfb 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -81,7 +81,8 @@
       "sourceDoc": "Источник документа",
       "createNew": "Создать новый",
       "noData": "Нет существующих чатботов",
-      "deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?"
+      "deleteConfirmation": "Вы уверены, что хотите удалить API ключ '{{name}}'?",
+      "description": "Здесь вы можете создавать и управлять чат-ботами. Чат-боты могут быть развернуты на веб-сайтах в виде виджетов или использоваться внутри ваших приложений."
     },
     "analytics": {
       "label": "Аналитика",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 8eef9e56..eb0240a0 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -81,7 +81,8 @@
       "sourceDoc": "來源文件",
       "createNew": "建立新的",
       "noData": "沒有現有的聊天機器人",
-      "deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？"
+      "deleteConfirmation": "您確定要刪除 API 金鑰 '{{name}}' 嗎？",
+      "description": "在這裡，您可以創建和管理您的聊天機器人。聊天機器人可以作為小部件部署到網站上，或在您的應用程序中使用。"
     },
     "analytics": {
       "label": "分析",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index eb9d1e21..245333c3 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -81,7 +81,8 @@
       "sourceDoc": "源文档",
       "createNew": "创建新的",
       "noData": "没有现有的聊天机器人",
-      "deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？"
+      "deleteConfirmation": "您确定要删除 API 密钥 '{{name}}' 吗？",
+      "description": "在这里，您可以创建和管理您的聊天机器人。聊天机器人可以作为小部件部署到网站上，或在您的应用程序中使用。"
     },
     "analytics": {
       "label": "分析",
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
index 1a2e22e2..28b9c582 100644
--- a/frontend/src/modals/ConfirmationModal.tsx
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -32,7 +32,7 @@ export default function ConfirmationModal({
         >
           <div className="relative">
             <div>
-              <p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray">
+              <p className="font-base mb-1 w-[90%] text-lg break-words text-jet dark:text-bright-gray">
                 {message}
               </p>
               <div>
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 642566f1..6d76d7e8 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -98,111 +98,132 @@ export default function APIKeys() {
   }, []);
 
   return (
-    <div className="mt-8">
-      <div className="flex flex-col max-w-[876px]">
-        <div className="flex justify-end">
+    <div className="flex flex-col w-full mt-8 max-w-full overflow-hidden">
+      <div className="flex flex-col relative flex-grow">
+        <div className="mb-6">
+          <h2 className="text-base font-medium text-sonic-silver">
+            {t('settings.apiKeys.description')}
+          </h2>
+        </div>
+
+        <div className="mb-6 flex flex-col sm:flex-row justify-end items-start sm:items-center gap-3">
           <button
             onClick={() => setCreateModal(true)}
-            className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+            className="rounded-full w-full sm:w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+            title={t('settings.apiKeys.createNew')}
           >
             {t('settings.apiKeys.createNew')}
           </button>
         </div>
-        {isCreateModalOpen && (
-          <CreateAPIKeyModal
-            createAPIKey={handleCreateKey}
-            close={() => setCreateModal(false)}
-          />
-        )}
-        {isSaveKeyModalOpen && (
-          <SaveAPIKeyModal
-            apiKey={newKey}
-            close={() => setSaveKeyModal(false)}
-          />
-        )}
-        {keyToDelete && (
-          <ConfirmationModal
-            message={t('settings.apiKeys.deleteConfirmation', {
-              name: keyToDelete.name,
-            })}
-            modalState="ACTIVE"
-            setModalState={() => setKeyToDelete(null)}
-            submitLabel={t('modals.deleteConv.delete')}
-            handleSubmit={() => handleDeleteKey(keyToDelete.id)}
-            handleCancel={() => setKeyToDelete(null)}
-          />
-        )}
-        <div className="mt-[27px] w-full">
-          <div className="w-full overflow-x-auto">
-            <div className="flex flex-col">
-              <div className="flex-grow">
-                <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
-                  <table className="min-w-full divide-y divide-silver dark:divide-silver/40">
-                    <thead>
-                      <tr className="text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
-                        <th scope="col" className="p-2">
-                          {t('settings.apiKeys.name')}
-                        </th>
-                        <th scope="col" className="p-2">
-                          {t('settings.apiKeys.sourceDoc')}
-                        </th>
-                        <th scope="col" className="p-2">
-                          {t('settings.apiKeys.key')}
-                        </th>
-                        <th
-                          scope="col"
-                          className="p-2"
-                          aria-label="Actions"
-                        ></th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
-                      {loading ? (
-                        <SkeletonLoader component="chatbot" />
-                      ) : !apiKeys?.length ? (
-                        <tr>
-                          <td
-                            colSpan={4}
-                            className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
-                          >
-                            {t('settings.apiKeys.noData')}
-                          </td>
-                        </tr>
-                      ) : (
-                        Array.isArray(apiKeys) &&
-                        apiKeys.map((element, index) => (
-                          <tr
-                            key={element.id}
-                            className="text-nowrap whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200 p-2"
-                          >
-                            <td className="p-2">{element.name}</td>
-                            <td className="p-2">{element.source}</td>
-                            <td className="p-2">{element.key}</td>
-                            <td className="p-2">
+
+        <div className="relative w-full">
+          <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
+            <div className="overflow-x-auto table-scroll">
+              <table className="w-full table-auto">
+                <thead>
+                  <tr className="border-b border-gray-300 dark:border-silver/40">
+                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[35%]">
+                      {t('settings.apiKeys.name')}
+                    </th>
+                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[35%]">
+                      {t('settings.apiKeys.sourceDoc')}
+                    </th>
+                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[25%]">
+                      <span className="hidden sm:inline">
+                        {t('settings.apiKeys.key')}
+                      </span>
+                      <span className="sm:hidden">
+                        {t('settings.apiKeys.key')}
+                      </span>
+                    </th>
+                    <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[5%]">
+                      <span className="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
+                  {loading ? (
+                    <SkeletonLoader component="table" />
+                  ) : !apiKeys?.length ? (
+                    <tr>
+                      <td
+                        colSpan={4}
+                        className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
+                      >
+                        {t('settings.apiKeys.noData')}
+                      </td>
+                    </tr>
+                  ) : (
+                    Array.isArray(apiKeys) &&
+                    apiKeys.map((element) => (
+                      <tr
+                        key={element.id}
+                        className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                      >
+                        <td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0">
+                          <div className="truncate" title={element.name}>
+                            {element.name}
+                          </div>
+                        </td>
+                        <td className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[35%] min-w-48 max-w-0">
+                          <div className="truncate" title={element.source}>
+                            {element.source}
+                          </div>
+                        </td>
+                        <td className="py-4 px-4 text-sm font-mono text-gray-700 dark:text-[#E0E0E0] w-[25%]">
+                          <div className="truncate" title={element.key}>
+                            {element.key}
+                          </div>
+                        </td>
+                        <td className="py-4 px-4 text-right w-[5%]">
+                          <div className="flex justify-end">
+                            <button
+                              onClick={() =>
+                                setKeyToDelete({
+                                  id: element.id,
+                                  name: element.name,
+                                })
+                              }
+                              className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                            >
                               <img
                                 src={Trash}
-                                alt={`Delete ${element.name}`}
-                                className="h-4 w-4 cursor-pointer hover:opacity-50 mx-auto"
-                                id={`img-${index}`}
-                                onClick={() =>
-                                  setKeyToDelete({
-                                    id: element.id,
-                                    name: element.name,
-                                  })
-                                }
+                                alt={t('convTile.delete')}
+                                className="h-4 w-4 opacity-60 hover:opacity-100"
                               />
-                            </td>
-                          </tr>
-                        ))
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
       </div>
+      {isCreateModalOpen && (
+        <CreateAPIKeyModal
+          createAPIKey={handleCreateKey}
+          close={() => setCreateModal(false)}
+        />
+      )}
+      {isSaveKeyModalOpen && (
+        <SaveAPIKeyModal apiKey={newKey} close={() => setSaveKeyModal(false)} />
+      )}
+      {keyToDelete && (
+        <ConfirmationModal
+          message={t('settings.apiKeys.deleteConfirmation', {
+            name: keyToDelete.name,
+          })}
+          modalState="ACTIVE"
+          setModalState={() => setKeyToDelete(null)}
+          submitLabel={t('modals.deleteConv.delete')}
+          handleSubmit={() => handleDeleteKey(keyToDelete.id)}
+          handleCancel={() => setKeyToDelete(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index f4cc3f6e..1203758d 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -176,14 +176,14 @@ export default function Documents({
       }}
     />
   ) : (
-    <div className="flex flex-col mt-8">
+    <div className="flex flex-col mt-8 w-full max-w-full overflow-hidden">
       <div className="flex flex-col relative flex-grow">
         <div className="mb-6">
           <h2 className="text-base font-medium text-sonic-silver">
             {t('settings.documents.title')}
           </h2>
         </div>
-        <div className="my-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+        <div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
           <div className="w-full sm:w-auto">
             <label htmlFor="document-search-input" className="sr-only">
               {t('settings.documents.searchPlaceholder')}
@@ -213,117 +213,121 @@ export default function Documents({
             {t('settings.documents.addNew')}
           </button>
         </div>
-
-        <div className="flex flex-col flex-grow">
-          {' '}
+        <div className="relative w-full">
           <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
-            <table className="w-full min-w-[640px] table-auto">
-              <thead>
-                <tr className="border-b border-gray-300 dark:border-silver/40">
-                  <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
-                    {t('settings.documents.name')}
-                  </th>
-                  <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
-                    <div className="flex justify-center items-center">
-                      {t('settings.documents.date')}
-                      <img
-                        className="cursor-pointer ml-2"
-                        onClick={() => refreshDocs('date')}
-                        src={caretSort}
-                        alt="sort"
-                      />
-                    </div>
-                  </th>
-                  <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
-                    <div className="flex justify-center items-center">
-                      <span className="hidden sm:inline">
-                        {t('settings.documents.tokenUsage')}
+            <div className="overflow-x-auto table-scroll">
+              <table className="w-full table-auto">
+                <thead>
+                  <tr className="border-b border-gray-300 dark:border-silver/40">
+                    <th className="py-3 px-4 text-left text-xs font-medium text-sonic-silver uppercase w-[45%]">
+                      {t('settings.documents.name')}
+                    </th>
+                    <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[20%]">
+                      <div className="flex justify-center items-center">
+                        {t('settings.documents.date')}
+                        <img
+                          className="cursor-pointer ml-2"
+                          onClick={() => refreshDocs('date')}
+                          src={caretSort}
+                          alt="sort"
+                        />
+                      </div>
+                    </th>
+                    <th className="py-3 px-4 text-center text-xs font-medium text-sonic-silver uppercase w-[25%]">
+                      <div className="flex justify-center items-center">
+                        <span className="hidden sm:inline">
+                          {t('settings.documents.tokenUsage')}
+                        </span>
+                        <span className="sm:hidden">
+                          {t('settings.documents.tokenUsage')}
+                        </span>
+                        <img
+                          className="cursor-pointer ml-2"
+                          onClick={() => refreshDocs('tokens')}
+                          src={caretSort}
+                          alt="sort"
+                        />
+                      </div>
+                    </th>
+                    <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
+                      <span className="sr-only">
+                        {t('settings.documents.actions')}
                       </span>
-                      <span className="sm:hidden">
-                        {t('settings.documents.tokenUsage')}
-                      </span>
-                      <img
-                        className="cursor-pointer ml-2"
-                        onClick={() => refreshDocs('tokens')}
-                        src={caretSort}
-                        alt="sort"
-                      />
-                    </div>
-                  </th>
-                  <th className="py-3 px-4 text-right text-xs font-medium text-gray-700 dark:text-[#E0E0E0] uppercase w-[10%]">
-                    <span className="sr-only">
-                      {t('settings.documents.actions')}
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
-                {loading ? (
-                  <SkeletonLoader component="table" />
-                ) : !currentDocuments?.length ? (
-                  <tr>
-                    <td
-                      colSpan={4}
-                      className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
-                    >
-                      {t('settings.documents.noData')}
-                    </td>
+                    </th>
                   </tr>
-                ) : (
-                  currentDocuments.map((document, index) => (
-                    <tr
-                      key={index}
-                      className="group transition-colors"
-                      onClick={() => setShowDocumentChunks(document)}
-                    >
+                </thead>
+                <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
+                  {loading ? (
+                    <SkeletonLoader component="table" />
+                  ) : !currentDocuments?.length ? (
+                    <tr>
                       <td
-                        className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
-                        title={document.name}
+                        colSpan={4}
+                        className="py-4 text-center text-gray-700 dark:text-neutral-200 bg-transparent"
                       >
-                        {document.name}
-                      </td>
-                      <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                        {document.date ? formatDate(document.date) : ''}
-                      </td>
-                      <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                        {document.tokens ? formatTokens(+document.tokens) : ''}
-                      </td>
-                      <td className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
-                        <div className="flex items-center justify-end gap-3">
-                          {!document.syncFrequency && (
-                            <div className="w-8"></div>
-                          )}
-                          {document.syncFrequency && (
-                            <DropdownMenu
-                              name={t('settings.documents.sync')}
-                              options={syncOptions}
-                              onSelect={(value: string) => {
-                                handleManageSync(document, value);
-                              }}
-                              defaultValue={document.syncFrequency}
-                              icon={SyncIcon}
-                            />
-                          )}
-                          <button
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              handleDeleteConfirmation(index, document);
-                            }}
-                            className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
-                          >
-                            <img
-                              src={Trash}
-                              alt={t('convTile.delete')}
-                              className="h-4 w-4 opacity-60 hover:opacity-100"
-                            />
-                          </button>
-                        </div>
+                        {t('settings.documents.noData')}
                       </td>
                     </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
+                  ) : (
+                    currentDocuments.map((document, index) => (
+                      <tr
+                        key={index}
+                        className="group transition-colors cursor-pointer"
+                        onClick={() => setShowDocumentChunks(document)}
+                      >
+                        <td
+                          className="py-4 px-4 text-sm text-gray-700 dark:text-[#E0E0E0] w-[45%] min-w-48 max-w-0 truncate group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                          title={document.name}
+                        >
+                          {document.name}
+                        </td>
+                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[20%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                          {document.date ? formatDate(document.date) : ''}
+                        </td>
+                        <td className="py-4 px-4 text-center text-sm text-gray-700 dark:text-[#E0E0E0] whitespace-nowrap w-[25%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50">
+                          {document.tokens
+                            ? formatTokens(+document.tokens)
+                            : ''}
+                        </td>
+                        <td
+                          className="py-4 px-4 text-right w-[10%] group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
+                          onClick={(e) => e.stopPropagation()} // Stop event propagation for the entire actions cell
+                        >
+                          <div className="flex items-center justify-end gap-3">
+                            {!document.syncFrequency && (
+                              <div className="w-8"></div>
+                            )}
+                            {document.syncFrequency && (
+                              <DropdownMenu
+                                name={t('settings.documents.sync')}
+                                options={syncOptions}
+                                onSelect={(value: string) => {
+                                  handleManageSync(document, value);
+                                }}
+                                defaultValue={document.syncFrequency}
+                                icon={SyncIcon}
+                              />
+                            )}
+                            <button
+                              onClick={() => {
+                                handleDeleteConfirmation(index, document);
+                              }}
+                              className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
+                            >
+                              <img
+                                src={Trash}
+                                alt={t('convTile.delete')}
+                                className="h-4 w-4 opacity-60 hover:opacity-100"
+                              />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>