diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 464b49fe..a224f8d9 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -333,7 +333,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 <button
                   ref={sourceAnchorButtonRef}
                   onClick={() => setIsSourcePopupOpen(!isSourcePopupOpen)}
-                  className="w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-silver"
+                  className={`w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] dark:bg-[#222327] ${
+                    selectedSourceIds.size > 0
+                      ? 'text-jet dark:text-bright-gray'
+                      : 'text-gray-400 dark:text-silver'
+                  }`}
                 >
                   {selectedSourceIds.size > 0
                     ? Array.from(selectedSourceIds)
@@ -436,7 +440,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               <button
                 ref={toolAnchorButtonRef}
                 onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
-                className="w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-silver"
+                className={`w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] dark:bg-[#222327] ${
+                  selectedToolIds.size > 0
+                    ? 'text-jet dark:text-bright-gray'
+                    : 'text-gray-400 dark:text-silver'
+                }`}
               >
                 {selectedToolIds.size > 0
                   ? Array.from(selectedToolIds)
diff --git a/frontend/src/assets/external-link.svg b/frontend/src/assets/external-link.svg
new file mode 100644
index 00000000..835fcc67
--- /dev/null
+++ b/frontend/src/assets/external-link.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4028 7.35671V12.6427C12.4043 12.844 12.3655 13.0436 12.2889 13.2298C12.2122 13.4159 12.0991 13.5849 11.9564 13.7269C11.8136 13.8688 11.6439 13.9808 11.4573 14.0563C11.2706 14.1318 11.0708 14.1694 10.8695 14.1667H3.36483C3.16278 14.1693 2.96226 14.1314 2.77509 14.0553C2.58792 13.9791 2.41789 13.8663 2.27504 13.7234C2.13219 13.5804 2.01941 13.4104 1.94335 13.2232C1.86728 13.036 1.82948 12.8354 1.83217 12.6334V5.12871C1.82975 4.92668 1.86776 4.7262 1.94396 4.53908C2.02017 4.35196 2.13302 4.18196 2.27589 4.0391C2.41875 3.89623 2.58875 3.78338 2.77587 3.70717C2.963 3.63097 3.16347 3.59296 3.3655 3.59537H8.65083M14.1648 1.83337L7.1175 8.88071M14.1648 1.83337H10.6408M14.1648 1.83337V5.35737" stroke="#7D54D1" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index 0c94ce6e..e4c064ad 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -96,19 +96,32 @@ export default function AgentDetailsModal({
               </h2>
             </div>
             {sharedToken ? (
-              <div className="items-center gap-2">
+              <div className="flex flex-col gap-2">
                 <p className="inline break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
                   {`${baseURL}/shared/agent/${sharedToken}`}
                   <CopyButton
                     textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
                     padding="p-1"
-                    className="ml-1 inline-flex"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
                   />
                 </p>
+                <a
+                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                  className="flex w-fit items-center gap-1 text-purple-30 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="text-sm">Learn more</span>
+                  <img
+                    src="/src/assets/external-link.svg"
+                    alt="External link"
+                    className="h-3 w-3"
+                  />
+                </a>
               </div>
             ) : (
               <button
-                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
                 onClick={handleGeneratePublicLink}
               >
                 {loadingStates.publicLink ? (
@@ -124,23 +137,37 @@ export default function AgentDetailsModal({
               API Key
             </h2>
             {apiKey ? (
-              <div className="flex items-center gap-2">
-                <span className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
-                  {apiKey}
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <div className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                    {apiKey}
+                    {!apiKey.includes('...') && (
+                      <CopyButton
+                        textToCopy={apiKey}
+                        padding="p-1"
+                        className="absolute -mt-0.5 ml-1 inline-flex"
+                      />
+                    )}
+                  </div>
                   {!apiKey.includes('...') && (
-                    <CopyButton
-                      textToCopy={apiKey}
-                      padding="p-1"
-                      className="ml-1 inline-flex"
-                    />
+                    <a
+                      href={`https://widget.docsgpt.cloud/?api-key=${apiKey}`}
+                      className="group ml-8 flex w-[101px] items-center justify-center gap-1 rounded-[62px] border border-purple-30 py-1.5 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Test
+                      <img
+                        src="/src/assets/external-link.svg"
+                        alt="External link"
+                        className="h-3 w-3 group-hover:brightness-0 group-hover:invert"
+                      />
+                    </a>
                   )}
-                </span>
-                {!apiKey.includes('...') && (
-                  <CopyButton textToCopy={apiKey} padding="p-1" />
-                )}
+                </div>
               </div>
             ) : (
-              <button className="w-28 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white">
+              <button className="w-28 rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white">
                 Generate
               </button>
             )}
@@ -152,19 +179,32 @@ export default function AgentDetailsModal({
               </h2>
             </div>
             {webhookUrl ? (
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col gap-2">
                 <p className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
                   {webhookUrl}
                   <CopyButton
                     textToCopy={webhookUrl}
                     padding="p-1"
-                    className="ml-1 inline-flex"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
                   />
                 </p>
+                <a
+                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                  className="flex w-fit items-center gap-1 text-purple-30 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="text-sm">Learn more</span>
+                  <img
+                    src="/src/assets/external-link.svg"
+                    alt="External link"
+                    className="h-3 w-3"
+                  />
+                </a>
               </div>
             ) : (
               <button
-                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
                 onClick={handleGenerateWebhook}
               >
                 {loadingStates.webhook ? (