diff --git a/src/assets/SvgIcons/IconExternalLink.tsx b/src/assets/SvgIcons/IconExternalLink.tsx
new file mode 100644
index 0000000..6dff1e8
--- /dev/null
+++ b/src/assets/SvgIcons/IconExternalLink.tsx
@@ -0,0 +1,20 @@
+import SvgIcon from "src/components/shared/SvgIcon";
+
+const IconExternalLink = (props: any) => {
+  const size = props?.size || 16;
+  return (
+    <SvgIcon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        width={size}
+        height={size}
+      >
+        {/* <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> */}
+        <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconExternalLink;
diff --git a/src/components/shared/Buttons/Button.tsx b/src/components/shared/Buttons/Button.tsx
index 64a84e3..ce8138c 100644
--- a/src/components/shared/Buttons/Button.tsx
+++ b/src/components/shared/Buttons/Button.tsx
@@ -37,7 +37,7 @@ const Button = ({
       <div
         className={clsx(
           "pos-relative w-100 h-100",
-          hideOverflow && "btn-hide-overflow"
+          hideOverflow && "btn-hide-overflow",
         )}
       >
         {rest.children}
@@ -45,7 +45,8 @@ const Button = ({
           <div
             className={clsx(
               "btn-icon right-icon",
-              showIconOnHover && "icon-hover"
+              "flex items-center justify-center",
+              showIconOnHover && "icon-hover",
             )}
           >
             <RightIconComponent />
diff --git a/src/components/shared/Layout/AppLayout.tsx b/src/components/shared/Layout/AppLayout.tsx
index 4449d59..a5e427c 100644
--- a/src/components/shared/Layout/AppLayout.tsx
+++ b/src/components/shared/Layout/AppLayout.tsx
@@ -6,6 +6,7 @@ import Header from "src/widgets/copilot/components/Header";
 import { addInlineStyle } from "src/addStyles";
 import style from "./appLayout.scss?inline";
 import SideNavbar from "./SideNavbar";
+import SecondaryDrawer from "./SecondaryDrawer";
 
 addInlineStyle(style);
 
@@ -21,7 +22,7 @@ const CHAT_WINDOW_WIDTH = 760;
 const generateParentContainerClass = (
   isInline: boolean,
   isFullScreen: boolean,
-  isFocusMode: boolean
+  isFocusMode: boolean,
 ) => {
   if (!isInline) {
     if (isFocusMode) return "gooey-focused-popup";
@@ -67,8 +68,8 @@ const AppLayout = ({ children }: Props) => {
         generateParentContainerClass(
           layoutController!.isInline,
           config?.mode === "fullscreen",
-          layoutController!.isFocusMode
-        )
+          layoutController!.isFocusMode,
+        ),
       )}
     >
       <div className="d-flex h-100 pos-relative">
@@ -85,6 +86,7 @@ const AppLayout = ({ children }: Props) => {
             <>{children}</>
           </div>
         </main>
+        <SecondaryDrawer />
       </div>
     </div>
   );
diff --git a/src/components/shared/Layout/SecondaryDrawer.tsx b/src/components/shared/Layout/SecondaryDrawer.tsx
new file mode 100644
index 0000000..d5d3613
--- /dev/null
+++ b/src/components/shared/Layout/SecondaryDrawer.tsx
@@ -0,0 +1,144 @@
+import { useSystemContext } from "src/contexts/hooks";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+const MIN_DRAWER_WIDTH = 300;
+const MAX_DRAWER_WIDTH = 800;
+const RESIZE_HANDLE_WIDTH = 5;
+
+const SecondaryDrawer = () => {
+  const { layoutController } = useSystemContext();
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [drawerWidth, setDrawerWidth] = useState(window.innerWidth * 0.65);
+
+  useEffect(() => {
+    const sideBarElement = drawerRef.current;
+
+    if (!sideBarElement || !layoutController?.isSecondaryDrawerOpen) return;
+
+    if (layoutController?.isMobile) {
+      sideBarElement.style.width = "100%";
+      sideBarElement.style.position = "absolute !important";
+    } else {
+      if (layoutController?.isSecondaryDrawerOpen) {
+        sideBarElement.style.width = `${drawerWidth}px`;
+        sideBarElement.style.position = "relative !important";
+      }
+    }
+  }, [
+    layoutController?.isMobile,
+    layoutController?.isSecondaryDrawerOpen,
+    drawerWidth,
+  ]);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (layoutController?.isMobile) return;
+    setIsResizing(true);
+    e.preventDefault();
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const container = drawerRef.current?.parentElement;
+      if (!container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const newWidth = containerRect.right - e.clientX;
+
+      const constrainedWidth = Math.min(
+        Math.max(newWidth, MIN_DRAWER_WIDTH),
+        Math.max(MAX_DRAWER_WIDTH, containerRect.width * 0.8),
+      );
+
+      setDrawerWidth(constrainedWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    if (isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "ew-resize";
+    } else {
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+  }, [isResizing]);
+
+  return (
+    <div
+      ref={drawerRef}
+      id="gooey-right-bar"
+      style={{
+        zIndex: 10,
+        transition: isResizing ? "none" : "width 0.2s ease",
+        position: layoutController?.isMobile ? "absolute" : "relative",
+      }}
+      className={clsx(
+        "h-100 top-0 overflow-x-hidden right-0 bg-grey d-flex flex-col",
+      )}
+    >
+      {/* Content Container */}
+      <div className="h-100 w-100 flex-1 d-flex flex-col">
+        {layoutController?.secondaryDrawerContent?.()}
+      </div>
+
+      {/* Resize System */}
+      {!layoutController?.isMobile && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: -RESIZE_HANDLE_WIDTH / 2,
+            width: `${RESIZE_HANDLE_WIDTH}px`,
+            height: "100%",
+            cursor: "ew-resize",
+            zIndex: 20,
+          }}
+          className={clsx(isResizing && "bg-light")}
+          onMouseDown={handleMouseDown}
+        >
+          <div
+            style={{
+              position: "absolute",
+              left: RESIZE_HANDLE_WIDTH / 2,
+              width: "5px",
+              height: "100%",
+            }}
+            className="bg-white b-lt-1 b-rt-1 drawer-resize-bar"
+          />
+        </div>
+      )}
+
+      {/* Full-screen overlay during resize */}
+      {isResizing && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 19,
+            cursor: "ew-resize",
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default SecondaryDrawer;
\ No newline at end of file
diff --git a/src/components/shared/Layout/SideNavbar.tsx b/src/components/shared/Layout/SideNavbar.tsx
index 93120ea..3f55168 100644
--- a/src/components/shared/Layout/SideNavbar.tsx
+++ b/src/components/shared/Layout/SideNavbar.tsx
@@ -113,7 +113,7 @@ const SideNavbar = () => {
       }}
       className={clsx(
         "b-rt-1 h-100 overflow-x-hidden top-0 left-0 bg-grey d-flex flex-col",
-        layoutController?.isMobile ? "pos-absolute" : "pos-relative"
+        layoutController?.isMobile ? "pos-absolute" : "pos-relative",
       )}
     >
       <div
@@ -176,13 +176,15 @@ const SideNavbar = () => {
           <div className="gp-8">
             <GooeyTooltip text="New Chat" direction="right" disabled={isEmpty}>
               <Button
-                className="w-100 pos-relative text-muted"
+                className="w-100 pos-relative text-dark"
                 disabled={isEmpty}
-                onClick={handleNewConversation}
+                onClick={() => {
+                  handleNewConversation();
+                  if (layoutController?.isSecondaryDrawerOpen)
+                    layoutController?.toggleSecondaryDrawer(null);
+                }}
                 hideOverflow
-                RightIconComponent={() => (
-                  <IconPencilEdit size={18} className="text-muted" />
-                )}
+                RightIconComponent={() => <IconPencilEdit size={18} />}
               >
                 <div className="d-flex align-center">
                   <div
@@ -205,7 +207,10 @@ const SideNavbar = () => {
                     />
                   </div>
                   <p
-                    className="font_16_600 text-left text-almostBlack"
+                    className={clsx(
+                      "font_16_600 text-left",
+                      isEmpty ? "text-muted" : "text-almostBlack",
+                    )}
                     style={{
                       maxWidth: "70%",
                       overflow: "hidden",
@@ -213,7 +218,7 @@ const SideNavbar = () => {
                       whiteSpace: "nowrap",
                     }}
                   >
-                    {branding?.name}
+                    New Chat
                   </p>
                 </div>
               </Button>
@@ -242,7 +247,7 @@ const SideNavbar = () => {
                       .sort(
                         (a: Conversation, b: Conversation) =>
                           new Date(b.timestamp as string).getTime() -
-                          new Date(a.timestamp as string).getTime()
+                          new Date(a.timestamp as string).getTime(),
                       )
                       .map((conversation: Conversation) => {
                         return (
@@ -256,6 +261,8 @@ const SideNavbar = () => {
                                 setActiveConversation(conversation);
                                 if (layoutController?.isMobile)
                                   layoutController?.toggleSidebar();
+                                if (layoutController?.isSecondaryDrawerOpen)
+                                  layoutController?.toggleSecondaryDrawer(null);
                               }}
                             />
                           </li>
diff --git a/src/components/shared/Link.tsx b/src/components/shared/Link.tsx
index d295277..15e181b 100644
--- a/src/components/shared/Link.tsx
+++ b/src/components/shared/Link.tsx
@@ -1,6 +1,24 @@
+import { useSystemContext } from "src/contexts/hooks";
+import { FullSourcePreview } from "src/widgets/copilot/components/Messages/Sources";
+
 const Link = (props: any) => {
+  const { layoutController } = useSystemContext();
+
+  const handleClick = () => {
+    layoutController?.toggleSecondaryDrawer?.(() => (
+      <FullSourcePreview
+        data={props?.data}
+        layoutController={layoutController}
+      />
+    ));
+  };
+
   return (
-    <a href={props?.to} target="_blank" style={{ color: props.configColor }}>
+    <a
+      onClick={() => handleClick()}
+      style={{ color: props.configColor }}
+      className="gooey-link cr-pointer"
+    >
       {props.children}
     </a>
   );
diff --git a/src/contexts/SystemContext.tsx b/src/contexts/SystemContext.tsx
index 9c2530c..3ac8248 100644
--- a/src/contexts/SystemContext.tsx
+++ b/src/contexts/SystemContext.tsx
@@ -3,17 +3,33 @@ import { CopilotConfigType } from "./types";
 import useDeviceWidth from "src/hooks/useDeviceWidth";
 
 // eslint-disable-next-line react-refresh/only-export-components
-const toggleSidebarStyles = (isSidebarOpen: boolean) => {
-  const sideBarElement: HTMLElement | null | undefined =
-    gooeyShadowRoot?.querySelector("#gooey-side-navbar");
-  if (!sideBarElement) return;
-  // set width to 0px if sidebar is closed
-  if (!isSidebarOpen) {
-    sideBarElement.style.width = "260px";
-    sideBarElement.style.transition = "width ease-in-out 0.2s";
+const toggleSidebarStyles = (
+  isSidebarOpen: boolean,
+  sidebarName: "left" | "right" = "left",
+  isMobile: boolean = false,
+) => {
+  if (sidebarName === "right") {
+    const sideBarElement: HTMLElement | null | undefined =
+      gooeyShadowRoot?.querySelector("#gooey-right-bar");
+    if (!sideBarElement) return;
+    // set width to 0px if sidebar is closed
+    if (!isSidebarOpen) {
+      sideBarElement.style.width = isMobile ? "100%" : "65vw";
+    } else {
+      sideBarElement.style.width = "0px";
+    }
   } else {
-    sideBarElement.style.width = "0px";
-    sideBarElement.style.transition = "width ease-in-out 0.2s";
+    const sideBarElement: HTMLElement | null | undefined =
+      gooeyShadowRoot?.querySelector("#gooey-side-navbar");
+    if (!sideBarElement) return;
+    // set width to 0px if sidebar is closed
+    if (!isSidebarOpen) {
+      sideBarElement.style.width = "260px";
+      sideBarElement.style.transition = "width ease-in-out 0.2s";
+    } else {
+      sideBarElement.style.width = "0px";
+      sideBarElement.style.transition = "width ease-in-out 0.2s";
+    }
   }
 };
 
@@ -21,6 +37,7 @@ interface LayoutController extends LayoutStateType {
   toggleOpenClose: () => void;
   toggleSidebar: () => void;
   toggleFocusMode: () => void;
+  toggleSecondaryDrawer: (data: Record<string, any> | null) => void;
   setState: (state: any) => void;
 }
 
@@ -31,6 +48,8 @@ type LayoutStateType = {
   isMobile: boolean;
 
   isSidebarOpen: boolean;
+  isSecondaryDrawerOpen: boolean;
+  secondaryDrawerContent: () => ReactNode | null;
   showCloseButton: boolean;
   showSidebarButton: boolean;
   showFocusModeButton: boolean;
@@ -68,6 +87,8 @@ const SystemContextProvider = ({
         ? true
         : config?.enableConversations,
     isMobile: false,
+    isSecondaryDrawerOpen: false,
+    secondaryDrawerContent: () => null,
   });
   const forceHideSidebar = !layoutState?.showNewConversationButton;
   const [isMobile, isMobileWindow] = useDeviceWidth("mobile", [
@@ -135,6 +156,31 @@ const SystemContextProvider = ({
           }
         });
       },
+      toggleSecondaryDrawer: (data = null) => {
+        setLayoutState((prev: any) => {
+          const triggerSidebar =
+            data && prev.isSidebarOpen && !prev.isSecondaryDrawerOpen;
+          if (triggerSidebar) toggleSidebarStyles(prev.isSidebarOpen);
+          if ((data && !prev.isSecondaryDrawerOpen) || !data)
+            // open / close secondary drawer
+            toggleSidebarStyles(
+              prev.isSecondaryDrawerOpen,
+              "right",
+              prev.isMobile,
+            );
+          return {
+            ...prev,
+            isSecondaryDrawerOpen: data ? true : false,
+            secondaryDrawerContent: data,
+            isSidebarOpen: triggerSidebar
+              ? !prev.isSidebarOpen
+              : prev.isSidebarOpen,
+            showSidebarButton: triggerSidebar
+              ? prev.isSidebarOpen
+              : prev.showSidebarButton,
+          };
+        });
+      },
       setState: (state: any) => {
         setLayoutState((prev) => ({
           ...prev,
@@ -143,7 +189,7 @@ const SystemContextProvider = ({
       },
       ...layoutState,
     }),
-    [setLayoutState, forceHideSidebar, layoutState]
+    [setLayoutState, forceHideSidebar, layoutState],
   );
 
   useEffect(() => {
diff --git a/src/css/App.css b/src/css/App.css
index aa7004f..a79da12 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -56,6 +56,20 @@ ul {
   text-decoration-thickness: 2px;
 }
 
+.gooey-embed-container .gooey-link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: rgba(0, 0, 0, 0.45);
+  text-decoration-thickness: 0.6px;
+  text-underline-offset: 0.15em;
+}
+
+.gooey-embed-container .gooey-link:hover {
+  color: inherit;
+  text-decoration-color: black;
+  text-decoration-thickness: 2px;
+}
+
 div:focus-visible {
   outline: none;
 }
diff --git a/src/css/_extra.scss b/src/css/_extra.scss
index 1cbd303..e23f8f3 100644
--- a/src/css/_extra.scss
+++ b/src/css/_extra.scss
@@ -119,6 +119,9 @@
 .b-rt-1 {
   border-right: 1px solid $border-color;
 }
+.b-lt-1 {
+  border-left: 1px solid $border-color;
+}
 .b-none {
   border: none !important;
 }
@@ -171,6 +174,9 @@
 .left-0 {
   left: 0;
 }
+.right-0 {
+  right: 0;
+}
 .h-header {
   height: 56px;
 }
diff --git a/src/widgets/copilot/components/Header/index.tsx b/src/widgets/copilot/components/Header/index.tsx
index 66bab21..17bc627 100644
--- a/src/widgets/copilot/components/Header/index.tsx
+++ b/src/widgets/copilot/components/Header/index.tsx
@@ -18,7 +18,7 @@ const Header = ({ onEditClick }: HeaderProps) => {
   const { messages }: any = useMessagesContext();
   const { layoutController, config }: SystemContextType = useSystemContext();
   const isEmpty = !messages?.size;
-  const botName = config?.branding?.name;
+  const branding = config?.branding;
   return (
     <div className="bg-white b-btm-1 gp-8 d-flex justify-between align-center pos-sticky w-100 h-header">
       <div className="d-flex align-center">
@@ -71,17 +71,33 @@ const Header = ({ onEditClick }: HeaderProps) => {
           </GooeyTooltip>
         )}
       </div>
-      <p
-        className="font_16_700"
+      <div
+        className="d-flex align-center"
         style={{
           position: "absolute",
           left: "50%",
           top: "50%",
           transform: "translate(-50%, -50%)",
+          marginLeft: "-24px",
         }}
       >
-        {botName}
-      </p>
+        <div
+          className="bot-avatar bg-primary gmr-8"
+          style={{ width: "24px", height: "24px", borderRadius: "100%" }}
+        >
+          <img
+            src={branding?.photoUrl}
+            alt="bot-avatar"
+            style={{
+              width: "24px",
+              height: "24px",
+              borderRadius: "100%",
+              objectFit: "cover",
+            }}
+          />
+        </div>
+        <p className="font_16_700">{branding?.name}</p>
+      </div>
       <div>
         {layoutController?.showNewConversationButton && (
           <GooeyTooltip text="New Chat" direction="left" disabled={isEmpty}>
diff --git a/src/widgets/copilot/components/Loader/index.tsx b/src/widgets/copilot/components/Loader/index.tsx
index ecfca18..99e6a14 100644
--- a/src/widgets/copilot/components/Loader/index.tsx
+++ b/src/widgets/copilot/components/Loader/index.tsx
@@ -17,8 +17,9 @@ const ResponseLoader = (props: any) => {
   if (!props.show) return null;
   return (
     <div ref={LoaderRef} className="gpl-16">
-      <BotMessageLayout />
-      <CircleBeat className="anim-blink gml-36 gmt-4" size={12} />
+      <BotMessageLayout>
+        <CircleBeat className="anim-blink gml-4" size={12} />
+      </BotMessageLayout>
     </div>
   );
 };
diff --git a/src/widgets/copilot/components/Messages/IncomingMsg.tsx b/src/widgets/copilot/components/Messages/IncomingMsg.tsx
index 079cc07..2ad317f 100644
--- a/src/widgets/copilot/components/Messages/IncomingMsg.tsx
+++ b/src/widgets/copilot/components/Messages/IncomingMsg.tsx
@@ -10,10 +10,10 @@ import Button from "src/components/shared/Buttons/Button";
 import { memo } from "react";
 addInlineStyle(style);
 
-export const BotMessageLayout = () => {
+export const BotMessageLayout = (props: Record<string, any>) => {
   const branding = useSystemContext().config?.branding;
   return (
-    <div className="d-flex align-center">
+    <div className="d-flex align-start">
       {branding?.photoUrl && (
         <div
           className="bot-avatar bg-primary gmr-12"
@@ -31,7 +31,7 @@ export const BotMessageLayout = () => {
           />
         </div>
       )}
-      <p className="font_16_600">{branding?.name}</p>
+      <div className="gmt-2">{props.children}</div>
     </div>
   );
 };
@@ -54,7 +54,7 @@ const FeedbackButtons = ({ data, onFeedbackClick }: any) => {
             >
               {getFeedbackButtonIcon(button.id, button.isPressed)}
             </Button>
-          )
+          ),
       )}
     </div>
   );
@@ -77,31 +77,43 @@ const IncomingMsg = memo(
     const parsedElements = formatTextResponse(
       props.data,
       props?.linkColor,
-      props?.showSources
+      props?.showSources,
     );
 
     if (!parsedElements) return <ResponseLoader show={true} />;
     return (
       <div className="gooey-incomingMsg gpb-12">
         <div className="gpl-16">
-          <BotMessageLayout />
-          <div
-            className={clsx(
-              "gml-36 gmt-4 font_16_400 pos-relative gooey-output-text markdown text-reveal-container",
-              isStreaming && "response-streaming"
-            )}
-            id={props?.id}
-          >
-            {parsedElements}
-          </div>
+          <BotMessageLayout>
+            <div
+              className={clsx(
+                "font_16_400 pos-relative gooey-output-text markdown text-reveal-container",
+                isStreaming && "response-streaming",
+              )}
+              id={props?.id}
+            >
+              {parsedElements}
+            </div>
+          </BotMessageLayout>
           {!isStreaming && !videoTrack && audioTrack && (
-            <div className="gmt-16 gml-36">
-              <audio autoPlay={isAutoPlay} playsInline={true} controls src={audioTrack}></audio>
+            <div className="gmt-8 gml-36">
+              <audio
+                autoPlay={isAutoPlay}
+                playsInline={true}
+                controls
+                src={audioTrack}
+              ></audio>
             </div>
           )}
           {!isStreaming && videoTrack && (
             <div className="gmt-16 gml-36">
-              <video autoPlay={isAutoPlay} playsInline={true} controls src={videoTrack} style={{ backgroundColor: '#000'}}></video>
+              <video
+                autoPlay={isAutoPlay}
+                playsInline={true}
+                controls
+                src={videoTrack}
+                style={{ backgroundColor: "#000" }}
+              ></video>
             </div>
           )}
           {!isStreaming && props?.data?.buttons && (
@@ -113,7 +125,7 @@ const IncomingMsg = memo(
         </div>
       </div>
     );
-  }
+  },
 );
 
 export default IncomingMsg;
diff --git a/src/widgets/copilot/components/Messages/OutgoingMsg.tsx b/src/widgets/copilot/components/Messages/OutgoingMsg.tsx
index 71ed882..fd75190 100644
--- a/src/widgets/copilot/components/Messages/OutgoingMsg.tsx
+++ b/src/widgets/copilot/components/Messages/OutgoingMsg.tsx
@@ -1,7 +1,6 @@
 import { addInlineStyle } from "src/addStyles";
 import style from "./outgoing.scss?inline";
 import { memo } from "react";
-import IconUserCircle from "src/assets/SvgIcons/IconUserCircle";
 import clsx from "clsx";
 addInlineStyle(style);
 
@@ -9,10 +8,6 @@ const OutgoingMsg = memo((props: any) => {
   const { input_prompt = "", input_audio = "", input_images = [] } = props.data;
   return (
     <div className="gooey-outgoingMsg gmb-12 gpl-16">
-      <div className="d-flex align-center gmb-8">
-        <IconUserCircle size={24} />
-        <p className="font_16_600 gml-12">You</p>
-      </div>
       {input_images.length > 0 &&
         input_images.map((url: string) => (
           <a href={url} target="_blank">
@@ -21,7 +16,7 @@ const OutgoingMsg = memo((props: any) => {
               alt={url}
               className={clsx(
                 "outgoingMsg-image b-1 br-large",
-                input_prompt && "gmb-4"
+                input_prompt && "gmb-4",
               )}
             />
           </a>
diff --git a/src/widgets/copilot/components/Messages/Sources.tsx b/src/widgets/copilot/components/Messages/Sources.tsx
index cc35be0..44dd0f2 100644
--- a/src/widgets/copilot/components/Messages/Sources.tsx
+++ b/src/widgets/copilot/components/Messages/Sources.tsx
@@ -1,57 +1,162 @@
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   extractFileDetails,
   extractMainDomain,
   fetchUrlMeta,
   findSourceIcon,
+  getEmbedUrl,
   truncateMiddle,
 } from "./helpers";
 import { useSystemContext } from "src/contexts/hooks";
+import IconButton from "src/components/shared/Buttons/IconButton";
+import IconExternalLink from "src/assets/SvgIcons/IconExternalLink";
+import IconClose from "src/assets/SvgIcons/IconClose";
 
-const SourcesCard = (props: any) => {
-  const { data, index, onClick } = props;
-  const { getTempStoreValue, setTempStoreValue }: any = useSystemContext();
+export const FullSourcePreview = (props: any) => {
+  const { data, layoutController, metaData } = props;
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // fade loader for src reset
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 0);
+  }, [data.url]);
+
+  const embedUrl = getEmbedUrl(data.url);
+  if (!data || !data?.url) return null;
+  const ExtensionIcon: any = findSourceIcon(
+    metaData?.content_type,
+    metaData?.redirect_urls[0] || data?.url,
+    24,
+  );
+
+  if (isLoading) return null;
+  return (
+    <div className="flex-1 d-flex flex-col">
+      <div
+        className="b-lt-1 b-rt-1 b-btm-1 gp-10 w-100 d-flex justify-between align-center bg-white"
+        style={{ height: "56px" }}
+      >
+        <div className="d-flex align-center" style={{ maxWidth: "90%" }}>
+          {ExtensionIcon || !metaData?.logo ? (
+            <ExtensionIcon />
+          ) : (
+            <img
+              src={metaData?.logo}
+              alt={data?.title}
+              style={{
+                width: "24px",
+                height: "24px",
+                borderRadius: "100px",
+                objectFit: "contain",
+              }}
+            />
+          )}
+          <p
+            className="font_16_500 m-0 flex-1 gml-8"
+            style={{
+              maxWidth: "85%",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {data?.title}
+          </p>
+          <IconButton
+            onClick={() => window.open(data?.url, "_ablank")}
+            variant="text-alt"
+            className="gml-4"
+          >
+            <IconExternalLink size={14} />
+          </IconButton>
+        </div>
+        <IconButton
+          onClick={() => layoutController?.toggleSecondaryDrawer(null)}
+          variant="text-alt"
+          className="gp-6"
+        >
+          <IconClose size={20} />
+        </IconButton>
+      </div>
+      <iframe
+        src={embedUrl}
+        className="flex-1"
+        style={{ height: "100%", width: "100%", border: 0 }}
+      />
+    </div>
+  );
+};
+
+interface Data {
+  url: string;
+  title: string;
+  refNumber?: string;
+}
+
+const SourcesCard = (props: { data: Data; index: number }) => {
+  const { data } = props;
+  const { getTempStoreValue, setTempStoreValue, layoutController } =
+    useSystemContext();
   const [metaData, setMetaData] = useState<any>(
-    getTempStoreValue(data.url) || null
+    getTempStoreValue?.(data.url) || null,
   );
   const { mainString } = extractFileDetails(data?.title);
   const [title, pageNum] = (mainString || "").split(",");
 
   useEffect(() => {
-    if (!data || metaData || getTempStoreValue[data.url]) return;
+    if (!data || metaData || getTempStoreValue?.(data.url)) return;
     try {
       fetchUrlMeta(data.url).then((meta) => {
         if (Object.keys(meta).length) {
+          if (meta?.title === "- YouTube") {
+            meta.title = data.title;
+          }
           setMetaData(meta);
-          setTempStoreValue(data.url, meta);
+          setTempStoreValue?.(data.url, meta);
         }
       });
     } catch (e) {
       console.error(e);
     }
-  }, [data, getTempStoreValue, metaData, setTempStoreValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const redirectedUrl =
     metaData?.redirect_urls[metaData?.redirect_urls.length - 1] || data?.url;
   const [domainName]: any = extractMainDomain(redirectedUrl || data?.url);
   const ExtensionIcon: any = findSourceIcon(
     metaData?.content_type,
-    metaData?.redirect_urls[0] || data?.url
+    metaData?.redirect_urls[0] || data?.url,
   );
   const domainNameText = domainName.includes("googleapis")
     ? ""
     : domainName + (data?.refNumber || pageNum ? "⋅" : "");
+
+  const openInWindow = () => window.open(data?.url, "_blank");
+  const openInSidebar = useCallback(() => {
+    layoutController?.toggleSecondaryDrawer?.(() => (
+      <FullSourcePreview
+        data={data}
+        layoutController={layoutController}
+        metaData={metaData}
+      />
+    ));
+  }, [data, layoutController, metaData]);
+
+  const isCsv = metaData?.content_type?.includes("csv");
+  const onClick = isCsv ? openInWindow : openInSidebar;
+
   if (!data) return null;
   return (
     <button
-      onClick={onClick}
+      onClick={onClick.bind(null)}
       className={clsx(
-        "pos-relative sources-card gp-0 gm-0 text-left overflow-hidden",
-        // index === 0 && "gml-48",
-        index !== data.length - 1 && "gmr-12"
+        "pos-relative sources-card gp-0 gm-0 text-left overflow-hidden gmr-8",
       )}
-      style={{ height: "64px" }}
     >
       {metaData?.image && (
         <div
@@ -83,7 +188,7 @@ const SourcesCard = (props: any) => {
         <div
           className={clsx(
             "d-flex align-center font_10_600",
-            metaData?.image ? "text-white" : "text-muted"
+            metaData?.image ? "text-white" : "text-muted",
           )}
         >
           {ExtensionIcon || !metaData?.logo ? (
@@ -103,7 +208,7 @@ const SourcesCard = (props: any) => {
           <p
             className={clsx(
               "font_10_500 gml-4",
-              metaData?.image ? "text-white" : "text-muted"
+              metaData?.image ? "text-white" : "text-muted",
             )}
             style={{ margin: 0 }}
           >
@@ -120,21 +225,15 @@ const SourcesCard = (props: any) => {
 };
 
 const Sources = ({ data }: any) => {
-  const openInWindow = (url: string) => window.open(url, "_blank");
   if (!data || !data.length) return null;
   return (
-    <div className="gmb-4 text-reveal-container">
-      {/* <div className="d-flex align-center">
-        <IconListTimeline size={20} />
-        <p className="font_16_600">Sources</p>
-      </div> */}
-      <div className="gmt-8 sources-listContainer">
+    <div className="text-reveal-container">
+      <div className="gmt-16 sources-listContainer">
         {data.map((source: any, index: number) => (
           <SourcesCard
             key={source?.title + index}
             data={source}
             index={index}
-            onClick={openInWindow.bind(null, source?.url)}
           />
         ))}
       </div>
diff --git a/src/widgets/copilot/components/Messages/helpers.tsx b/src/widgets/copilot/components/Messages/helpers.tsx
index 23b33ef..bf2ae30 100644
--- a/src/widgets/copilot/components/Messages/helpers.tsx
+++ b/src/widgets/copilot/components/Messages/helpers.tsx
@@ -23,27 +23,34 @@ const NUMBER_REFERENCE_REGEX = /\[\d+(,\s*\d+)*\]/g;
 
 export const findSourceIcon = (
   contentType: string,
-  url: string
+  url: string,
+  size: number = 12,
 ): JSX.ElementType | null => {
   const urlLower = url.toLowerCase();
   // try to guess from url first
   if (urlLower.includes("youtube.com") || urlLower.includes("youtu.be")) {
-    return () => <IconYoutube />;
+    return () => <IconYoutube size={size} />;
   }
   if (urlLower.endsWith(".pdf")) {
-    return () => <IconPDF style={{ fill: "#F40F02" }} size={12} />;
+    return () => <IconPDF style={{ fill: "#F40F02" }} size={size || 12} />;
   } else if (
     urlLower.endsWith(".xls") ||
     urlLower.endsWith(".xlsx") ||
-    urlLower.includes("sheets.google")
+    (urlLower.includes("docs.google") && urlLower.includes("spreadsheets"))
   ) {
-    return () => <IconSheets />;
-  } else if (urlLower.endsWith(".docx") || urlLower.includes("docs.google")) {
-    return () => <IconGoogleDocs />;
-  } else if (urlLower.endsWith(".pptx") || urlLower.includes("/presentation")) {
-    return () => <IconGoogleSlides />;
+    return () => <IconSheets size={size} />;
+  } else if (
+    urlLower.endsWith(".docx") ||
+    (urlLower.includes("docs.google") && urlLower.includes("document"))
+  ) {
+    return () => <IconGoogleDocs size={size} />;
+  } else if (
+    urlLower.endsWith(".pptx") ||
+    (urlLower.includes("docs.google") && urlLower.includes("presentation"))
+  ) {
+    return () => <IconGoogleSlides size={size} />;
   } else if (urlLower.endsWith(".txt")) {
-    return () => <IconGoogleDocs />;
+    return () => <IconGoogleDocs size={size} />;
   } else if (urlLower.endsWith(".html")) {
     return null;
   }
@@ -119,7 +126,7 @@ export function extractMainDomain(url: string) {
 export const fetchUrlMeta = async (url: string): Promise<any> => {
   try {
     const response: any = await axios.get(
-      `${GOOEY_META_SCRAPPER_API}/fetchUrlMeta?url=${url}`
+      `${GOOEY_META_SCRAPPER_API}/fetchUrlMeta?url=${url}`,
     );
     return response?.data;
   } catch (err) {
@@ -198,20 +205,10 @@ const customizedLinks = (reactNode: any, domNode: any, data: any) => {
       url: href,
     };
   }
-
-  // hide source if mailto;
-  const hideSource = href.startsWith("mailto:");
   return (
-    <React.Fragment>
-      <Link to={href} configColor={data?.linkColor || "default"}>
-        {domToReact(domNode.children, getReactParserOptions(data))}
-      </Link>{" "}
-      {!hideSource && (
-        <CollapsibleButton>
-          <Sources data={[source]} />
-        </CollapsibleButton>
-      )}
-    </React.Fragment>
+    <Link data={source} configColor={data?.linkColor || "default"}>
+      {domToReact(domNode.children, getReactParserOptions(data))}
+    </Link>
   );
 };
 
@@ -224,9 +221,9 @@ const customizedReferences = (reactNode: any, domNode: any, data: any) => {
   const matches: any = Array.from(
     new Set(
       (text.match(NUMBER_REFERENCE_REGEX) || []).map((match: string) =>
-        parseInt(match.slice(1, -1), 10)
-      )
-    )
+        parseInt(match.slice(1, -1), 10),
+      ),
+    ),
   );
 
   // return the text as it is if no match found
@@ -235,7 +232,7 @@ const customizedReferences = (reactNode: any, domNode: any, data: any) => {
   const { references = [] }: any = data;
   const sources = [...references].splice(
     matches[0] - 1,
-    matches[matches.length - 1]
+    matches[matches.length - 1],
   );
 
   text = text.replaceAll(NUMBER_REFERENCE_REGEX, "");
@@ -257,7 +254,7 @@ const customizedReferences = (reactNode: any, domNode: any, data: any) => {
 export const formatTextResponse = (
   data: any,
   linkColor: string,
-  showSources: boolean
+  showSources: boolean,
 ) => {
   const body = getOutputText(data);
   if (!body) return "";
@@ -274,7 +271,7 @@ export const formatTextResponse = (
   });
   const parsedElements = parse(
     rawHtml as string,
-    getReactParserOptions({ ...data, showSources, linkColor })
+    getReactParserOptions({ ...data, showSources, linkColor }),
   );
   return parsedElements;
 };
@@ -316,64 +313,22 @@ export function truncateMiddle(str: string, charLimit: number) {
   return str.slice(0, frontChars) + ellipsis + str.slice(-backChars);
 }
 
-// function detectNumberReference(str: string) {
-//   /// Define the regex pattern to match [2], [1,2,4], or [1, 2]
-//   const regex = /\[\d+(,\s*\d+)*\]/g;
-
-//   // Use the regex to find matches
-//   const matches = str.match(regex);
-
-//   // If no matches found, return an empty array
-//   if (!matches) {
-//     return [];
-//   }
-
-//   // Extract numbers from each match
-//   const numbers = matches.map((match) => {
-//     // Remove the square brackets and split by comma
-//     return match
-//       .slice(1, -1)
-//       .split(",")
-//       .map((num) => parseInt(num.trim(), 10));
-//   });
-
-//   // Flatten the array of arrays into a single array
-//   return numbers.flat().sort();
-// }
-
-// export const sanitizeReferences = (data: any) => {
-//   // remove items from references which are not in output_text
-//   const { output_text = [], references = [] } = data;
-//   const outputText = output_text[0] || "";
-//   const numberReferences = detectNumberReference(outputText);
-//   const urlPattern = /\b(?:https?|ftp):\/\/[^\s/$.?#].[^\s]*\b/g;
-//   const urlsInResponse = [...new Set(outputText.match(urlPattern))];
-//   if (numberReferences.length === 0 && urlsInResponse.length === 0) return [];
-//   const indices = numberReferences.map((num) => num - 1);
-
-//   // check ref numbers and remove the ones which are not in output_text by index
-//   let rejectedReferences: any = [];
-//   const newSources = references
-//     .map((_: any, index: number) => {
-//       if (indices.includes(index))
-//         return {
-//           ..._,
-//           refNumber: numberReferences[index - rejectedReferences.length],
-//         };
-//       else {
-//         rejectedReferences.push(_);
-//         return undefined;
-//       }
-//     })
-//     .filter((source: any) => source !== undefined);
-
-//   // removed all the un-indexed references
-//   if (!urlsInResponse.length) return newSources;
+export const getEmbedUrl = (url: string) => {
+  try {
+    // Check if it's a YouTube URL
+    const youtubeRegex =
+      /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+    const match = url.match(youtubeRegex);
+
+    if (match && match[1]) {
+      // Return the embedded YouTube URL format
+      return `https://www.youtube.com/embed/${match[1]}`;
+    }
 
-//   // check urls in response and add them to sources
-//   rejectedReferences = rejectedReferences.filter(({ url }: any) => {
-//     if (url.endsWith("/")) url = url.slice(0, -1);
-//     return urlsInResponse.indexOf(url) !== -1;
-//   });
-//   return [...newSources, ...rejectedReferences];
-// };
+    // Return original URL if not YouTube
+    return url;
+  } catch (error) {
+    console.error("Error processing URL:", error);
+    return url;
+  }
+};