diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index c33a6c84..8e62683e 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -433,6 +433,8 @@ class CombinedJson(Resource):
     @api.doc(description="Provide JSON file with combined available indexes")
     def get(self):
         user = "local"
+        sort_field = request.args.get('sort', 'date')  # Default to 'date'
+        sort_order = request.args.get('order', "desc")  # Default to 'desc'
         data = [
             {
                 "name": "default",
@@ -445,7 +447,7 @@ class CombinedJson(Resource):
         ]
 
         try:
-            for index in sources_collection.find({"user": user}).sort("date", -1):
+            for index in sources_collection.find({"user": user}).sort(sort_field, 1 if sort_order=="asc" else -1):
                 data.append(
                     {
                         "id": str(index["_id"]),
diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index 01861274..3edaaaf2 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -9,6 +9,7 @@ import { ThemeProvider } from 'styled-components';
 import Like from "../assets/like.svg"
 import Dislike from "../assets/dislike.svg"
 import MarkdownIt from 'markdown-it';
+
 const themes = {
   dark: {
     bg: '#222327',
@@ -35,6 +36,20 @@ const themes = {
     }
   }
 }
+
+const sizesConfig = {
+  small: { size:'small', width: '400px', height: '320px' },
+  medium: { size:'medium', width: '28vw', height: '70vh'},
+  large: { size:'large', width: '60vw', height: '75vh'},
+  getCustom: (custom: { width: string; height: string; maxWidth?: string; maxHeight?: string }) => ({
+    size:'custom',
+    width: custom.width,
+    height: custom.height,
+    maxWidth: custom.maxWidth || '968px',
+    maxHeight: custom.maxHeight || '70vh',
+  }),
+};
+
 const GlobalStyles = createGlobalStyle`
 .response pre {
     padding: 8px;
@@ -80,7 +95,7 @@ const Overlay = styled.div`
   z-index: 999;
   transition: opacity 0.5s;
 `
-const WidgetContainer = styled.div<{ modal: boolean }>`
+const WidgetContainer = styled.div<{ modal?: boolean }>`
     display: block;
     position: fixed;
     right: ${props => props.modal ? '50%' : '10px'};
@@ -183,23 +198,29 @@ const Description = styled.p`
     margin-top: 0;
 `;
 
-const Conversation = styled.div<{ size: string }>`
-    min-height: 250px;
-    max-width: 968px;
-    height: ${props => props.size === 'large' ? '75vh' : props.size === 'medium' ? '70vh' : '320px'};
-    width: ${props => props.size === 'large' ? '60vw' : props.size === 'medium' ? '28vw' : '400px'};
-    padding-inline: 0.5rem;
-    border-radius: 0.375rem;
-    text-align: left;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: #4a4a4a transparent; /* thumb color track color */
-    @media only screen and (max-width: 768px) {
+const Conversation = styled.div`
+  min-height: 250px;
+  max-height: ${(props) => props.theme.dimensions.maxHeight};
+  max-width: ${(props) => props.theme.dimensions.maxWidth};
+  height: ${(props) => props.theme.dimensions.height};
+  width: ${(props) => props.theme.dimensions.width};
+  padding-inline: 0.5rem;
+  border-radius: 0.375rem;
+  text-align: left;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #4a4a4a transparent; /* thumb color track color */
+  @media only screen and (max-width: 768px) {
     width: 90vw !important;
-    }
-    @media only screen and (min-width:768px ) and (max-width: 1280px) {
-    width:${props => props.size === 'large' ? '90vw' : props.size === 'medium' ? '60vw' : '400px'} !important;
-    }
+  }
+  @media only screen and (min-width: 768px) and (max-width: 1280px) {
+    width: ${(props) =>
+      props.theme.dimensions.size === "large"
+        ? "90vw"
+        :  props.theme.dimensions.size === "medium"
+        ? "60vw"
+        : "400px"} !important;
+  }
 `;
 const Feedback = styled.div`
   background-color: transparent;
@@ -265,9 +286,9 @@ const DotAnimation = styled.div`
 const Delay = styled(DotAnimation) <{ delay: number }>`
   animation-delay: ${props => props.delay + 'ms'};
 `;
-const PromptContainer = styled.form<{ size: string }>`
+const PromptContainer = styled.form`
   background-color: transparent;
-  height: ${props => props.size == 'large' ? '60px' : '40px'};
+  height: ${props => props.theme.dimensions.size == 'large' ? '60px' : '40px'};
   margin: 16px;
   display: flex;
   justify-content: space-evenly;
@@ -282,14 +303,14 @@ const StyledInput = styled.input`
   color: ${props => props.theme.text};
   outline: none;
 `;
-const StyledButton = styled.button<{ size: string }>`
+const StyledButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
   background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
   border-radius: 6px;
-  min-width: ${props => props.size === 'large' ? '60px' : '36px'};
-  height: ${props => props.size === 'large' ? '60px' : '36px'};
+  min-width: ${props => props.theme.dimensions.size === 'large' ? '60px' : '36px'};
+  height: ${props => props.theme.dimensions.size === 'large' ? '60px' : '36px'};
   margin-left:8px;
   padding: 0px;
   border: none;
@@ -366,13 +387,14 @@ export const DocsGPTWidget = ({
   theme = 'dark',
   buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/message.svg',
   buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)',
-  collectFeedback = true
+  collectFeedback = true,
+  deafultOpen = false
 }: WidgetProps) => {
   const [prompt, setPrompt] = React.useState('');
   const [status, setStatus] = React.useState<Status>('idle');
   const [queries, setQueries] = React.useState<Query[]>([])
   const [conversationId, setConversationId] = React.useState<string | null>(null)
-  const [open, setOpen] = React.useState<boolean>(false)
+  const [open, setOpen] = React.useState<boolean>(deafultOpen)
   const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
   const isBubbleHovered = useRef<boolean>(false)
   const endMessageRef = React.useRef<HTMLDivElement | null>(null);
@@ -486,8 +508,13 @@ export const DocsGPTWidget = ({
   const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
     event.currentTarget.src = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png";
   };
+
+  const dimensions =
+    typeof size === 'object' && 'custom' in size
+      ? sizesConfig.getCustom(size.custom)
+      : sizesConfig[size];
   return (
-    <ThemeProvider theme={themes[theme]}>
+    <ThemeProvider theme={{...themes[theme], dimensions}}>
       {open && size === 'large' &&
         <Overlay onClick={() => {
           setOpen(false)
@@ -513,7 +540,7 @@ export const DocsGPTWidget = ({
               </ContentWrapper>
             </Header>
           </div>
-          <Conversation size={size} onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
+          <Conversation onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
             {
               queries.length > 0 ? queries?.map((query, index) => {
                 return (
@@ -584,13 +611,11 @@ export const DocsGPTWidget = ({
             }
           </Conversation>
           <PromptContainer
-            size={size}
             onSubmit={handleSubmit}>
             <StyledInput
               value={prompt} onChange={(event) => setPrompt(event.target.value)}
               type='text' placeholder="What do you want to do?" />
             <StyledButton
-              size={size}
               disabled={prompt.trim().length == 0 || status !== 'idle'}>
               <PaperPlaneIcon width={15} height={15} color='white' />
             </StyledButton>
diff --git a/extensions/react-widget/src/types/index.ts b/extensions/react-widget/src/types/index.ts
index a55b6342..0a57a960 100644
--- a/extensions/react-widget/src/types/index.ts
+++ b/extensions/react-widget/src/types/index.ts
@@ -19,9 +19,17 @@ export interface WidgetProps {
   description?: string;
   heroTitle?: string;
   heroDescription?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | {
+    custom: {
+      width: string;
+      height: string;
+      maxWidth?: string;
+      maxHeight?: string;
+    };
+  };
   theme?:THEME,
   buttonIcon?:string;
   buttonBg?:string;
-  collectFeedback?:boolean
+  collectFeedback?:boolean;
+  deafultOpen?: boolean;
 }
\ No newline at end of file
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index ce23e90e..3591469b 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -254,7 +254,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-40 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
+        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
diff --git a/frontend/src/api/services/userService.ts b/frontend/src/api/services/userService.ts
index c5bbba7d..53b38f50 100644
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -2,7 +2,8 @@ import apiClient from '../client';
 import endpoints from '../endpoints';
 
 const userService = {
-  getDocs: (): Promise<any> => apiClient.get(endpoints.USER.DOCS),
+  getDocs: (sort = 'date', order = 'desc'): Promise<any> =>
+    apiClient.get(`${endpoints.USER.DOCS}?sort=${sort}&order=${order}`),
   checkDocs: (data: any): Promise<any> =>
     apiClient.post(endpoints.USER.DOCS_CHECK, data),
   getAPIKeys: (): Promise<any> => apiClient.get(endpoints.USER.API_KEYS),
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index a9a05168..284c2b56 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -474,7 +474,7 @@ function AllSources(sources: AllSourcesProps) {
                 ></img>
               ) : null}
             </span>
-            <p className="mt-3 max-h-24 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
+            <p className="mt-3 max-h-16 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
               {source.text}
             </p>
           </div>
diff --git a/frontend/src/preferences/preferenceApi.ts b/frontend/src/preferences/preferenceApi.ts
index ed730f7c..af1060b8 100644
--- a/frontend/src/preferences/preferenceApi.ts
+++ b/frontend/src/preferences/preferenceApi.ts
@@ -3,9 +3,12 @@ import userService from '../api/services/userService';
 import { Doc } from '../models/misc';
 
 //Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
-export async function getDocs(): Promise<Doc[] | null> {
+export async function getDocs(
+  sort = 'date',
+  order = 'desc',
+): Promise<Doc[] | null> {
   try {
-    const response = await userService.getDocs();
+    const response = await userService.getDocs(sort, order);
     const data = await response.json();
 
     const docs: Doc[] = [];
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 004b6f48..f94d1a87 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -45,14 +45,30 @@ const Documents: React.FC<DocumentsProps> = ({
   const [modalState, setModalState] = useState<ActiveState>('INACTIVE'); // Initialize with inactive state
   const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag
   const [loading, setLoading] = useState(false);
-
+  const [sortField, setSortField] = useState<'date' | 'tokens'>('date');
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
   const syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
     { label: 'Weekly', value: 'weekly' },
     { label: 'Monthly', value: 'monthly' },
   ];
-
+  const refreshDocs = (field: 'date' | 'tokens') => {
+    if (field === sortField) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortOrder('desc');
+      setSortField(field);
+    }
+    getDocs(sortField, sortOrder)
+      .then((data) => {
+        dispatch(setSourceDocs(data));
+      })
+      .catch((error) => console.error(error))
+      .finally(() => {
+        setLoading(false);
+      });
+  };
   const handleManageSync = (doc: Doc, sync_frequency: string) => {
     setLoading(true);
     userService
@@ -110,19 +126,28 @@ const Documents: React.FC<DocumentsProps> = ({
                   <th>
                     <div className="flex justify-center items-center">
                       {t('settings.documents.date')}
-                      <img src={caretSort} alt="" />
+                      <img
+                        className="cursor-pointer"
+                        onClick={() => refreshDocs('date')}
+                        src={caretSort}
+                        alt="sort"
+                      />
                     </div>
                   </th>
                   <th>
                     <div className="flex justify-center items-center">
                       {t('settings.documents.tokenUsage')}
-                      <img src={caretSort} alt="" />
+                      <img
+                        className="cursor-pointer"
+                        onClick={() => refreshDocs('tokens')}
+                        src={caretSort}
+                        alt="sort"
+                      />
                     </div>
                   </th>
                   <th>
                     <div className="flex justify-center items-center">
                       {t('settings.documents.type')}
-                      <img src={caretSort} alt="" />
                     </div>
                   </th>
                   <th></th>