diff --git a/web/actions/user.ts b/web/actions/user.ts
index 4fd651d..ea87f8b 100644
--- a/web/actions/user.ts
+++ b/web/actions/user.ts
@@ -29,7 +29,7 @@ export async function create(question: string, context: string, collectionName:
       revalidatePath("/chat");
       return response.data.message;
     } catch(e) {
-      redirect('/upload');
+      redirect('/limit-cross');
       return e;
     }
 }
diff --git a/web/public/arrow.png b/web/public/arrow.png
deleted file mode 100644
index 3317c88..0000000
Binary files a/web/public/arrow.png and /dev/null differ
diff --git a/web/src/app/components/DragDrop.tsx b/web/src/app/components/DragDrop.tsx
index 6fcfb88..3ef5d99 100644
--- a/web/src/app/components/DragDrop.tsx
+++ b/web/src/app/components/DragDrop.tsx
@@ -50,7 +50,7 @@ export const DragDrop = () => {
           console.error("Upload failed", error);
           alert("File upload failed.");
         } finally {
-          setLoading(false); // Stop loading after the process is complete
+          // setLoading(false); // Stop loading after the process is complete
         }
       }
     }
@@ -86,7 +86,7 @@ export const DragDrop = () => {
             <div>Drag & Drop to Upload File</div>
             <div>OR</div>
             <label htmlFor="file">
-              <div className="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
+              <div className="cursor-pointer text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
                 Select File
               </div>
             </label>
diff --git a/web/src/app/components/InputBox.tsx b/web/src/app/components/InputBox.tsx
index 1c49a38..2edbc04 100644
--- a/web/src/app/components/InputBox.tsx
+++ b/web/src/app/components/InputBox.tsx
@@ -7,7 +7,7 @@ import { JsonValue } from "@prisma/client/runtime/library";
 import Image from "next/image";
 import logo2 from "../../../public/d.png"
 import logo from "../../../public/logo.png"
-import arrow from "../../../public/arrow.png";
+import { Send } from 'lucide-react';
 
 interface History {
   id: string;
@@ -152,9 +152,7 @@ export default function InputBox(props: Conversation) {
                 <Pause className="border border-white" />
               </div>
             ) : (
-              <div>
-                <Image src={arrow} height={40} width={40} alt="arrow" />
-              </div>
+              <Send className="" />
             )}
           </button>
         </div>
diff --git a/web/src/app/components/RemoveApi.tsx b/web/src/app/components/RemoveApi.tsx
index 347b4f9..4859147 100644
--- a/web/src/app/components/RemoveApi.tsx
+++ b/web/src/app/components/RemoveApi.tsx
@@ -1,7 +1,13 @@
 'use client'
 
+import { useToast } from "@/hooks/use-toast";
+
 export default function RemoveApi() {
+    const {toast} = useToast();
     function handleClick() {
+        toast({
+            title: "API Key Removed"
+        })
         localStorage.removeItem("apikey");
     }
     return (
diff --git a/web/src/app/components/SetApi.tsx b/web/src/app/components/SetApi.tsx
index 732badd..c5c02d1 100644
--- a/web/src/app/components/SetApi.tsx
+++ b/web/src/app/components/SetApi.tsx
@@ -2,35 +2,58 @@
 
 import { useToast } from "@/hooks/use-toast";
 import { useState } from "react";
+import {useRouter} from "next/navigation";
 
 export default function SetApi() {
-  const [apikey, setApiKey] = useState("");
+  const [apikey, setApiKey] = useState(null as string | null);
   const {toast} = useToast();
+  const router = useRouter();
+
   function onSubmit() {
     toast({
-      title: "API Key Set"
+      title: "API Key Set",
     })
-    localStorage.setItem("apikey", apikey);
+    if (apikey) {
+      localStorage.setItem("apikey", apikey);
+    }
+  }
+  function removeKey() {
+    setApiKey(null)
+    localStorage.removeItem("apikey");
+    router.refresh();
   }
   return (
     <div className="flex justify-center">
       <div className="flex flex-col gap-2">
-        <div className="text-red-500">*Get your API Key from Mistral AI</div>
-        <form className="flex flex-col justify-center gap-2 md:flex" onSubmit={onSubmit}>
-          <input
-            onChange={(e) => {
-              setApiKey(e.target.value);
-            }}
-            type="text"
-            id="first_name"
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-72 p-2.5 "
-            placeholder="Mistral API Key"
-            required
-          />
-          <button className="bg-[#1C1A35] p-2 text-white" type="submit">
-            Submit
-          </button>
-        </form>
+        {
+          ! localStorage.getItem("apikey") ? (
+            <>
+              <div className="text-red-500">*Get your API Key from Mistral AI</div>
+              <form className="flex flex-col justify-center gap-2 md:flex" onSubmit={onSubmit}>
+                <input
+                  onChange={(e) => {
+                    setApiKey(e.target.value);
+                  }}
+                  type="text"
+                  id="first_name"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-72 p-2.5 "
+                  placeholder="Mistral API Key"
+                  required
+                />
+                <button className="bg-[#1C1A35] p-2 text-white" type="submit">
+                  Submit
+                </button>
+              </form>
+            </>
+          ) : (
+            <div>
+                <button onClick={removeKey} className="bg-[#1C1A35] p-2 text-white" type="submit">
+                  Reset API Key
+                </button>
+            </div>
+          )
+        }
+
       </div>
     </div>
   );
diff --git a/web/src/app/components/SheetSide.tsx b/web/src/app/components/SheetSide.tsx
index bf76cc2..0a5d72c 100644
--- a/web/src/app/components/SheetSide.tsx
+++ b/web/src/app/components/SheetSide.tsx
@@ -31,8 +31,13 @@ export function SheetSide({ list,collectionName }: CollectionListProps) {
   const [activeCollection, setActiveCollection] = useState<string | null>(collectionName);
 
   function handleClick(CollectionName: string) {
-    setActiveCollection(CollectionName);
-    router.push(`/chat/${CollectionName}`);
+    if(localStorage.getItem("apikey") === null) {
+      alert("Please set your API Key first")
+      return
+    } else {
+      setActiveCollection(CollectionName);
+      router.push(`/chat/${CollectionName}`);
+    }
   }
 
   return (
@@ -43,7 +48,7 @@ export function SheetSide({ list,collectionName }: CollectionListProps) {
         </SheetTrigger>
         <SheetContent className="bg-[#0E0A24]" side="left">
           <div className="text-white text-3xl py-10">
-            Chat History
+            Your PDF
           </div>
           {list.map((collection) => {
             const isActive = activeCollection === collection.CollectionName;
@@ -59,7 +64,7 @@ export function SheetSide({ list,collectionName }: CollectionListProps) {
                         : 'bg-[#0E0A24] hover:bg-[#13102b]'
                     }`}
                   >
-                    <SheetTitle> {collection.pdfName.slice(0,10)+'.pdf'} </SheetTitle>
+                    <SheetTitle> {collection.pdfName.length >10 ? collection.pdfName.slice(0,10)+'.pdf' : collection.pdfName} </SheetTitle>
                   </Button>
                   <SheetDescription>
                     <DeletePdf collectionName={collection.CollectionName} />
diff --git a/web/src/app/limit-cross/page.tsx b/web/src/app/limit-cross/page.tsx
new file mode 100644
index 0000000..ba05d03
--- /dev/null
+++ b/web/src/app/limit-cross/page.tsx
@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+
+export default function ApiLimitCross() {
+  return (
+    <div className="bg-[#0E0A24] min-h-screen flex flex-col">
+      <div className="p-4">
+        <Link href="/upload" className="text-white">
+          <ArrowLeft />
+        </Link>
+      </div>
+      <div className="flex-grow flex justify-center items-center text-center text-white">
+        <div className="border rounded-xl p-14">
+          <div className="text-7xl pb-4">404</div>
+          <div className="md:text-3xl text-xl">
+            Exceeded API usage limit<br/> or <br/> Invalid API key.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/app/upload/Components/Sidebar.tsx b/web/src/app/upload/Components/Sidebar.tsx
new file mode 100644
index 0000000..08d0afe
--- /dev/null
+++ b/web/src/app/upload/Components/Sidebar.tsx
@@ -0,0 +1,29 @@
+import { SheetSide } from "@/app/components/SheetSide";
+import { auth } from "../../../../auth";
+import { prisma } from "../../lib/prisma";
+
+export async function Sidebar() {
+  const session = await auth();
+
+  const user = await prisma.user.findUnique({
+    where: {
+      email: session?.user?.email || "",
+    },
+    include: {
+      Collection: true,
+    },
+  });
+
+  const list = user?.Collection || [];
+  const collectionName = list[0]?.CollectionName;
+
+  return (
+    <>
+      {collectionName === undefined ? (
+        <div></div>
+      ) : (
+        <SheetSide list={list} collectionName={collectionName} />
+      )}
+    </>
+  );
+}
diff --git a/web/src/app/upload/page.tsx b/web/src/app/upload/page.tsx
index cf6df91..64ede26 100644
--- a/web/src/app/upload/page.tsx
+++ b/web/src/app/upload/page.tsx
@@ -1,11 +1,11 @@
 import Image from "next/image";
 import ProfileDropdown from "../components/ProfileDropdown";
-// import Upload from "../components/Upload";
 import logo from "../../../public/logo.png"
 import { auth } from "../../../auth";
 import { redirect } from "next/navigation";
 import { DragDrop } from "../components/DragDrop";
 import SetApi from "../components/SetApi";
+import { Sidebar } from "./Components/Sidebar";
 
 export default async function Page() {
     const session = await auth();
@@ -15,6 +15,7 @@ export default async function Page() {
     return (
         <div className="bg-[#0E0A24] min-h-screen text-white flex flex-col gap-20">
             <div className="flex py-7 px-2 justify-between shadow-2xl">
+                <Sidebar />
                 <Image 
                     src={logo}
                     alt="logo"
@@ -23,7 +24,6 @@ export default async function Page() {
                 />
                 <ProfileDropdown />
             </div>
-            {/* <Upload /> */}
             <DragDrop />
             <SetApi />
         </div>