diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index e9a136e4..1b59d610 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 interface SkeletonLoaderProps {
   count?: number;
-  component?: 'default' | 'analysis' | 'chatbot' | 'logs';
+  component?: 'default' | 'analysis' | 'logs' | 'table' | 'chatbot';
 }
 
 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
@@ -32,105 +32,144 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     };
   }, [count]);
 
+  if (component === 'table') {
+    return (
+      <>
+        {[...Array(4)].map((_, idx) => (
+          <tr key={idx} className="animate-pulse">
+            <td className="py-4 px-4 w-[45%]">
+              <div className="h-4 bg-gray-600 dark:bg-gray-700 rounded w-full"></div>
+            </td>
+            <td className="py-4 px-4 w-[20%]">
+              <div className="h-4 bg-gray-600 dark:bg-gray-700 rounded w-full"></div>
+            </td>
+            <td className="py-4 px-4 w-[25%]">
+              <div className="h-4 bg-gray-600 dark:bg-gray-700 rounded w-full"></div>
+            </td>
+            <td className="py-4 px-4 w-[10%]">
+              <div className="h-4 bg-gray-600 dark:bg-gray-700 rounded w-full"></div>
+            </td>
+          </tr>
+        ))}
+      </>
+    );
+  }
+
+  if (component === 'chatbot') {
+    return (
+      <>
+        {[...Array(4)].map((_, idx) => (
+          <tr
+            key={idx}
+            className="animate-pulse"
+          >
+            <td className="p-2">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mx-auto"></div>
+            </td>
+            <td className="p-2">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mx-auto"></div>
+            </td>
+            <td className="p-2">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mx-auto"></div>
+            </td>
+            <td className="p-2">
+              <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-8 mx-auto"></div>
+            </td>
+          </tr>
+        ))}
+      </>
+    );
+  }
+
+
   return (
     <div className="flex flex-col space-y-4">
       {component === 'default' ? (
-        [...Array(skeletonCount)].map((_, idx) => (
-          <div
-            key={idx}
-            className={`p-6 ${skeletonCount === 1 ? 'w-full' : 'w-60'} dark:bg-raisin-black rounded-3xl animate-pulse`}
-          >
-            <div className="space-y-4">
-              <div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-1/2"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
-              </div>
-              <div className="border-t border-gray-600 my-4"></div>
-              <div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-1/4"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
-              </div>
-              <div className="border-t border-gray-600 my-4"></div>
-              <div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-1/3"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
-                <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
-              </div>
-              <div className="border-t border-gray-600 my-4"></div>
-              <div className="h-4 bg-gray-600 rounded w-3/4 mb-2"></div>
-              <div className="h-4 bg-gray-600 rounded w-5/6 mb-2"></div>
-            </div>
-          </div>
-        ))
-      ) : component === 'analysis' ? (
-        [...Array(skeletonCount)].map((_, idx) => (
-          <div
-            key={idx}
-            className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
-          >
-            <div className="space-y-6">
-              <div className="space-y-2">
-                <div className="h-4 bg-gray-600 rounded w-1/3 mb-4"></div>
-                <div className="grid grid-cols-6 gap-2 items-end">
-                  <div className="h-32 bg-gray-600 rounded"></div>
-                  <div className="h-24 bg-gray-600 rounded"></div>
-                  <div className="h-40 bg-gray-600 rounded"></div>
-                  <div className="h-28 bg-gray-600 rounded"></div>
-                  <div className="h-36 bg-gray-600 rounded"></div>
-                  <div className="h-20 bg-gray-600 rounded"></div>
+        <>
+          {[...Array(skeletonCount)].map((_, idx) => (
+            <div
+              key={idx}
+              className={`p-6 ${
+                skeletonCount === 1 ? 'w-full' : 'w-60'
+              } dark:bg-raisin-black rounded-3xl animate-pulse`}
+            >
+              <div className="space-y-4">
+                <div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-1/2"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-3/4"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
                 </div>
+                <div className="border-t border-gray-600 my-4"></div>
+                <div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-1/4"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+                </div>
+                <div className="border-t border-gray-600 my-4"></div>
+                <div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-5/6"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-1/3"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-2/3"></div>
+                  <div className="h-4 bg-gray-600 rounded mb-2 w-full"></div>
+                </div>
+                <div className="border-t border-gray-600 my-4"></div>
+                <div className="h-4 bg-gray-600 rounded w-3/4 mb-2"></div>
+                <div className="h-4 bg-gray-600 rounded w-5/6 mb-2"></div>
               </div>
-              <div className="space-y-2">
-                <div className="h-4 bg-gray-600 rounded w-1/4 mb-4"></div>
-                <div className="h-32 bg-gray-600 rounded"></div>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="h-4 bg-gray-600 rounded w-full"></div>
-                <div className="h-4 bg-gray-600 rounded w-full"></div>
-              </div>
-            </div>
-          </div>
-        ))
-      ) : component === 'chatbot' ? (
-        <div className="space-y-2 p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse">
-          <div className="grid grid-cols-4 gap-2 p-2">
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-            <div className="h-4 bg-gray-600 rounded w-full"></div>
-          </div>
-          <div className="border-t border-gray-600 my-2"></div>
-
-          {[...Array(skeletonCount * 6)].map((_, idx) => (
-            <div key={idx} className="grid grid-cols-4 gap-2 p-2 space-x-2">
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
-              <div className="h-4 bg-gray-500 rounded w-full"></div>
             </div>
           ))}
-        </div>
-      ) : (
-        [...Array(skeletonCount)].map((_, idx) => (
-          <div
-            key={idx}
-            className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
-          >
-            <div className="space-y-4">
-              <div className="h-4 bg-gray-600 rounded w-1/2"></div>
-              <div className="h-4 bg-gray-600 rounded w-5/6"></div>
-              <div className="h-4 bg-gray-600 rounded w-3/4"></div>
-              <div className="h-4 bg-gray-600 rounded w-2/3"></div>
-              <div className="h-4 bg-gray-600 rounded w-1/4"></div>
+        </>
+      ) : component === 'analysis' ? (
+        <>
+          {[...Array(skeletonCount)].map((_, idx) => (
+            <div
+              key={idx}
+              className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+            >
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <div className="h-4 bg-gray-600 rounded w-1/3 mb-4"></div>
+                  <div className="grid grid-cols-6 gap-2 items-end">
+                    <div className="h-32 bg-gray-600 rounded"></div>
+                    <div className="h-24 bg-gray-600 rounded"></div>
+                    <div className="h-40 bg-gray-600 rounded"></div>
+                    <div className="h-28 bg-gray-600 rounded"></div>
+                    <div className="h-36 bg-gray-600 rounded"></div>
+                    <div className="h-20 bg-gray-600 rounded"></div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="h-4 bg-gray-600 rounded w-1/4 mb-4"></div>
+                  <div className="h-32 bg-gray-600 rounded"></div>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="h-4 bg-gray-600 rounded w-full"></div>
+                  <div className="h-4 bg-gray-600 rounded w-full"></div>
+                </div>
+              </div>
             </div>
-          </div>
-        ))
-      )}
+          ))}
+        </>
+      )  : component === 'logs' ? (
+        <>
+          {[...Array(skeletonCount)].map((_, idx) => (
+            <div
+              key={idx}
+              className="p-6 w-full dark:bg-raisin-black rounded-3xl animate-pulse"
+            >
+              <div className="space-y-4">
+                <div className="h-4 bg-gray-600 rounded w-1/2"></div>
+                <div className="h-4 bg-gray-600 rounded w-5/6"></div>
+                <div className="h-4 bg-gray-600 rounded w-3/4"></div>
+                <div className="h-4 bg-gray-600 rounded w-2/3"></div>
+                <div className="h-4 bg-gray-600 rounded w-1/4"></div>
+              </div>
+            </div>
+          ))}
+        </>
+      ) : null}
     </div>
   );
 };
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 2226544c..642566f1 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -49,8 +49,9 @@ export default function APIKeys() {
         return response.json();
       })
       .then((data) => {
-        data.success === true &&
+        if (data.success === true) {
           setApiKeys((previous) => previous.filter((elem) => elem.id !== id));
+        }
         setKeyToDelete(null);
       })
       .catch((error) => {
@@ -133,73 +134,72 @@ export default function APIKeys() {
         )}
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
-            {loading ? (
-              <SkeletonLoader count={1} component={'chatbot'} />
-            ) : (
-              <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>
+            <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>
-                      </thead>
-                      <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
-                        {!apiKeys?.length && (
-                          <tr>
-                            <td
-                              colSpan={4}
-                              className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
-                            >
-                              {t('settings.apiKeys.noData')}
+                      ) : (
+                        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">
+                              <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,
+                                  })
+                                }
+                              />
                             </td>
                           </tr>
-                        )}
-                        {Array.isArray(apiKeys) &&
-                          apiKeys?.map((element, index) => (
-                            <tr
-                              key={index}
-                              className="text-nowrap whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200 p-2"
-                            >
-                              <td className="p-1">{element.name}</td>
-                              <td className="p-2">{element.source}</td>
-                              <td>{element.key}</td>
-                              <td>
-                                <img
-                                  src={Trash}
-                                  alt={`Delete ${element.name}`}
-                                  className="h-4 w-4 cursor-pointer hover:opacity-50"
-                                  id={`img-${index}`}
-                                  onClick={() =>
-                                    setKeyToDelete({
-                                      id: element.id,
-                                      name: element.name,
-                                    })
-                                  }
-                                />
-                              </td>
-                            </tr>
-                          ))}
-                      </tbody>
-                    </table>
-                  </div>
+                        ))
+                      )}
+                    </tbody>
+                  </table>
                 </div>
               </div>
-            )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 32254a8f..98ff7656 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -214,9 +214,7 @@ export default function Documents({
           </button>
         </div>
 
-        {loading ? (
-          <SkeletonLoader count={1} />
-        ) : (
+         
           <div className="flex flex-col flex-grow">
             {' '}
             <div className="border rounded-md border-gray-300 dark:border-silver/40 overflow-hidden">
@@ -261,7 +259,9 @@ export default function Documents({
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
-                  {!currentDocuments?.length ? (
+                  {loading ? (
+                    <SkeletonLoader component="table" />
+                  ) : !currentDocuments?.length ? (
                     <tr>
                       <td
                         colSpan={4}
@@ -329,7 +329,7 @@ export default function Documents({
               </table>
             </div>
           </div>
-        )}
+        
       </div>
 
       <div className="mt-auto pt-4">