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/index.css b/frontend/src/index.css
index ee9aa0c2..7d2f958a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index b18eb1ca..7c2c9b34 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -94,24 +94,40 @@ export default function AgentDetailsModal({
               <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
                 Public Link
               </h2>
-              {sharedToken && (
-                <div className="mb-1">
+            </div>
+            {sharedToken ? (
+              <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]">
+                  <a
+                    href={`${baseURL}/shared/agent/${sharedToken}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {`${baseURL}/shared/agent/${sharedToken}`}
+                  </a>
                   <CopyButton
                     textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
                     padding="p-1"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
                   />
-                </div>
-              )}
-            </div>
-            {sharedToken ? (
-              <div className="flex flex-col flex-wrap items-start gap-2">
-                <p className="f break-all font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                  {`${baseURL}/shared/agent/${sharedToken}`}
                 </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="hover:bg-vi</button>olets-are-blue 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 ? (
@@ -127,11 +143,37 @@ export default function AgentDetailsModal({
               API Key
             </h2>
             {apiKey ? (
-              <span className="font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                {apiKey}
-              </span>
+              <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('...') && (
+                    <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>
+                  )}
+                </div>
+              </div>
             ) : (
-              <button className="hover:bg-vi</button>olets-are-blue 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>
             )}
@@ -141,21 +183,36 @@ export default function AgentDetailsModal({
               <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
                 Webhook URL
               </h2>
-              {webhookUrl && (
-                <div className="mb-1">
-                  <CopyButton textToCopy={webhookUrl} padding="p-1" />
-                </div>
-              )}
             </div>
             {webhookUrl ? (
-              <div className="flex flex-col flex-wrap items-start gap-2">
-                <p className="f break-all font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                  {webhookUrl}
+              <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]">
+                  <a href={webhookUrl} target="_blank" rel="noreferrer">
+                    {webhookUrl}
+                  </a>
+                  <CopyButton
+                    textToCopy={webhookUrl}
+                    padding="p-1"
+                    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="hover:bg-vi</button>olets-are-blue 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 ? (
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 65e434dd..43d1c45c 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -4,6 +4,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      fontFamily: {
+        'roboto': ['Roboto', 'sans-serif'],
+      },
       spacing: {
         112: '28rem',
         128: '32rem',