diff --git a/src/components/Button.tsx b/src/components/Button.tsx
deleted file mode 100644
index a078c9f..0000000
--- a/src/components/Button.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useState } from "react";
-
-// use the ? after variable to make a function parameter optional
-interface ButtonComponentProps {
-    content: string;
-    clickStay: boolean;
-    textSize: string;
-    buttonClicked?: boolean;
-}
-
-const Button: React.FC<ButtonComponentProps> = ({ content, clickStay, textSize, buttonClicked }) => {
-
-    return (
-        <>
-        <button className={`rounded-full border border-teal px-4 py-2 flex items-center gap-1 hover:bg-teal hover:text-white ${textSize} ${
-            clickStay ? "bg-teal text-white" : ""}`}>
-            {content}
-        </button>
-        </>
-    )
-}
-
-export {Button};
\ No newline at end of file
diff --git a/src/components/Dropdown.css b/src/components/Dropdown.css
deleted file mode 100644
index ed177e3..0000000
--- a/src/components/Dropdown.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.dropdownBtn {
-    background-color: white;
-    width: 30%;
-    border: 1px solid black;
-    padding: 4px 10px;
-    border-radius: 5px;
-    margin-bottom: 4px;
-
-}
\ No newline at end of file
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
deleted file mode 100644
index f0d6bfc..0000000
--- a/src/components/Dropdown.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useState } from "react";
-import List from '@mui/material/List';
-// import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import MenuItem from '@mui/material/MenuItem';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import { IoMdMore } from "react-icons/io";
-// https://mui.com/material-ui/react-select/ 
-
-const Dropdown: React.FC = () => {
-	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  	const [selectedIndex, setSelectedIndex] = useState(1);
-	
-
-	const open = Boolean(anchorEl);
-	const handleClickListItem = (event: React.MouseEvent<HTMLElement>) => {
-	  setAnchorEl(event.currentTarget);
-	};
-  
-	const handleMenuItemClick = (
-	  event: React.MouseEvent<HTMLElement>,
-	  index: number,
-	) => {
-	  setSelectedIndex(index);
-	  setAnchorEl(null);
-	};
-	
-  
-	const handleCloseMenu = () => {
-	  setAnchorEl(null);
-	};
-
-	const actionOptions = [
-		'Actions',
-		'Save Search',
-		// 'Reset',
-		'Reset CMUCal Events',
-		'Manage Saved Search',
-	  ];
-	  
-	const actionOptionsShort = [
-		'Actions',
-		'Save',
-		'Reset',
-		'Manage',
-	];
-
-	return (
-		<div className="h-10 w-3/12 float-right">
-		  <List
-			component="nav"
-			aria-label="Search Actions"
-			className="h-10 flex flex-row justify-around"
-			sx={{ bgcolor: 'background.paper'}}
-		  >
-			<ListItemText
-			  className="text-center"
-			  id="actionsBtn"
-			  primary={actionOptionsShort[selectedIndex]}
-				// secondary="placeholder"
-			/>
-			{/* <ListItemButton
-			  id="lock-button"
-			  aria-haspopup="listbox"
-			  aria-controls="lock-menu"
-			  aria-expanded={open ? 'true' : undefined}
-			  onClick={handleClickListItem}
-			> */}
-			<IconButton
-			  // className="inline-block"
-			  aria-label="more"
-			  id="long-button"
-			  // id="lock-button"
-			  // aria-haspopup="listbox"
-			  // aria-controls="lock-menu"
-			  aria-controls={open ? 'long-menu' : undefined}
-			  aria-expanded={open ? 'true' : undefined}
-			  aria-haspopup="true"
-			  onClick={handleClickListItem}
-			>
-			  <IoMdMore />
-			</IconButton>
-			  
-			{/* </ListItemButton> */}
-		  </List>
-	
-		  <Menu
-			id="lock-menu"
-			anchorEl={anchorEl}
-			open={open}
-			onClose={handleCloseMenu}
-			MenuListProps={{
-			  'aria-labelledby': 'lock-button',
-			  role: 'listbox',
-			}}
-		  >
-			{actionOptions.map((option, index) => (
-			  <MenuItem
-				key={option}
-				disabled={index === 0}
-				selected={index === selectedIndex}
-				onClick={(event) => handleMenuItemClick(event, index)}
-			  >
-				{index===0 && (<em>{option}</em>)}
-				{index != 0 && option}
-			  </MenuItem>
-			))}
-		  </Menu>
-		  
-		</div>
-	)
-}
-
-export {Dropdown};
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 6ea8fa2..a648818 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from "react";
 // search input
-import { IoSearch } from "react-icons/io5";
-import { RxCross1 } from "react-icons/rx";
 import { SearchCard, SavedSearchBtn, SearchBar } from "./index";
 import Fuse from 'fuse.js'
-import DropInData from "../../backend/scraper/drop_in.json";
 // for date picker
 import dayjs, { Dayjs } from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -19,11 +16,9 @@ import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Checkbox from '@mui/material/Checkbox';
 import { categoryListAcademics, categoryListClubs, categoryListCareer } from "../types";
 // selectable dropdown
-// import { Dropdown } from "./Dropdown";
-import { Button } from "./Button";
-
 import "react-dropdown/style.css";
 import "./Search.css";
