diff --git a/extensions/react-widget/package-lock.json b/extensions/react-widget/package-lock.json
index de4c228d..6d736c6f 100644
--- a/extensions/react-widget/package-lock.json
+++ b/extensions/react-widget/package-lock.json
@@ -4860,9 +4860,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001625",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001625.tgz",
-      "integrity": "sha512-4KE9N2gcRH+HQhpeiRZXd+1niLB/XNLAhSy4z7fI8EzcbcPoAqjNInxVHTiTwWfTIV4w096XG8OtCOCQQKPv3w==",
+      "version": "1.0.30001680",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
+      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4876,7 +4876,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "2.4.2",
diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index 6fff4f46..7a43cb7b 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -65,8 +65,11 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
     position: fixed;
     right: ${props => props.modal ? '50%' : '10px'};
     bottom: ${props => props.modal ? '50%' : '10px'};
-    z-index: 1000;
+    z-index: 1001;
     transform-origin:100% 100%;
+    &.modal{
+      transform : translate(50%,50%);
+    }
     &.open {
         animation: createBox 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
         display: block;
@@ -75,9 +78,6 @@ const WidgetContainer = styled.div<{ modal?: boolean, isOpen?: boolean }>`
       animation: closeBox 250ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
       display: none;
     }
-    ${props => props.modal &&
-    "transform : translate(50%,50%);"
-  }
     align-items: center;
     text-align: left;
     @keyframes createBox {
@@ -539,7 +539,9 @@ export const WidgetCore = ({
   prefilledQuery = "",
   handleClose
 }: WidgetCoreProps) => {
-  const [prompt, setPrompt] = React.useState(prefilledQuery);
+  const [prompt, setPrompt] = React.useState<string>(prefilledQuery);
+  console.log("propmpt",prompt);
+  
   const [status, setStatus] = React.useState<Status>('idle');
   const [queries, setQueries] = React.useState<Query[]>([]);
   const [conversationId, setConversationId] = React.useState<string | null>(null);
@@ -666,106 +668,110 @@ export const WidgetCore = ({
       {isOpen && size === 'large' &&
         <Overlay onClick={handleClose} />
       }
-      <WidgetContainer ref={widgetRef} className={`${(isOpen ? "open" : "close")}`} modal={size == 'large'}>
-        {<StyledContainer isOpen={isOpen}>
-          <div>
-            <CancelButton onClick={handleClose}>
-              <Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} />
-            </CancelButton>
-            <Header>
-              <img style={{ transform: 'translateY(-5px)', maxWidth: "42px", maxHeight: "42px" }} onError={handleImageError} src={avatar} alt='docs-gpt' />
-              <ContentWrapper>
-                <Title>{title}</Title>
-                <Description>{description}</Description>
-              </ContentWrapper>
-            </Header>
-          </div>
-          <Conversation onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
-            {
-              queries.length > 0 ? queries?.map((query, index) => {
-                return (
-                  <React.Fragment key={index}>
-                    {
-                      query.prompt && <MessageBubble type='QUESTION'>
-                        <Message
-                          type='QUESTION'
-                          ref={(!(query.response || query.error) && index === queries.length - 1) ? endMessageRef : null}>
-                          {query.prompt}
-                        </Message>
-                      </MessageBubble>
-                    }
-                    {
-                      query.response ? <MessageBubble onMouseOver={() => { isBubbleHovered.current = true }} type='ANSWER'>
-                        <Message
-                          type='ANSWER'
-                          ref={(index === queries.length - 1) ? endMessageRef : null}
-                        >
-                          <Markdown
-                            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(md.render(query.response)) }}
-                          />
-                        </Message>
+      {
+        isOpen && (
+          <WidgetContainer ref={widgetRef} className={`${size !== 'large' ? (isOpen ? "open" : "close") : "modal"}`} modal={size === 'large'}>
+            <StyledContainer isOpen={isOpen}>
+              <div>
+                <CancelButton onClick={handleClose}>
+                  <Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} />
+                </CancelButton>
+                <Header>
+                  <img style={{ transform: 'translateY(-5px)', maxWidth: "42px", maxHeight: "42px" }} onError={handleImageError} src={avatar} alt='docs-gpt' />
+                  <ContentWrapper>
+                    <Title>{title}</Title>
+                    <Description>{description}</Description>
+                  </ContentWrapper>
+                </Header>
+              </div>
+              <Conversation onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
+                {
+                  queries.length > 0 ? queries?.map((query, index) => {
+                    return (
+                      <React.Fragment key={index}>
+                        {
+                          query.prompt && <MessageBubble type='QUESTION'>
+                            <Message
+                              type='QUESTION'
+                              ref={(!(query.response || query.error) && index === queries.length - 1) ? endMessageRef : null}>
+                              {query.prompt}
+                            </Message>
+                          </MessageBubble>
+                        }
+                        {
+                          query.response ? <MessageBubble onMouseOver={() => { isBubbleHovered.current = true }} type='ANSWER'>
+                            <Message
+                              type='ANSWER'
+                              ref={(index === queries.length - 1) ? endMessageRef : null}
+                            >
+                              <Markdown
+                                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(md.render(query.response)) }}
+                              />
+                            </Message>
 
-                        {collectFeedback &&
-                          <Feedback>
-                            <Like
-                              style={{
-                                stroke: query.feedback == 'LIKE' ? '#8860DB' : '#c0c0c0',
-                                visibility: query.feedback == 'LIKE' ? 'visible' : 'hidden'
-                              }}
-                              fill='none'
-                              onClick={() => handleFeedback("LIKE", index)} />
-                            <Dislike
-                              style={{
-                                stroke: query.feedback == 'DISLIKE' ? '#ed8085' : '#c0c0c0',
-                                visibility: query.feedback == 'DISLIKE' ? 'visible' : 'hidden'
-                              }}
-                              fill='none'
-                              onClick={() => handleFeedback("DISLIKE", index)} />
-                          </Feedback>}
-                      </MessageBubble>
-                        : <div>
-                          {
-                            query.error ? <ErrorAlert>
+                            {collectFeedback &&
+                              <Feedback>
+                                <Like
+                                  style={{
+                                    stroke: query.feedback == 'LIKE' ? '#8860DB' : '#c0c0c0',
+                                    visibility: query.feedback == 'LIKE' ? 'visible' : 'hidden'
+                                  }}
+                                  fill='none'
+                                  onClick={() => handleFeedback("LIKE", index)} />
+                                <Dislike
+                                  style={{
+                                    stroke: query.feedback == 'DISLIKE' ? '#ed8085' : '#c0c0c0',
+                                    visibility: query.feedback == 'DISLIKE' ? 'visible' : 'hidden'
+                                  }}
+                                  fill='none'
+                                  onClick={() => handleFeedback("DISLIKE", index)} />
+                              </Feedback>}
+                          </MessageBubble>
+                            : <div>
+                              {
+                                query.error ? <ErrorAlert>
 
-                              <ExclamationTriangleIcon width={22} height={22} color='#b91c1c' />
-                              <div>
-                                <h5 style={{ margin: 2 }}>Network Error</h5>
-                                <span style={{ margin: 2, fontSize: '13px' }}>{query.error}</span>
-                              </div>
-                            </ErrorAlert>
-                              : <MessageBubble type='ANSWER'>
-                                <Message type='ANSWER' style={{ fontWeight: 600 }}>
-                                  <DotAnimation>.</DotAnimation>
-                                  <Delay delay={200}>.</Delay>
-                                  <Delay delay={400}>.</Delay>
-                                </Message>
-                              </MessageBubble>
-                          }
-                        </div>
-                    }
-                  </React.Fragment>)
-              })
-                : <Hero title={heroTitle} description={heroDescription} theme={theme} />
-            }
-          </Conversation>
-          <div>
-            <PromptContainer
-              onSubmit={handleSubmit}>
-              <StyledInput
-                value={prompt} onChange={(event) => setPrompt(event.target.value)}
-                type='text' placeholder="Ask your question" />
-              <StyledButton
-                disabled={prompt.trim().length == 0 || status !== 'idle'}>
-                <PaperPlaneIcon width={18} height={18} color='white' />
-              </StyledButton>
-            </PromptContainer>
-            <Tagline>
-              Powered by&nbsp;
-              <Hyperlink target='_blank' href='https://www.docsgpt.cloud/'>DocsGPT</Hyperlink>
-            </Tagline>
-          </div>
-        </StyledContainer>}
-      </WidgetContainer>
+                                  <ExclamationTriangleIcon width={22} height={22} color='#b91c1c' />
+                                  <div>
+                                    <h5 style={{ margin: 2 }}>Network Error</h5>
+                                    <span style={{ margin: 2, fontSize: '13px' }}>{query.error}</span>
+                                  </div>
+                                </ErrorAlert>
+                                  : <MessageBubble type='ANSWER'>
+                                    <Message type='ANSWER' style={{ fontWeight: 600 }}>
+                                      <DotAnimation>.</DotAnimation>
+                                      <Delay delay={200}>.</Delay>
+                                      <Delay delay={400}>.</Delay>
+                                    </Message>
+                                  </MessageBubble>
+                              }
+                            </div>
+                        }
+                      </React.Fragment>)
+                  })
+                    : <Hero title={heroTitle} description={heroDescription} theme={theme} />
+                }
+              </Conversation>
+              <div>
+                <PromptContainer
+                  onSubmit={handleSubmit}>
+                  <StyledInput
+                    value={prompt} onChange={(event) => setPrompt(event.target.value)}
+                    type='text' placeholder="Ask your question" />
+                  <StyledButton
+                    disabled={prompt.trim().length == 0 || status !== 'idle'}>
+                    <PaperPlaneIcon width={18} height={18} color='white' />
+                  </StyledButton>
+                </PromptContainer>
+                <Tagline>
+                  Powered by&nbsp;
+                  <Hyperlink target='_blank' href='https://www.docsgpt.cloud/'>DocsGPT</Hyperlink>
+                </Tagline>
+              </div>
+            </StyledContainer>
+          </WidgetContainer>
+        )
+      }
     </ThemeProvider>
   )
 }
\ No newline at end of file
diff --git a/extensions/react-widget/src/components/SearchBar.tsx b/extensions/react-widget/src/components/SearchBar.tsx
index a6a48173..2589cb2f 100644
--- a/extensions/react-widget/src/components/SearchBar.tsx
+++ b/extensions/react-widget/src/components/SearchBar.tsx
@@ -9,30 +9,30 @@ import DOMPurify from 'dompurify';
 
 const themes = {
     dark: {
-      bg: '#222327',
-      text: '#fff',
-      primary: {
-        text: "#FAFAFA",
-        bg: '#111111'
-      },
-      secondary: {
-        text: "#A1A1AA",
-        bg: "#38383b"
-      }
+        bg: '#222327',
+        text: '#fff',
+        primary: {
+            text: "#FAFAFA",
+            bg: '#111111'
+        },
+        secondary: {
+            text: "#A1A1AA",
+            bg: "#38383b"
+        }
     },
     light: {
-      bg: '#fff',
-      text: '#000',
-      primary: {
-        text: "#222327",
-        bg: "#fff"
-      },
-      secondary: {
-        text: "#A1A1AA",
-        bg: "#F6F6F6"
-      }
+        bg: '#fff',
+        text: '#000',
+        primary: {
+            text: "#222327",
+            bg: "#fff"
+        },
+        secondary: {
+            text: "#A1A1AA",
+            bg: "#F6F6F6"
+        }
     }
-  }
+}
 
 const Main = styled.div`
     all:initial;
@@ -157,9 +157,7 @@ export const SearchBar = ({
             :
             setResults([])
     }, [input])
-    React.useEffect(()=>{
-        console.log(isWidgetOpen, input);
-    },[isWidgetOpen])
+    
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
             setIsWidgetOpen(true);
@@ -181,7 +179,7 @@ export const SearchBar = ({
                         onChange={(e) => setInput(e.target.value)}
                     />
                     {
-                        input.length>0 && results.length > 0 && (
+                        input.length > 0 && results.length > 0 && (
                             <SearchResults>
                                 {results.map((res) => (
                                     <div>
@@ -198,14 +196,14 @@ export const SearchBar = ({
                         )
                     }
                 </Container>
-                <WidgetCore
+                {isWidgetOpen && <WidgetCore
                     theme={theme}
                     apiHost={apiHost}
                     apiKey={apiKey}
                     prefilledQuery={input}
                     isOpen={isWidgetOpen}
                     handleClose={handleClose} size={'large'}
-                />
+                />}
 
             </Main>
         </ThemeProvider>