diff --git a/src/ai/chat/components/ChatBot.tsx b/src/ai/chat/components/ChatBot.tsx
index 9ac8aac..6c71af6 100644
--- a/src/ai/chat/components/ChatBot.tsx
+++ b/src/ai/chat/components/ChatBot.tsx
@@ -70,7 +70,7 @@ export default function ChatBot() {
   };
 
   return (
-    <div className="mx-auto p-6 relative size-full h-screen rounded-lg bg-muted/50">
+    <div className="mx-auto p-6 relative size-full h-screen rounded-lg bg-muted">
       <div className="flex flex-col h-full">
         <Conversation className="h-full">
           <ConversationContent>
diff --git a/src/components/ai-elements/message.tsx b/src/components/ai-elements/message.tsx
index 8eaf6f8..dc56af7 100644
--- a/src/components/ai-elements/message.tsx
+++ b/src/components/ai-elements/message.tsx
@@ -34,12 +34,13 @@ export const MessageContent = ({
     className={cn(
       'flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',
       'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
-      'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
+      'group-[.is-assistant]:bg-card group-[.is-assistant]:text-card-foreground',
+      'is-user:dark',
       className
     )}
     {...props}
   >
-    <div className="is-user:dark">{children}</div>
+    {children}
   </div>
 );
 
@@ -54,10 +55,7 @@ export const MessageAvatar = ({
   className,
   ...props
 }: MessageAvatarProps) => (
-  <Avatar
-    className={cn('size-8 ring ring-1 ring-border', className)}
-    {...props}
-  >
+  <Avatar className={cn('size-8 ring-1 ring-border', className)} {...props}>
     <AvatarImage alt="" className="mt-0 mb-0" src={src} />
     <AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>
   </Avatar>
diff --git a/src/components/ai-elements/reasoning.tsx b/src/components/ai-elements/reasoning.tsx
index 2c6e6c7..021974f 100644
--- a/src/components/ai-elements/reasoning.tsx
+++ b/src/components/ai-elements/reasoning.tsx
@@ -38,13 +38,14 @@ export type ReasoningProps = ComponentProps<typeof Collapsible> & {
 };
 
 const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
 
 export const Reasoning = memo(
   ({
     className,
     isStreaming = false,
     open,
-    defaultOpen = false,
+    defaultOpen = true,
     onOpenChange,
     duration: durationProp,
     children,
@@ -70,23 +71,22 @@ export const Reasoning = memo(
           setStartTime(Date.now());
         }
       } else if (startTime !== null) {
-        setDuration(Math.round((Date.now() - startTime) / 1000));
+        setDuration(Math.round((Date.now() - startTime) / MS_IN_S));
         setStartTime(null);
       }
     }, [isStreaming, startTime, setDuration]);
 
     // Auto-open when streaming starts, auto-close when streaming ends (once only)
     useEffect(() => {
-      if (isStreaming && !isOpen) {
-        setIsOpen(true);
-      } else if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {
-        // Add a small delay before closing to allow user to see the content
-        const timer = setTimeout(() => {
-          setIsOpen(false);
-          setHasAutoClosedRef(true);
-        }, AUTO_CLOSE_DELAY);
-        return () => clearTimeout(timer);
-      }
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosedRef) {
+          // Add a small delay before closing to allow user to see the content
+          const timer = setTimeout(() => {
+            setIsOpen(false);
+            setHasAutoClosedRef(true);
+          }, AUTO_CLOSE_DELAY);
+
+          return () => clearTimeout(timer);
+        }
     }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);
 
     const handleOpenChange = (newOpen: boolean) => {
@@ -110,19 +110,10 @@ export const Reasoning = memo(
   }
 );
 
-export type ReasoningTriggerProps = ComponentProps<
-  typeof CollapsibleTrigger
-> & {
-  title?: string;
-};
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
 
 export const ReasoningTrigger = memo(
-  ({
-    className,
-    title = 'Reasoning',
-    children,
-    ...props
-  }: ReasoningTriggerProps) => {
+  ({ className, children, ...props }: ReasoningTriggerProps) => {
     const { isStreaming, isOpen, duration } = useReasoning();
 
     return (
diff --git a/src/components/ai-elements/sources.tsx b/src/components/ai-elements/sources.tsx
new file mode 100644
index 0000000..bd4caa0
--- /dev/null
+++ b/src/components/ai-elements/sources.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import { BookIcon, ChevronDownIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+
+export type SourcesProps = ComponentProps<'div'>;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible
+    className={cn('not-prose mb-4 text-primary text-xs', className)}
+    {...props}
+  />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger className={cn("flex items-center gap-2", className)} {...props}>
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({
+  className,
+  ...props
+}: SourcesContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      'mt-3 flex w-fit flex-col gap-2',
+      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      className
+    )}
+    {...props}
+  />
+);
+
+export type SourceProps = ComponentProps<'a'>;
+
+export const Source = ({ href, title, children, ...props }: SourceProps) => (
+  <a
+    className="flex items-center gap-2"
+    href={href}
+    rel="noreferrer"
+    target="_blank"
+    {...props}
+  >
+    {children ?? (
+      <>
+        <BookIcon className="h-4 w-4" />
+        <span className="block font-medium">{title}</span>
+      </>
+    )}
+  </a>
+);
diff --git a/src/components/ai-elements/tool.tsx b/src/components/ai-elements/tool.tsx
index c530727..5de574d 100644
--- a/src/components/ai-elements/tool.tsx
+++ b/src/components/ai-elements/tool.tsx
@@ -50,7 +50,7 @@ const getStatusBadge = (status: ToolUIPart['state']) => {
   } as const;
 
   return (
-    <Badge className="rounded-full text-xs" variant="secondary">
+    <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
       {icons[status]}
       {labels[status]}
     </Badge>
diff --git a/src/payment/provider/stripe.ts b/src/payment/provider/stripe.ts
index ba7ee40..4371d89 100644
--- a/src/payment/provider/stripe.ts
+++ b/src/payment/provider/stripe.ts
@@ -543,6 +543,9 @@ export class StripeProvider implements PaymentProvider {
       return;
     }
 
+    const periodStart = this.getPeriodStart(stripeSubscription);
+    const periodEnd = this.getPeriodEnd(stripeSubscription);
+
     // create fields
     const createFields: any = {
       id: randomUUID(),
@@ -555,12 +558,8 @@ export class StripeProvider implements PaymentProvider {
       status: this.mapSubscriptionStatusToPaymentStatus(
         stripeSubscription.status
       ),
-      periodStart: stripeSubscription.current_period_start
-        ? new Date(stripeSubscription.current_period_start * 1000)
-        : null,
-      periodEnd: stripeSubscription.current_period_end
-        ? new Date(stripeSubscription.current_period_end * 1000)
-        : null,
+      periodStart: periodStart,
+      periodEnd: periodEnd,
       cancelAtPeriodEnd: stripeSubscription.cancel_at_period_end,
       trialStart: stripeSubscription.trial_start
         ? new Date(stripeSubscription.trial_start * 1000)
@@ -620,12 +619,8 @@ export class StripeProvider implements PaymentProvider {
       .limit(1);
 
     // get new period start and end
-    const newPeriodStart = stripeSubscription.current_period_start
-      ? new Date(stripeSubscription.current_period_start * 1000)
-      : undefined;
-    const newPeriodEnd = stripeSubscription.current_period_end
-      ? new Date(stripeSubscription.current_period_end * 1000)
-      : undefined;
+    const newPeriodStart = this.getPeriodStart(stripeSubscription);
+    const newPeriodEnd = this.getPeriodEnd(stripeSubscription);
 
     // Check if this is a renewal (period has changed and subscription is active)
     const isRenewal =
@@ -978,4 +973,24 @@ export class StripeProvider implements PaymentProvider {
     // Default to auto to let Stripe detect the language
     return 'auto';
   }
+
+  private getPeriodStart(subscription: Stripe.Subscription): Date | undefined {
+    const s: any = subscription as any;
+    const startUnix =
+      s.current_period_start ??
+      s?.items?.data?.[0]?.current_period_start ??
+      undefined;
+    return typeof startUnix === 'number'
+      ? new Date(startUnix * 1000)
+      : undefined;
+  }
+
+  private getPeriodEnd(subscription: Stripe.Subscription): Date | undefined {
+    const s: any = subscription as any;
+    const endUnix =
+      s.current_period_end ??
+      s?.items?.data?.[0]?.current_period_end ??
+      undefined;
+    return typeof endUnix === 'number' ? new Date(endUnix * 1000) : undefined;
+  }
 }