diff --git a/src/components/Sidepanel/Chat/body.tsx b/src/components/Sidepanel/Chat/body.tsx
index 6d86009..75c6617 100644
--- a/src/components/Sidepanel/Chat/body.tsx
+++ b/src/components/Sidepanel/Chat/body.tsx
@@ -23,42 +23,45 @@ export const SidePanelBody = () => {
     }
   })
   return (
-    <div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
-      {messages.length === 0 && <EmptySidePanel />}
-      {messages.map((message, index) => (
-        <PlaygroundMessage
-          key={index}
-          isBot={message.isBot}
-          message={message.message}
-          name={message.name}
-          images={message.images || []}
-          currentMessageIndex={index}
-          totalMessages={messages.length}
-          onRengerate={regenerateLastMessage}
-          message_type={message.messageType}
-          isProcessing={streaming}
-          isSearchingInternet={isSearchingInternet}
-          sources={message.sources}
-          onEditFormSubmit={(value) => {
-            editMessage(index, value, !message.isBot)
-          }}
-          onSourceClick={(data) => {
-            setSource(data)
-            setIsSourceOpen(true)
-          }}
-          isTTSEnabled={ttsEnabled}
-          generationInfo={message?.generationInfo}
-          isStreaming={streaming}
-          reasoningTimeTaken={message?.reasoning_time_taken}
-        />
-      ))}
-      <div className="w-full h-48 flex-shrink-0"></div>
-      <div ref={divRef} />
+    <>
+      <div className="relative flex w-full flex-col items-center pt-16 pb-4">
+        {messages.length === 0 && <EmptySidePanel />}
+        {messages.map((message, index) => (
+          <PlaygroundMessage
+            key={index}
+            isBot={message.isBot}
+            message={message.message}
+            name={message.name}
+            images={message.images || []}
+            currentMessageIndex={index}
+            totalMessages={messages.length}
+            onRengerate={regenerateLastMessage}
+            message_type={message.messageType}
+            isProcessing={streaming}
+            isSearchingInternet={isSearchingInternet}
+            sources={message.sources}
+            onEditFormSubmit={(value) => {
+              editMessage(index, value, !message.isBot)
+            }}
+            onSourceClick={(data) => {
+              setSource(data)
+              setIsSourceOpen(true)
+            }}
+            isTTSEnabled={ttsEnabled}
+            generationInfo={message?.generationInfo}
+            isStreaming={streaming}
+            reasoningTimeTaken={message?.reasoning_time_taken}
+          />
+        ))}
+        <div ref={divRef} />
+      </div>
+      <div className="w-full pb-[157px]"></div>
+
       <MessageSourcePopup
         open={isSourceOpen}
         setOpen={setIsSourceOpen}
         source={source}
       />
-    </div>
+    </>
   )
 }
