diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index 89f8010d..53538833 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -192,36 +192,41 @@ export default function Analytics() {
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
-        <div className="flex flex-col gap-3">
-          <p className="font-bold text-jet dark:text-bright-gray">
-            {t('settings.analytics.filterByChatbot')}
-          </p>
-          <Dropdown
-            size="w-[55vw] sm:w-[360px]"
-            options={[
-              ...chatbots.map((chatbot) => ({
-                label: chatbot.name,
-                value: chatbot.id,
-              })),
-              { label: t('settings.analytics.none'), value: '' },
-            ]}
-            placeholder={t('settings.analytics.selectChatbot')}
-            onSelect={(chatbot: { label: string; value: string }) => {
-              setSelectedChatbot(
-                chatbots.find((item) => item.id === chatbot.value),
-              );
-            }}
-            selectedValue={
-              (selectedChatbot && {
-                label: selectedChatbot.name,
-                value: selectedChatbot.id,
-              }) ||
-              null
-            }
-            rounded="3xl"
-            border="border"
-          />
-        </div>
+        {loadingChatbots ? (
+          <SkeletonLoader component="dropdown" />
+        ) : (
+          <div className="flex flex-col gap-3">
+            <p className="font-bold text-jet dark:text-bright-gray">
+              {t('settings.analytics.filterByChatbot')}
+            </p>
+            <Dropdown
+              size="w-[55vw] sm:w-[360px]"
+              options={[
+                ...chatbots.map((chatbot) => ({
+                  label: chatbot.name,
+                  value: chatbot.id,
+                })),
+                { label: t('settings.analytics.none'), value: '' },
+              ]}
+              placeholder={t('settings.analytics.selectChatbot')}
+              onSelect={(chatbot: { label: string; value: string }) => {
+                setSelectedChatbot(
+                  chatbots.find((item) => item.id === chatbot.value),
+                );
+              }}
+              selectedValue={
+                (selectedChatbot && {
+                  label: selectedChatbot.name,
+                  value: selectedChatbot.id,
+                }) ||
+                null
+              }
+              rounded="3xl"
+              border="border"
+              borderColor="gray-700"
+            />
+          </div>
+        )}
 
         {/* Messages Analytics */}
         <div className="mt-8 w-full flex flex-col [@media(min-width:1080px)]:flex-row gap-3">
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 4066f69c..970df332 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
@@ -67,42 +67,46 @@ export default function Logs() {
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
-        <div className="flex flex-col gap-3">
-          <label
-            id="chatbot-filter-label"
-            className="font-bold text-jet dark:text-bright-gray"
-          >
-            {t('settings.logs.filterByChatbot')}
-          </label>
-          <Dropdown
-            size="w-[55vw] sm:w-[360px]"
-            options={[
-              ...chatbots.map((chatbot) => ({
-                label: chatbot.name,
-                value: chatbot.id,
-              })),
-              { label: t('settings.logs.none'), value: '' },
-            ]}
-            placeholder={t('settings.logs.selectChatbot')}
-            onSelect={(chatbot: { label: string; value: string }) => {
-              setSelectedChatbot(
-                chatbots.find((item) => item.id === chatbot.value),
-              );
-              setLogs([]);
-              setPage(1);
-              setHasMore(true);
-            }}
-            selectedValue={
-              (selectedChatbot && {
-                label: selectedChatbot.name,
-                value: selectedChatbot.id,
-              }) ||
-              null
-            }
-            rounded="3xl"
-            border="border"
-          />
-        </div>
+        {loadingChatbots ? (
+          <SkeletonLoader component="dropdown" />
+        ) : (
+          <div className="flex flex-col gap-3">
+            <label
+              id="chatbot-filter-label"
+              className="font-bold text-jet dark:text-bright-gray"
+            >
+              {t('settings.logs.filterByChatbot')}
+            </label>
+            <Dropdown
+              size="w-[55vw] sm:w-[360px]"
+              options={[
+                ...chatbots.map((chatbot) => ({
+                  label: chatbot.name,
+                  value: chatbot.id,
+                })),
+                { label: t('settings.logs.none'), value: '' },
+              ]}
+              placeholder={t('settings.logs.selectChatbot')}
+              onSelect={(chatbot: { label: string; value: string }) => {
+                setSelectedChatbot(
+                  chatbots.find((item) => item.id === chatbot.value),
+                );
+                setLogs([]);
+                setPage(1);
+                setHasMore(true);
+              }}
+              selectedValue={
+                (selectedChatbot && {
+                  label: selectedChatbot.name,
+                  value: selectedChatbot.id,
+                }) ||
+                null
+              }
+              rounded="3xl"
+              border="border"
+            />
+          </div>
+        )}
       </div>
 
       <div className="mt-8">