diff --git a/ee/tabby-ui/app/page/components/doc-select.tsx b/ee/tabby-ui/app/page/components/doc-select.tsx
new file mode 100644
index 000000000000..d4c26ee6129f
--- /dev/null
+++ b/ee/tabby-ui/app/page/components/doc-select.tsx
@@ -0,0 +1,160 @@
+import { useRef, useState } from 'react'
+
+import { ContextInfo } from '@/lib/gql/generates/graphql'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '@/components/ui/command'
+import { IconCheck, IconEmojiBook } from '@/components/ui/icons'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@/components/ui/popover'
+import { Skeleton } from '@/components/ui/skeleton'
+import LoadingWrapper from '@/components/loading-wrapper'
+import { SourceIcon } from '@/components/source-icon'
+
+interface RepoSelectProps {
+  docs: ContextInfo['sources'] | undefined
+  value: string | undefined
+  onChange: (v: string | undefined) => void
+  isInitializing?: boolean
+}
+
+export function DocSelect({
+  docs,
+  value,
+  onChange,
+  isInitializing
+}: RepoSelectProps) {
+  const [open, setOpen] = useState(false)
+  const commandListRef = useRef<HTMLDivElement>(null)
+
+  const onSelectRepo = (v: string) => {
+    onChange(v)
+  }
+
+  const scrollCommandListToTop = () => {
+    requestAnimationFrame(() => {
+      if (commandListRef.current) {
+        commandListRef.current.scrollTop = 0
+      }
+    })
+  }
+
+  const onSearchChange = () => {
+    scrollCommandListToTop()
+  }
+
+  const selectedDoc = value
+    ? docs?.find(repo => repo.sourceId === value)
+    : undefined
+  const selectedRepoName = selectedDoc?.sourceName
+
+  // if there's no repo, hide the repo select
+  if (!isInitializing && !docs?.length) return null
+
+  return (
+    <LoadingWrapper
+      loading={isInitializing}
+      fallback={
+        <div className="w-full pl-2">
+          <Skeleton className="h-3 w-[10rem]" />
+        </div>
+      }
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="outline-none" asChild>
+          <Button
+            variant="ghost"
+            className="gap-2 px-1.5 py-1 font-normal"
+            title={selectedRepoName || 'select docs'}
+          >
+            <IconEmojiBook />
+            <div className="flex flex-1 items-center gap-1.5 truncate break-all">
+              <span
+                className={cn('truncate', {
+                  'text-muted-foreground': !selectedRepoName
+                })}
+              >
+                {selectedRepoName || 'Docs'}
+              </span>
+            </div>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="bottom"
+          align="start"
+          className="max-h-[50vh] min-w-[20vw] max-w-[80vw] overflow-x-hidden rounded-md border bg-popover p-2 pb-0 text-popover-foreground shadow animate-in"
+        >
+          <Command>
+            <CommandInput
+              placeholder="Search docs..."
+              onValueChange={onSearchChange}
+            />
+            <CommandList className="max-h-[30vh]" ref={commandListRef}>
+              <CommandEmpty>No context found</CommandEmpty>
+              <CommandGroup>
+                {docs?.map(repo => {
+                  const isSelected = repo.sourceId === value
+
+                  return (
+                    <CommandItem
+                      key={repo.sourceId}
+                      onSelect={() => {
+                        onSelectRepo(repo.sourceId)
+                        setOpen(false)
+                      }}
+                      title={repo.sourceName}
+                    >
+                      <IconCheck
+                        className={cn(
+                          'mr-1 shrink-0',
+                          repo.sourceId === value ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                      <div className="flex flex-1 items-center gap-1 overflow-x-hidden">
+                        <SourceIcon
+                          kind={repo.sourceKind}
+                          className="shrink-0"
+                        />
+                        <div
+                          className={cn('truncate', {
+                            'font-semibold': isSelected
+                          })}
+                        >
+                          {repo.sourceName}
+                        </div>
+                      </div>
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            </CommandList>
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem
+                disabled={!value}
+                className="flex justify-center"
+                onSelect={() => {
+                  onChange(undefined)
+                  setOpen(false)
+                }}
+              >
+                Clear
+              </CommandItem>
+            </CommandGroup>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </LoadingWrapper>
+  )
+}
diff --git a/ee/tabby-ui/app/page/components/page.tsx b/ee/tabby-ui/app/page/components/page.tsx
index acd7e0468085..45b404206363 100644
--- a/ee/tabby-ui/app/page/components/page.tsx
+++ b/ee/tabby-ui/app/page/components/page.tsx
@@ -59,7 +59,8 @@ import {
   cn,
   getMentionsFromText,
   getThreadRunContextsFromMentions,
-  getTitleFromMessages
+  getTitleFromMessages,
+  isCodeSourceContext
 } from '@/lib/utils'
 import { Button, buttonVariants } from '@/components/ui/button'
 import {
@@ -79,9 +80,11 @@ import NotFoundPage from '@/components/not-found-page'
 import TextAreaSearch from '@/components/textarea-search'
 import { MyAvatar } from '@/components/user-avatar'
 
+import { DocSelect } from './doc-select'
 import { Header } from './header'
 import { MessagesSkeleton } from './messages-skeleton'
 import { Navbar } from './nav-bar'
+import { RepoSelect } from './repo-select'
 import { SectionContent } from './section-content'
 import { SectionTitle } from './section-title'
 
@@ -210,6 +213,18 @@ export function Page() {
     query: contextInfoQuery
   })
 
+  const repos = useMemo(() => {
+    return contextInfoData?.contextInfo?.sources.filter(x =>
+      isCodeSourceContext(x.sourceKind)
+    )
+  }, [contextInfoData?.contextInfo?.sources])
+
+  const docs = useMemo(() => {
+    return contextInfoData?.contextInfo?.sources.filter(
+      x => !isCodeSourceContext(x.sourceKind)
+    )
+  }, [contextInfoData?.contextInfo?.sources])
+
   const [afterCursor, setAfterCursor] = useState<string | undefined>()
 
   const [{ data: threadData, fetching: fetchingThread, error: threadError }] =
@@ -856,6 +871,8 @@ export function Page() {
                       <Button size="icon" variant="ghost">
                         <IconSheet />
                       </Button>
+                      <RepoSelect repos={repos} />
+                      <DocSelect docs={docs} />
                     </div>
                     <TextAreaSearch
                       onSearch={onSubmitSearch}
diff --git a/ee/tabby-ui/app/page/components/repo-select.tsx b/ee/tabby-ui/app/page/components/repo-select.tsx
new file mode 100644
index 000000000000..2c070e4dd414
--- /dev/null
+++ b/ee/tabby-ui/app/page/components/repo-select.tsx
@@ -0,0 +1,167 @@
+import { useRef, useState } from 'react'
+
+import { ContextInfo } from '@/lib/gql/generates/graphql'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '@/components/ui/command'
+import { IconCheck, IconFolderGit } from '@/components/ui/icons'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@/components/ui/popover'
+import { Skeleton } from '@/components/ui/skeleton'
+import LoadingWrapper from '@/components/loading-wrapper'
+import { SourceIcon } from '@/components/source-icon'
+
+interface RepoSelectProps {
+  repos: ContextInfo['sources'] | undefined
+  value: string | undefined
+  onChange: (v: string | undefined) => void
+  isInitializing?: boolean
+}
+
+export function RepoSelect({
+  repos,
+  value,
+  onChange,
+  isInitializing
+}: RepoSelectProps) {
+  const [open, setOpen] = useState(false)
+  const commandListRef = useRef<HTMLDivElement>(null)
+
+  const onSelectRepo = (v: string) => {
+    onChange(v)
+  }
+
+  const scrollCommandListToTop = () => {
+    requestAnimationFrame(() => {
+      if (commandListRef.current) {
+        commandListRef.current.scrollTop = 0
+      }
+    })
+  }
+
+  const onSearchChange = () => {
+    scrollCommandListToTop()
+  }
+
+  const selectedRepo = value
+    ? repos?.find(repo => repo.sourceId === value)
+    : undefined
+  const selectedRepoName = selectedRepo?.sourceName
+
+  // if there's no repo, hide the repo select
+  if (!isInitializing && !repos?.length) return null
+
+  return (
+    <LoadingWrapper
+      loading={isInitializing}
+      fallback={
+        <div className="w-full pl-2">
+          <Skeleton className="h-3 w-[10rem]" />
+        </div>
+      }
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="outline-none" asChild>
+          <Button
+            variant="ghost"
+            className="gap-2 px-1.5 py-1 font-normal"
+            title={selectedRepoName || 'select codebase'}
+          >
+            {selectedRepo ? (
+              <SourceIcon
+                kind={selectedRepo.sourceKind}
+                className="h-3.5 w-3.5 shrink-0"
+              />
+            ) : (
+              <IconFolderGit className="shrink-0" />
+            )}
+            <div className="flex flex-1 items-center gap-1.5 truncate break-all">
+              <span
+                className={cn('truncate', {
+                  'text-muted-foreground': !selectedRepoName
+                })}
+              >
+                {selectedRepoName || 'Codebase'}
+              </span>
+            </div>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="bottom"
+          align="start"
+          className="max-h-[50vh] min-w-[20vw] max-w-[80vw] overflow-x-hidden rounded-md border bg-popover p-2 pb-0 text-popover-foreground shadow animate-in"
+        >
+          <Command>
+            <CommandInput
+              placeholder="Search codebase..."
+              onValueChange={onSearchChange}
+            />
+            <CommandList className="max-h-[30vh]" ref={commandListRef}>
+              <CommandEmpty>No context found</CommandEmpty>
+              <CommandGroup>
+                {repos?.map(repo => {
+                  const isSelected = repo.sourceId === value
+
+                  return (
+                    <CommandItem
+                      key={repo.sourceId}
+                      onSelect={() => {
+                        onSelectRepo(repo.sourceId)
+                        setOpen(false)
+                      }}
+                      title={repo.sourceName}
+                    >
+                      <IconCheck
+                        className={cn(
+                          'mr-1 shrink-0',
+                          repo.sourceId === value ? 'opacity-100' : 'opacity-0'
+                        )}
+                      />
+                      <div className="flex flex-1 items-center gap-1 overflow-x-hidden">
+                        <SourceIcon
+                          kind={repo.sourceKind}
+                          className="shrink-0"
+                        />
+                        <div
+                          className={cn('truncate', {
+                            'font-semibold': isSelected
+                          })}
+                        >
+                          {repo.sourceName}
+                        </div>
+                      </div>
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            </CommandList>
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem
+                disabled={!value}
+                className="flex justify-center"
+                onSelect={() => {
+                  onChange(undefined)
+                  setOpen(false)
+                }}
+              >
+                Clear
+              </CommandItem>
+            </CommandGroup>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </LoadingWrapper>
+  )
+}
diff --git a/ee/tabby-ui/app/page/components/section-title.tsx b/ee/tabby-ui/app/page/components/section-title.tsx
index 66c6e5ef81ef..e4a1086c2c04 100644
--- a/ee/tabby-ui/app/page/components/section-title.tsx
+++ b/ee/tabby-ui/app/page/components/section-title.tsx
@@ -1,8 +1,9 @@
 import { HTMLAttributes, useContext } from 'react'
 
 import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { IconEdit } from '@/components/ui/icons'
+import { IconEdit, IconEmojiBook, IconGithub } from '@/components/ui/icons'
 import { ChatContext } from '@/components/chat/chat'
 import { MessageMarkdown } from '@/components/message-markdown'
 
@@ -20,25 +21,42 @@ export function SectionTitle({
   const { fetchingContextInfo, mode } = useContext(PageContext)
   const { supportsOnApplyInEditorV2 } = useContext(ChatContext)
   return (
-    <div
-      className={cn('flex items-center gap-2 font-semibold', className)}
-      id={message.id}
-      {...props}
-    >
-      <MessageMarkdown
-        message={message.content}
-        contextInfo={undefined}
-        supportsOnApplyInEditorV2={supportsOnApplyInEditorV2}
-        fetchingContextInfo={fetchingContextInfo}
-        className="text-3xl prose-h2:text-foreground prose-p:mb-1 prose-p:mt-0"
-        headline
-        canWrapLongLines
-      />
-      {mode === 'edit' && (
-        <Button variant="outline" className="px-2">
-          <IconEdit className="h-6 w-6" />
-        </Button>
-      )}
+    <div>
+      <div
+        className={cn('flex items-center gap-2 font-semibold', className)}
+        id={message.id}
+        {...props}
+      >
+        {/* todo use markdown? */}
+        <MessageMarkdown
+          message={message.content}
+          contextInfo={undefined}
+          supportsOnApplyInEditorV2={supportsOnApplyInEditorV2}
+          fetchingContextInfo={fetchingContextInfo}
+          className="text-3xl prose-h2:text-foreground prose-p:mb-1 prose-p:mt-0"
+          headline
+          canWrapLongLines
+        />
+        {mode === 'edit' && (
+          <Button variant="outline" className="px-2">
+            <IconEdit className="h-6 w-6" />
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center gap-2 mt-1 mb-4">
+        <Badge variant="secondary">
+          <IconGithub className="mr-1" />
+          TabbyML/tabby
+        </Badge>
+        <Badge variant="secondary">
+          <IconEmojiBook className="mr-1" />
+          Tailwindcss
+        </Badge>
+        <Badge variant="secondary">
+          <IconEmojiBook className="mr-1" />
+          Pundit
+        </Badge>
+      </div>
     </div>
   )
 }