diff --git a/src/components/Sidepanel/Chat/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
index bd1084b..2ade4d6 100644
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -134,8 +134,8 @@ export const EmptySidePanel = () => {
   }
 
   return (
-    <div className="mx-auto sm:max-w-md px-4 mt-10">
-      <div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
+    <div className="mx-auto sm:max-w-lg px-4 mt-10">
+      <div className="rounded-lg  justify-center items-center flex flex-col border border-gray-300 dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
         {(ollamaStatus === "pending" || isRefetching) && (
           <div className="inline-flex items-center space-x-2">
             <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
diff --git a/src/components/Sidepanel/Chat/form.tsx b/src/components/Sidepanel/Chat/form.tsx
index 5c6789f..6240a86 100644
--- a/src/components/Sidepanel/Chat/form.tsx
+++ b/src/components/Sidepanel/Chat/form.tsx
@@ -226,271 +226,289 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   }, [defaultChatWithWebsite])
 
   return (
-    <div className="px-3 pt-3 md:px-6 md:pt-6 bg-white dark:bg-[#262626] border rounded-t-xl border-gray-300 dark:border-gray-600">
-      <div
-        className={`h-full rounded-md shadow relative ${
-          form.values.image.length === 0 ? "hidden" : "block"
-        }`}>
-        <div className="relative">
-          <Image
-            src={form.values.image}
-            alt="Uploaded Image"
-            width={180}
-            preview={false}
-            className="rounded-md"
-          />
-          <button
-            onClick={() => {
-              form.setFieldValue("image", "")
-            }}
-            className="flex items-center justify-center absolute top-0 m-2 bg-white  dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-      </div>
-      <div>
-        <div className="flex">
-          <form
-            onSubmit={form.onSubmit(async (value) => {
-              if (!selectedModel || selectedModel.length === 0) {
-                form.setFieldError("message", t("formError.noModel"))
-                return
-              }
-              if (chatMode === "rag") {
-                const defaultEM = await defaultEmbeddingModelForRag()
-                if (!defaultEM) {
-                  form.setFieldError("message", t("formError.noEmbeddingModel"))
-                  return
-                }
-              }
-              if (webSearch) {
-                const defaultEM = await defaultEmbeddingModelForRag()
-                if (!defaultEM) {
-                  form.setFieldError("message", t("formError.noEmbeddingModel"))
-                  return
-                }
-              }
-              await stopListening()
-              if (
-                value.message.trim().length === 0 &&
-                value.image.length === 0
-              ) {
-                return
-              }
-              form.reset()
-              textAreaFocus()
-              await sendMessage({
-                image: value.image,
-                message: value.message.trim()
-              })
-            })}
-            className="shrink-0 flex-grow  flex flex-col items-center ">
-            <input
-              id="file-upload"
-              name="file-upload"
-              type="file"
-              className="sr-only"
-              ref={inputRef}
-              accept="image/*"
-              multiple={false}
-              onChange={onInputChange}
-            />
-            <div className="w-full border-x border-t border-gray-300 flex flex-col dark:border-gray-600 rounded-t-xl p-2">
-              <textarea
-                onKeyDown={(e) => handleKeyDown(e)}
-                ref={textareaRef}
-                className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
-                onPaste={handlePaste}
-                rows={1}
-                style={{ minHeight: "60px" }}
-                tabIndex={0}
-                onCompositionStart={() => {
-                  if (import.meta.env.BROWSER !== "firefox") {
-                    setTyping(true)
-                  }
-                }}
-                onCompositionEnd={() => {
-                  if (import.meta.env.BROWSER !== "firefox") {
-                    setTyping(false)
-                  }
-                }}
-                placeholder={t("form.textarea.placeholder")}
-                {...form.getInputProps("message")}
-              />
-              <div className="flex mt-4 justify-end gap-3">
-                {chatMode !== "vision" && (
-                  <Tooltip title={t("tooltip.searchInternet")}>
-                    <button
-                      type="button"
-                      onClick={() => setWebSearch(!webSearch)}
-                      className={`inline-flex items-center gap-2   ${
-                        chatMode === "rag" ? "hidden" : "block"
-                      }`}>
-                      {webSearch ? (
-                        <PiGlobe className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-                      ) : (
-                        <PiGlobeX className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-                      )}
-                    </button>
-                  </Tooltip>
-                )}
-                <ModelSelect />
-                {browserSupportsSpeechRecognition && (
-                  <Tooltip title={t("tooltip.speechToText")}>
-                    <button
-                      type="button"
-                      onClick={async () => {
-                        if (isListening) {
-                          stopListening()
-                        } else {
-                          resetTranscript()
-                          startListening({
-                            continuous: true,
-                            lang: speechToTextLanguage
-                          })
-                        }
-                      }}
-                      className={`flex items-center justify-center dark:text-gray-300`}>
-                      {!isListening ? (
-                        <MicIcon className="h-5 w-5" />
-                      ) : (
-                        <div className="relative">
-                          <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
-                          <MicIcon className="h-5 w-5" />
-                        </div>
-                      )}
-                    </button>
-                  </Tooltip>
-                )}
-                <Tooltip title={t("tooltip.vision")}>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      if (chatMode === "vision") {
-                        setChatMode("normal")
-                      } else {
-                        setChatMode("vision")
-                      }
-                    }}
-                    disabled={chatMode === "rag"}
-                    className={`flex items-center justify-center dark:text-gray-300 ${
-                      chatMode === "rag" ? "hidden" : "block"
-                    } disabled:opacity-50`}>
-                    {chatMode === "vision" ? (
-                      <EyeIcon className="h-5 w-5" />
-                    ) : (
-                      <EyeOffIcon className="h-5 w-5" />
-                    )}
-                  </button>
-                </Tooltip>
-                <Tooltip title={t("tooltip.uploadImage")}>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      inputRef.current?.click()
-                    }}
-                    disabled={chatMode === "vision"}
-                    className={`flex items-center justify-center disabled:opacity-50 dark:text-gray-300 ${
-                      chatMode === "rag" ? "hidden" : "block"
-                    }`}>
-                    <ImageIcon className="h-5 w-5" />
-                  </button>
-                </Tooltip>
-                {!streaming ? (
-                  <Dropdown.Button
-                    htmlType="submit"
-                    disabled={isSending}
-                    className="!justify-end !w-auto"
-                    icon={
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        strokeWidth={1.5}
-                        stroke="currentColor"
-                        className="w-5 h-5">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="m19.5 8.25-7.5 7.5-7.5-7.5"
-                        />
-                      </svg>
-                    }
-                    menu={{
-                      items: [
-                        {
-                          key: 1,
-                          label: (
-                            <Checkbox
-                              checked={sendWhenEnter}
-                              onChange={(e) =>
-                                setSendWhenEnter(e.target.checked)
-                              }>
-                              {t("sendWhenEnter")}
-                            </Checkbox>
-                          )
-                        },
-                        {
-                          key: 2,
-                          label: (
-                            <Checkbox
-                              checked={chatMode === "rag"}
-                              onChange={(e) => {
-                                setChatMode(e.target.checked ? "rag" : "normal")
-                              }}>
-                              {t("common:chatWithCurrentPage")}
-                            </Checkbox>
-                          )
-                        },
-                        {
-                          key: 3,
-                          label: (
-                            <Checkbox
-                              checked={useOCR}
-                              onChange={(e) => setUseOCR(e.target.checked)}>
-                              {t("useOCR")}
-                            </Checkbox>
-                          )
-                        }
-                      ]
-                    }}>
-                    <div className="inline-flex gap-2">
-                      {sendWhenEnter ? (
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          className="h-5 w-5"
-                          viewBox="0 0 24 24">
-                          <path d="M9 10L4 15 9 20"></path>
-                          <path d="M20 4v7a4 4 0 01-4 4H4"></path>
-                        </svg>
-                      ) : null}
-                      {t("common:submit")}
-                    </div>
-                  </Dropdown.Button>
-                ) : (
-                  <Tooltip title={t("tooltip.stopStreaming")}>
-                    <button
-                      type="button"
-                      onClick={stopStreamingRequest}
-                      className="text-gray-800 dark:text-gray-300">
-                      <StopCircleIcon className="h-6 w-6" />
-                    </button>
-                  </Tooltip>
-                )}
+    <div className="flex w-full flex-col items-center p-2 pt-1  pb-4">
+      <div className="relative z-10 flex w-full flex-col items-center justify-center gap-2 text-base">
+        <div className="relative flex w-full flex-row justify-center gap-2 lg:w-4/5">
+          <div
+            className={` bg-neutral-50  dark:bg-[#262626] relative w-full max-w-[48rem] p-1 backdrop-blur-lg duration-100 border border-gray-300 rounded-xl  dark:border-gray-600
+          `}>
+            <div
+              className={`h-full shadow relative ${
+                form.values.image.length === 0 ? "hidden" : "block"
+              }`}>
+              <div className="relative">
+                <Image
+                  src={form.values.image}
+                  alt="Uploaded Image"
+                  width={180}
+                  preview={false}
+                  className="rounded-md"
+                />
+                <button
+                  onClick={() => {
+                    form.setFieldValue("image", "")
+                  }}
+                  className="flex items-center justify-center absolute top-0 m-2 bg-white  dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
+                  <X className="h-5 w-5" />
+                </button>
               </div>
             </div>
