diff --git a/src/components/Create/BasicInformation.jsx b/src/components/Create/BasicInformation.jsx
index 47a63f1..7f6c93e 100644
--- a/src/components/Create/BasicInformation.jsx
+++ b/src/components/Create/BasicInformation.jsx
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
-import Inputtag from "../InputTag/Usertag";
-import Upload from "../../assets/images/upload.svg";
-import axios from "axios";
+import InputTag from "../InputTag/Usertag";
+import DragAndDropImageUpload from "../../pages/DragAndDropImageUpload";
 
 const BasicInformation = ({
   value,
@@ -12,94 +11,32 @@ const BasicInformation = ({
   setFile,
   bannerImage,
   setbannerImage,
+  DragAndDropImageUpload,
 }) => {
   const inputRef = useRef();
 
   const handleChange = (e) => {
     setValue({ ...value, [e.target.name]: e.target.value });
   };
-
-  const UploadFile = async () => {
-    const file = inputRef.current.files[0];
-    setFile(URL.createObjectURL(file));
-
-    const formData = new FormData();
-    formData.append("image", file);
-
-    try {
-      const response = await axios.post(
-        "https://api.imgbb.com/1/upload?key=cc540dc0e2847dccaa0d727a71651587",
-        formData,
-      );
-      setbannerImage(response.data.data.display_url);
-      console.log("Image uploaded: ", response.data.data.display_url);
-    } catch (error) {
-      console.log("Error uploading image: ", error);
-    }
-  };
-
+  
   const UserImage = () => {
     return (
       <>
-        <h3 className="bg -mb-2 flex justify-start text-[#212121]">
-          Banner Image
-        </h3>
-        <div className="border-[rgba(0, 0, 0, 0.15)] flex h-[80%] w-full flex-col items-center justify-center gap-2 rounded-xl border-[2px] border-dashed bg-white md:w-full">
-          <div className="flex w-full justify-center">
-            <div className="flex h-[150px] w-[150px] justify-center rounded-full sm:h-24 sm:w-24">
-              {file ? (
-                <img
-                  src={file}
-                  alt=""
-                  className="h-full w-full rounded-full object-cover"
-                />
-              ) : (
-                <img
-                  className="cursor-pointer"
-                  src={Upload}
-                  onClick={(e) => {
-                    inputRef.current.click();
-                    e.preventDefault();
-                  }}
-                />
-              )}
-            </div>
-          </div>
-          <p className="text-gray-300">
-            {file ? null : (
-              <>
-                <h1 className="text-center text-xs font-[300] text-[#C3C3C3]">
-                  JPG, JPEG, PNG file size no more than 10MB
-                </h1>
-                <h1 className="text-center text-xs font-[400] text-[#322e2e]">
-                  Keep the image ratio to 280x180 px
-                </h1>
-              </>
-            )}
-          </p>
-          {file && (
-            <div
-              className="flex h-[20px] cursor-pointer items-center justify-center gap-1 border-b border-[#fff] text-[#717171] hover:border-[#717171]"
-              onClick={() => setFile(null)}
-            >
-              Remove <span className="text-[24px]">×</span>
-            </div>
-          )}
-          <input
-            type="file"
-            ref={inputRef}
-            name=""
-            id=""
-            onChange={UploadFile}
-            className="hidden"
+        <h3 className="bg -mb-2 flex justify-start text-[#212121]">Banner Image</h3>
+        <div className=" flex h-[80%] w-full flex-col items-center justify-center gap-2 rounded-xl border-[2px] border-dashed bg-white md:w-full">
+          <DragAndDropImageUpload
+            file={file}
+            setFile={setFile}
+            setbannerImage={setbannerImage}
           />
         </div>
       </>
     );
   };
+  
 
   return (
-    <div className="flex w-[100%] max-w-[100%] justify-center md:h-[70%] md:w-[90%] pt-4">
+    <div className="flex w-[100%] max-w-[100%] justify-center pt-4 md:h-[70%] md:w-[90%]">
       <div className="relative flex w-[70%] flex-col gap-3 rounded-xl pb-4 md:w-full md:gap-1 md:p-5 x-sm:p-0">
         <div className="w-full">
           <h2 className="text-2xl font-[500] text-[#212121]">
@@ -150,7 +87,6 @@ const BasicInformation = ({
                     type="text"
                     name="company"
                     id="name"
-                    list="companySuggestions"
                     placeholder="Company's name"
                     value={value.company}
                     onChange={handleChange}
@@ -181,27 +117,23 @@ const BasicInformation = ({
             <div className="flex flex-col gap-3 md:gap-1">
               <h4 className="text-[#212121]">Title</h4>
               <div className="flex flex-col gap-2">
-                <div className="relative flex flex-col gap-2">
-                  <div className="relative flex flex-col gap-2">
-                    <input
-                      required
-                      type="text"
-                      name="title"
-                      id="title"
-                      placeholder="Blog Title"
-                      value={value.title}
-                      onChange={handleChange}
-                      className="text-md w-full rounded-lg border-[1px] border-[#78788033] bg-white p-3 text-[#3C3C43] shadow-sm shadow-[#00000020] ring ring-transparent placeholder:text-[#3C3C4399] focus:outline-none focus:placeholder:text-[#3c3c4350] sm:p-2 sm:text-[13px] md:w-full"
-                    />
-                  </div>
-                </div>
+                <input
+                  required
+                  type="text"
+                  name="title"
+                  id="title"
+                  placeholder="Blog Title"
+                  value={value.title}
+                  onChange={handleChange}
+                  className="text-md w-full rounded-lg border-[1px] border-[#78788033] bg-white p-3 text-[#3C3C43] shadow-sm shadow-[#00000020] ring ring-transparent placeholder:text-[#3C3C4399] focus:outline-none focus:placeholder:text-[#3c3c4350] sm:p-2 sm:text-[13px] md:w-full"
+                />
               </div>
             </div>
           </div>
 
           <div className="flex h-full w-[50%] flex-col gap-3 pl-2 md:pl-0 pt-2 md:w-full">
             <UserImage />
-            <Inputtag tags={tags} setTags={setTags} />
+            <InputTag tags={tags} setTags={setTags} />
           </div>
         </div>
       </div>
diff --git a/src/pages/Create.jsx b/src/pages/Create.jsx
index 507423b..be766c9 100644
--- a/src/pages/Create.jsx
+++ b/src/pages/Create.jsx
@@ -12,6 +12,8 @@ import WriteHere from "../components/Create/WriteHere";
 import SubmittedCard from "../components/Create/SubmittedCard";
 import PreviewPage from "../components/Create/PreviewPage";
 import useErrorToast from "../hooks/useErrorToast";
+import DragAndDropImageUpload from "../pages/DragAndDropImageUpload";
+
 
 const Create = () => {
   const initialState = {
@@ -192,6 +194,7 @@ const Create = () => {
             setFile={setFile}
             bannerImage={bannerImage}
             setbannerImage={setbannerImage}
+            DragAndDropImageUpload={DragAndDropImageUpload} 
           />
         )}
         {step === 2 && <WriteHere article={article} setArticle={setArticle} />}
diff --git a/src/pages/DragAndDropImageUpload.jsx b/src/pages/DragAndDropImageUpload.jsx
new file mode 100644
index 0000000..f92a2c3
--- /dev/null
+++ b/src/pages/DragAndDropImageUpload.jsx
@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import Upload from "../../src/assets/images/upload.svg";
+
+const DragAndDropImageUpload = ({ file, setFile, setbannerImage }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = React.useRef();
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const droppedFile = e.dataTransfer.files[0];
+    if (droppedFile && droppedFile.type.startsWith("image/")) {
+      setFile(droppedFile);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setbannerImage(reader.result); // Set the image preview using base64
+      };
+      reader.readAsDataURL(droppedFile);
+    } else {
+      alert("Please drop an image file.");
+    }
+  };
+
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile && selectedFile.type.startsWith("image/")) {
+      setFile(selectedFile);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setbannerImage(reader.result); 
+      };
+      reader.readAsDataURL(selectedFile);
+    } else {
+      alert("Please select an image file.");
+    }
+  };
+
+  return (
+    <div
+      className={` ${
+        isDragging ? "border-blue-400" : "border-gray-300"
+      }`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div className="flex w-full justify-center">
+        <div className="flex h-[150px] w-[150px] justify-center rounded-full sm:h-24 sm:w-24">
+          {file ? (
+            <img
+              src={URL.createObjectURL(file)}
+              alt="Preview"
+              className="h-full w-full rounded-full object-cover"
+            />
+          ) : (
+            <img
+              className="cursor-pointer"
+              src={Upload}
+              onClick={(e) => {
+                inputRef.current.click();
+                e.preventDefault();
+              }}
+              alt="Upload"
+            />
+          )}
+        </div>
+      </div>
+      <p className="text-gray-300">
+        {file ? null : (
+          <>
+            <h1 className="text-center text-xs font-[300] text-[#C3C3C3]">
+              JPG, JPEG, PNG file size no more than 10MB
+            </h1>
+            <h1 className="text-center text-xs font-[400] text-[#322e2e]">
+              Keep the image ratio to 280x180 px
+            </h1>
+          </>
+        )}
+      </p>
+      {file && (
+        <div
+          className="flex py-5 px-0 h-[20px] cursor-pointer items-center justify-center gap-1 text-[#717171]"
+          onClick={() => setFile(null)}
+        >
+          <span
+            className="px-2 py-1 rounded-full hover:bg-red-500 hover:text-white hover:border-red-500 transition duration-200 ease-in-out"
+          >
+            Remove
+          </span>
+          <span className="text-[24px]">×</span>
+        </div>
+      )}
+
+
+      <input
+        type="file"
+        ref={inputRef}
+        name="upload"
+        onChange={handleFileChange}
+        className="hidden"
+        accept="image/*"
+      />
+    </div>
+  );
+};
+
+export default DragAndDropImageUpload;