diff --git a/frontend/public/toolIcons/tool_duckduckgo.svg b/frontend/public/toolIcons/tool_duckduckgo.svg
new file mode 100644
index 00000000..8215a918
--- /dev/null
+++ b/frontend/public/toolIcons/tool_duckduckgo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.a{fill:#d53;}.b{fill:#fff;}.c{fill:#ddd;}.d{fill:#fc0;}.e{fill:#6b5;}.f{fill:#4a4;}.g{fill:#148;}</style></defs><title>duckduckgo</title><path class="a" d="M122.88,61.44a61.44,61.44,0,1,0-61.44,61.44,61.44,61.44,0,0,0,61.44-61.44Z"/><path class="b" d="M114.37,61.44a52.92,52.92,0,1,0-15.5,37.43,52.76,52.76,0,0,0,15.5-37.43Zm-13.12-39.8A56.29,56.29,0,1,1,61.44,5.15a56.12,56.12,0,0,1,39.81,16.49Z"/><path class="c" d="M43.24,30.15C26.17,34.13,32.43,58,32.43,58l10.81,52.9,4,1.71-4-82.49Zm-4-10.24H34.7L41,22.19s-6.26,0-6.26,4C48.36,25.6,54.61,29,54.61,29l-15.36-9.1Zm0,0Z"/><path class="b" d="M75.66,115.48S62,93.87,62,79.64c0-26.73,17.63-4,17.63-25S62,28.44,62,28.44c-8.53-10.8-25-8.53-25-8.53l4,2.28s-4,1.13-5.12,2.27,10.81-1.7,15.93,2.85C30.72,29,34.13,46.08,34.13,46.08l11.95,68.27,29.58,1.13Zm0,0Z"/><path class="d" d="M75.66,60.87l21.62-5.69C116.62,58,80.78,68.84,78.51,68.27c-17.07-2.85-12,11.37,8.53,6.82s5.12,11.38-13.65,5.12c-26.74-7.39-12.52-20.48,2.27-19.34Z"/><path class="e" d="M70,105.81l1.14-1.7c12.52,4.55,13.09,6.25,12.52-5.12s0-11.38-13.09-1.71c0-2.84-7.39-1.71-8.53,0-11.95-5.12-13.09-6.83-12.52,1.14,1.14,16.5.57,13.65,11.95,8l8.53-.57Zm0,0Z"/><path class="f" d="M60.87,99.56v6.82c.57,1.14,9.67,1.14,9.67-1.14s-4.55,1.71-7.39.57S62,98.42,62,98.42l-1.14,1.14Zm0,0Z"/><path class="g" d="M48.36,43.24c-2.85-3.42-10.24-.57-8.54,4,.57-2.28,4.55-5.69,8.54-4Zm18.2,0c.57-3.42,6.26-4,8-.57a8,8,0,0,0-8,.57Zm-18.77,9.1a1.14,1.14,0,1,1,0,.57v-.57Zm-4.55,2.27a4,4,0,1,0,0-.57v.57Zm29.58-4a1.14,1.14,0,1,1,0,.57v-.57ZM69.4,52.91a3.42,3.42,0,1,0,0-.57v.57Zm0,0Z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 864e0a0e..21bfa442 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -288,135 +288,101 @@ const ConversationBubble = forwardRef<
         {DisableSourceFE ||
         type === 'ERROR' ||
         sources?.length === 0 ||
-        sources?.some((source) => source.link === 'None') ? null : !sources &&
-          chunks !== '0' ? (
-          <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
-            <div className="my-2 flex flex-row items-center justify-center gap-3">
-              <Avatar
-                className="h-[26px] w-[30px] text-xl"
-                avatar={
-                  <img
-                    src={Sources}
-                    alt={t('conversation.sources.title')}
-                    className="h-full w-full object-fill"
+        sources?.some((source) => source.link === 'None')
+          ? null
+          : sources && (
+              <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+                <div className="my-2 flex flex-row items-center justify-center gap-3">
+                  <Avatar
+                    className="h-[26px] w-[30px] text-xl"
+                    avatar={
+                      <img
+                        src={Sources}
+                        alt={t('conversation.sources.title')}
+                        className="h-full w-full object-fill"
+                      />
+                    }
                   />
-                }
-              />
-              <p className="text-base font-semibold">
-                {t('conversation.sources.title')}
-              </p>
-            </div>
-            <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-              {Array.from({ length: 4 }).map((_, index) => (
-                <div
-                  key={index}
-                  className="flex h-28 cursor-pointer flex-col items-start gap-1 rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
-                >
-                  <span className="h-px w-10 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-16 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-32 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-20 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <p className="text-base font-semibold">
+                    {t('conversation.sources.title')}
+                  </p>
                 </div>
-              ))}
-            </div>
-          </div>
-        ) : (
-          sources && (
-            <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
-              <div className="my-2 flex flex-row items-center justify-center gap-3">
-                <Avatar
-                  className="h-[26px] w-[30px] text-xl"
-                  avatar={
-                    <img
-                      src={Sources}
-                      alt={t('conversation.sources.title')}
-                      className="h-full w-full object-fill"
-                    />
-                  }
-                />
-                <p className="text-base font-semibold">
-                  {t('conversation.sources.title')}
-                </p>
-              </div>
-              <div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
-                <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-                  {sources?.slice(0, 3)?.map((source, index) => (
-                    <div key={index} className="relative">
-                      <div
-                        className="h-28 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
-                        onMouseOver={() => setActiveTooltip(index)}
-                        onMouseOut={() => setActiveTooltip(null)}
-                      >
-                        <p className="ellipsis-text h-12 break-words text-xs">
-                          {source.text}
-                        </p>
+                <div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
+                  <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+                    {sources?.slice(0, 3)?.map((source, index) => (
+                      <div key={index} className="relative">
                         <div
-                          className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
-                            source.link && source.link !== 'local'
-                              ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
-                              : ''
-                          }`}
-                          onClick={() =>
-                            source.link && source.link !== 'local'
-                              ? window.open(
-                                  source.link,
-                                  '_blank',
-                                  'noopener, noreferrer',
-                                )
-                              : null
-                          }
-                        >
-                          <img
-                            src={Document}
-                            alt="Document"
-                            className="h-[17px] w-[17px] object-fill"
-                          />
-                          <p
-                            className="mt-[2px] truncate text-xs"
-                            title={
-                              source.link && source.link !== 'local'
-                                ? source.link
-                                : source.title
-                            }
-                          >
-                            {source.link && source.link !== 'local'
-                              ? source.link
-                              : source.title}
-                          </p>
-                        </div>
-                      </div>
-                      {activeTooltip === index && (
-                        <div
-                          className={`absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver sm:w-56`}
+                          className="h-28 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
                           onMouseOver={() => setActiveTooltip(index)}
                           onMouseOut={() => setActiveTooltip(null)}
                         >
-                          <p className="line-clamp-6 max-h-[164px] overflow-hidden text-ellipsis break-words rounded-md text-sm">
+                          <p className="ellipsis-text h-12 break-words text-xs">
                             {source.text}
                           </p>
+                          <div
+                            className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
+                              source.link && source.link !== 'local'
+                                ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
+                                : ''
+                            }`}
+                            onClick={() =>
+                              source.link && source.link !== 'local'
+                                ? window.open(
+                                    source.link,
+                                    '_blank',
+                                    'noopener, noreferrer',
+                                  )
+                                : null
+                            }
+                          >
+                            <img
+                              src={Document}
+                              alt="Document"
+                              className="h-[17px] w-[17px] object-fill"
+                            />
+                            <p
+                              className="mt-[2px] truncate text-xs"
+                              title={
+                                source.link && source.link !== 'local'
+                                  ? source.link
+                                  : source.title
+                              }
+                            >
+                              {source.link && source.link !== 'local'
+                                ? source.link
+                                : source.title}
+                            </p>
+                          </div>
                         </div>
-                      )}
-                    </div>
-                  ))}
-                  {(sources?.length ?? 0) > 3 && (
-                    <div
-                      className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
-                      onClick={() => setIsSidebarOpen(true)}
-                    >
-                      <p className="ellipsis-text h-22 text-xs">
-                        {t('conversation.sources.view_more', {
-                          count: sources?.length ? sources.length - 3 : 0,
-                        })}
-                      </p>
-                    </div>
-                  )}
+                        {activeTooltip === index && (
+                          <div
+                            className={`absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver sm:w-56`}
+                            onMouseOver={() => setActiveTooltip(index)}
+                            onMouseOut={() => setActiveTooltip(null)}
+                          >
+                            <p className="line-clamp-6 max-h-[164px] overflow-hidden text-ellipsis break-words rounded-md text-sm">
+                              {source.text}
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                    {(sources?.length ?? 0) > 3 && (
+                      <div
+                        className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
+                        onClick={() => setIsSidebarOpen(true)}
+                      >
+                        <p className="ellipsis-text h-22 text-xs">
+                          {t('conversation.sources.view_more', {
+                            count: sources?.length ? sources.length - 3 : 0,
+                          })}
+                        </p>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          )
-        )}
+            )}
         {toolCalls && toolCalls.length > 0 && (
           <ToolCalls toolCalls={toolCalls} />
         )}