-          </form>
-        </div>
-        {form.errors.message && (
-          <div className="text-red-500 text-center text-sm mt-1">
-            {form.errors.message}
+            <div>
+              <div className="flex">
+                <form
+                  onSubmit={form.onSubmit(async (value) => {
+                    if (!selectedModel || selectedModel.length === 0) {
+                      form.setFieldError("message", t("formError.noModel"))
+                      return
+                    }
+                    if (chatMode === "rag") {
+                      const defaultEM = await defaultEmbeddingModelForRag()
+                      if (!defaultEM) {
+                        form.setFieldError(
+                          "message",
+                          t("formError.noEmbeddingModel")
+                        )
+                        return
+                      }
+                    }
+                    if (webSearch) {
+                      const defaultEM = await defaultEmbeddingModelForRag()
+                      if (!defaultEM) {
+                        form.setFieldError(
+                          "message",
+                          t("formError.noEmbeddingModel")
+                        )
+                        return
+                      }
+                    }
+                    await stopListening()
+                    if (
+                      value.message.trim().length === 0 &&
+                      value.image.length === 0
+                    ) {
+                      return
+                    }
+                    form.reset()
+                    textAreaFocus()
+                    await sendMessage({
+                      image: value.image,
+                      message: value.message.trim()
+                    })
+                  })}
+                  className="shrink-0 flex-grow  flex flex-col items-center ">
+                  <input
+                    id="file-upload"
+                    name="file-upload"
+                    type="file"
+                    className="sr-only"
+                    ref={inputRef}
+                    accept="image/*"
+                    multiple={false}
+                    onChange={onInputChange}
+                  />
+                  <div className="w-full  flex flex-col p-1">
+                    <textarea
+                      onKeyDown={(e) => handleKeyDown(e)}
+                      ref={textareaRef}
+                      className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
+                      onPaste={handlePaste}
+                      rows={1}
+                      style={{ minHeight: "60px" }}
+                      tabIndex={0}
+                      onCompositionStart={() => {
+                        if (import.meta.env.BROWSER !== "firefox") {
+                          setTyping(true)
+                        }
+                      }}
+                      onCompositionEnd={() => {
+                        if (import.meta.env.BROWSER !== "firefox") {
+                          setTyping(false)
+                        }
+                      }}
+                      placeholder={t("form.textarea.placeholder")}
+                      {...form.getInputProps("message")}
+                    />
+                    <div className="flex mt-4 justify-end gap-3">
+                      {chatMode !== "vision" && (
+                        <Tooltip title={t("tooltip.searchInternet")}>
+                          <button
+                            type="button"
+                            onClick={() => setWebSearch(!webSearch)}
+                            className={`inline-flex items-center gap-2   ${
+                              chatMode === "rag" ? "hidden" : "block"
+                            }`}>
+                            {webSearch ? (
+                              <PiGlobe className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                            ) : (
+                              <PiGlobeX className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+                            )}
+                          </button>
+                        </Tooltip>
+                      )}
+                      <ModelSelect />
+                      {browserSupportsSpeechRecognition && (
+                        <Tooltip title={t("tooltip.speechToText")}>
+                          <button
+                            type="button"
+                            onClick={async () => {
+                              if (isListening) {
+                                stopListening()
+                              } else {
+                                resetTranscript()
+                                startListening({
+                                  continuous: true,
+                                  lang: speechToTextLanguage
+                                })
+                              }
+                            }}
+                            className={`flex items-center justify-center dark:text-gray-300`}>
+                            {!isListening ? (
+                              <MicIcon className="h-5 w-5" />
+                            ) : (
+                              <div className="relative">
+                                <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
+                                <MicIcon className="h-5 w-5" />
+                              </div>
+                            )}
+                          </button>
+                        </Tooltip>
+                      )}
+                      <Tooltip title={t("tooltip.vision")}>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (chatMode === "vision") {
+                              setChatMode("normal")
+                            } else {
+                              setChatMode("vision")
+                            }
+                          }}
+                          disabled={chatMode === "rag"}
+                          className={`flex items-center justify-center dark:text-gray-300 ${
+                            chatMode === "rag" ? "hidden" : "block"
+                          } disabled:opacity-50`}>
+                          {chatMode === "vision" ? (
+                            <EyeIcon className="h-5 w-5" />
+                          ) : (
+                            <EyeOffIcon className="h-5 w-5" />
+                          )}
+                        </button>
+                      </Tooltip>
+                      <Tooltip title={t("tooltip.uploadImage")}>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            inputRef.current?.click()
+                          }}
+                          disabled={chatMode === "vision"}
+                          className={`flex items-center justify-center disabled:opacity-50 dark:text-gray-300 ${
+                            chatMode === "rag" ? "hidden" : "block"
+                          }`}>
+                          <ImageIcon className="h-5 w-5" />
+                        </button>
+                      </Tooltip>
+                      {!streaming ? (
+                        <Dropdown.Button
+                          htmlType="submit"
+                          disabled={isSending}
+                          className="!justify-end !w-auto"
+                          icon={
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              strokeWidth={1.5}
+                              stroke="currentColor"
+                              className="w-5 h-5">
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                              />
+                            </svg>
+                          }
+                          menu={{
+                            items: [
+                              {
+                                key: 1,
+                                label: (
+                                  <Checkbox
+                                    checked={sendWhenEnter}
+                                    onChange={(e) =>
+                                      setSendWhenEnter(e.target.checked)
+                                    }>
+                                    {t("sendWhenEnter")}
+                                  </Checkbox>
+                                )
+                              },
+                              {
+                                key: 2,
+                                label: (
+                                  <Checkbox
+                                    checked={chatMode === "rag"}
+                                    onChange={(e) => {
+                                      setChatMode(
+                                        e.target.checked ? "rag" : "normal"
+                                      )
+                                    }}>
+                                    {t("common:chatWithCurrentPage")}
+                                  </Checkbox>
+                                )
+                              },
+                              {
+                                key: 3,
+                                label: (
+                                  <Checkbox
+                                    checked={useOCR}
+                                    onChange={(e) =>
+                                      setUseOCR(e.target.checked)
+                                    }>
+                                    {t("useOCR")}
+                                  </Checkbox>
+                                )
+                              }
+                            ]
+                          }}>
+                          <div className="inline-flex gap-2">
+                            {sendWhenEnter ? (
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="2"
+                                className="h-5 w-5"
+                                viewBox="0 0 24 24">
+                                <path d="M9 10L4 15 9 20"></path>
+                                <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                              </svg>
+                            ) : null}
+                            {t("common:submit")}
+                          </div>
+                        </Dropdown.Button>
+                      ) : (
+                        <Tooltip title={t("tooltip.stopStreaming")}>
+                          <button
+                            type="button"
+                            onClick={stopStreamingRequest}
+                            className="text-gray-800 dark:text-gray-300">
+                            <StopCircleIcon className="h-6 w-6" />
+                          </button>
+                        </Tooltip>
+                      )}
+                    </div>
+                  </div>
+                </form>
+              </div>
+              {form.errors.message && (
+                <div className="text-red-500 text-center text-sm mt-1">
+                  {form.errors.message}
+                </div>
+              )}
+            </div>
           </div>