+
 // import useSearch from "../../utils/hooks/useSearch";
 import DITData from "../../backend/scraper/drop_in.json";
 import PTData from "../../backend/scraper/peer_tutoring.json";
diff --git a/src/components/index.ts b/src/components/index.ts
index bb69988..55575fe 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,9 +1,8 @@
-export * from "./Dropdown";
 export * from "./MyCalendar";
 export * from "./Navbar";
-export * from "./Search";
-export * from "./SearchCard";
-export * from "./SecondNav";
 export * from "./Footer";
+export * from "./Search";
 export * from "./SearchBar";
 export * from "./SavedSearches";
+export * from "./SearchCard";
+export * from "./SecondNav";
diff --git a/src/pages/UploadManual.tsx b/src/pages/UploadManual.tsx
index d61ac09..b949f0c 100644
--- a/src/pages/UploadManual.tsx
+++ b/src/pages/UploadManual.tsx
@@ -2,77 +2,96 @@ import React from 'react';
 import { UploadNavBar, UploadButton } from "./index";
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { Footer } from "../components";
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
+interface InputProps {
+    title: string;
+    requiredBool: boolean;
+}
+
+const Input: React.FC<InputProps> = ({ title, requiredBool }) => {
+    return (
+        <div className="mb-4">
+            <label className="block text-gray-700">
+                {title}
+                {requiredBool && <span className="text-red">*</span>}
+            </label>
+            <input
+                type="text"
+                className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                required={requiredBool}
+            />
+        </div>
+    )
+}
+
+const Category: React.FC = () => {
+    return (
+        <div className="mb-4">
+            <label className="block text-gray-700">Event Type<span className="text-red">*</span></label>
+            <select
+                className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                required
+            >
+                <option value="">Select Event Type</option>
+                <option value="Academics">Academics</option>
+                <option value="Club">Club</option>
+                <option value="Career">Career</option>
+            </select>
+        </div>
+    )
+}
+
+const Time: React.FC = () => {
+    return (
+        <div className="mb-4">
+            <div className="flex gap-4">
+                <div className="w-1/2">
+                    <label className="block text-gray-700">From<span className="text-red">*</span></label>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DateTimePicker className="w-full" />
+                    </LocalizationProvider>
+                </div>
+                <div className="w-1/2">
+                    <label className="block text-gray-700">To<span className="text-red">*</span></label>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DateTimePicker className="w-full" />
+                    </LocalizationProvider>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+const Note: React.FC = () => {
+    return (
+        <div className="mb-4">
+            <label className="block text-gray-700">Notes</label>
+            <textarea
+                className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                rows={2}
+            ></textarea>
+
+        </div>
+    )
+}
 const UploadManual: React.FC = () => {
     return (
         <div>
             <div className="h-lvh">
-
                 <div className="flex flex-col justify-center items-center w-4/6 mx-auto relative">
                     <UploadNavBar />
-                    <div className="bg-[#F1F1F1] w-full h-[620px] px-20 pt-10">
+                    <div className="bg-[#F1F1F1] w-full h-[680px] px-20 pt-8 pb-20">
                         <form>
-                            <div className="mb-4">
-                                <label className="block text-gray-700">Course Number<span className="text-red">*</span></label>
-                                <input
-                                    type="text"
-                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                    required
-                                />
-                            </div>
-                            <div className="mb-4">
-                                <label className="block text-gray-700">Event Type<span className="text-red">*</span></label>
-                                <select
-                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                    required
-                                >
-                                    <option value="">Select Event Type</option>
-                                    <option value="Academics">Academics</option>
-                                    <option value="Club">Club</option>
-                                    <option value="Career">Career</option>
-                                </select>
-                            </div>
-                            <div className="mb-4">
-                                <div className="flex gap-4">
-                                    <div className="w-1/2">
-                                        <label className="block text-gray-700">From<span className="text-red">*</span></label>
-                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
-                                            <DateTimePicker className="w-full"/>
-                                        </LocalizationProvider>
-                                    </div>
-                                    <div className="w-1/2">
-                                        <label className="block text-gray-700">To<span className="text-red">*</span></label>
-                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
-                                            <DateTimePicker className="w-full"/>
-                                        </LocalizationProvider>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="mb-4">
-                                <label className="block text-gray-700">Location/Meeting Link<span className="text-red">*</span></label>
-                                <input
-                                    type="text"
-                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                    required
-                                />
-                            </div>
-                            <div className="mb-4">
-                                <label className="block text-gray-700">Instructor/TA</label>
-                                <input
-                                    type="text"
-                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                />
-                            </div>
-                            <div className="mb-4">
-                                <label className="block text-gray-700">Notes</label>
-                                <textarea
-                                    className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                    rows={2}
-                                ></textarea>
-                            </div>
+                            <Input title="Course Number" requiredBool={true} />
+                            <Category />
+                            <Time />
+                            <Input title="Location/Meeting Link" requiredBool={true} />
+                            <Input title="Instructor/TA" requiredBool={false} />
+                            <Input title="Location/Meeting Link" requiredBool={true} />
+                            <Note />
                             <div className="absolute bottom-5 right-20"><UploadButton /></div>
                         </form>
                     </div>