diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 4517e647..aa4b73d4 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -6,6 +6,7 @@ import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
 import { APIKeyData } from './types';
+import Input from '../components/Input';
 
 export default function APIKeys() {
   const { t } = useTranslation();
@@ -78,7 +79,16 @@ export default function APIKeys() {
   return (
     <div className="mt-8">
       <div className="flex flex-col max-w-[876px]">
-        <div className="flex justify-end">
+        <div className="flex justify-between">
+          <div className="p-1">
+            <Input
+              maxLength={256}
+              placeholder="Search..."
+              name="Document-search-input"
+              type="text"
+              id="document-search-input"
+            />
+          </div>
           <button
             onClick={() => setCreateModal(true)}
             className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
@@ -126,7 +136,8 @@ export default function APIKeys() {
                       <img
                         src={Trash}
                         alt="Delete"
-                        className="h-4 w-4 cursor-pointer hover:opacity-50"
+                        className="h-4 w-4 cursor-pointer opacity-60
+                        hover:opacity-100"
                         id={`img-${index}`}
                         onClick={() => handleDeleteKey(element.id)}
                       />
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index b45c968d..43528297 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -9,6 +9,7 @@ import DropdownMenu from '../components/DropdownMenu';
 import { Doc, DocumentsProps } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
+import Input from '../components/Input';
 
 // Utility function to format numbers
 const formatTokens = (tokens: number): string => {
@@ -55,6 +56,20 @@ const Documents: React.FC<DocumentsProps> = ({
     <div className="mt-8">
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
+          <div className="my-3 flex justify-between items-center ">
+            <div className="p-1">
+              <Input
+                maxLength={256}
+                placeholder="Search..."
+                name="Document-search-input"
+                type="text"
+                id="document-search-input"
+              />
+            </div>
+            <button className="rounded-full  w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]">
+              Add New
+            </button>
+          </div>
           <table className="table-default">
             <thead>
               <tr>
@@ -90,7 +105,8 @@ const Documents: React.FC<DocumentsProps> = ({
                           <img
                             src={Trash}
                             alt="Delete"
-                            className="h-4 w-4 cursor-pointer hover:opacity-50"
+                            className="h-4 w-4 cursor-pointer opacity-60
+                            hover:opacity-100"
                             id={`img-${index}`}
                             onClick={(event) => {
                               event.stopPropagation();