-        )}
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Sidepanel/Chat/header.tsx b/src/components/Sidepanel/Chat/header.tsx
index fa8e84b..13d7462 100644
--- a/src/components/Sidepanel/Chat/header.tsx
+++ b/src/components/Sidepanel/Chat/header.tsx
@@ -40,7 +40,7 @@ export const SidepanelHeader = () => {
   const [sidebarOpen, setSidebarOpen] = React.useState(false)
 
   return (
-    <div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
+    <div className=" px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center absolute top-0 z-10 flex h-14 w-full">
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
         <img
           className="h-6 w-auto"
diff --git a/src/routes/sidepanel-chat.tsx b/src/routes/sidepanel-chat.tsx
index 60205a9..3718903 100644
--- a/src/routes/sidepanel-chat.tsx
+++ b/src/routes/sidepanel-chat.tsx
@@ -126,25 +126,25 @@ const SidepanelChat = () => {
   }, [bgMsg])
 
   return (
-    <div
-      ref={drop}
-      className={`flex ${
-        dropState === "dragging" && chatMode === "normal"
-          ? "bg-neutral-200 dark:bg-gray-800 z-10"
-          : "bg-neutral-50 dark:bg-[#171717]"
-      } flex-col min-h-screen mx-auto max-w-7xl`}>
-      <div className="sticky top-0 z-10">
-        <SidepanelHeader />
-      </div>
-      <SidePanelBody />
+    <div className="flex h-full w-full">
+      <main className="relative h-dvh w-full">
+        <div className="relative z-10 w-full">
+          <SidepanelHeader />
+        </div>
+        <div
+          ref={drop}
+          className={`relative flex h-full flex-col items-center ${
+            dropState === "dragging" ? "bg-gray-100 dark:bg-gray-800" : ""
+          } bg-white dark:bg-[#171717]`}>
+          <div className="custom-scrollbar bg-bottom-mask-light dark:bg-bottom-mask-dark mask-bottom-fade will-change-mask flex h-full w-full flex-col items-center overflow-x-hidden overflow-y-auto px-5">
+            <SidePanelBody />
+          </div>
 
-      <div className="bottom-0 w-full bg-transparent border-0 fixed pt-2">
-        <div className="stretch mx-2 flex flex-row gap-3 md:mx-4 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
-          <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
+          <div className="absolute bottom-0 w-full">
             <SidepanelForm dropedFile={dropedFile} />
           </div>
         </div>
-      </div>
+      </main>
     </div>
   )
 }