diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index f0f82ba..8043f76 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -34,7 +34,8 @@ import VideoPreview from './previews/VideoPreview'
 import PDFPreview from './previews/PDFPreview'
 import URLPreview from './previews/URLPreview'
 import DefaultPreview from './previews/DefaultPreview'
-import { PreviewContainer } from './previews/Containers'
+import { DownloadBtnContainer, PreviewContainer } from './previews/Containers'
+import DownloadButtonGroup from './DownloadBtnGtoup'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -545,10 +546,15 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
       switch (extensions[fileExtension]) {
         case preview.image:
           return (
-            <PreviewContainer>
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img className="mx-auto" src={downloadUrl} alt={fileName} />
-            </PreviewContainer>
+            <>
+              <PreviewContainer>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img className="mx-auto" src={downloadUrl} alt={fileName} />
+              </PreviewContainer>
+              <DownloadBtnContainer>
+                <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
+              </DownloadBtnContainer>
+            </>
           )
 
         case preview.text:
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 5b24c9e..8dbedd5 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -50,17 +50,21 @@ const Navbar = () => {
 
       <SearchModal searchOpen={searchOpen} setSearchOpen={setSearchOpen} />
 
-      <div className="flex items-center justify-between w-full mx-auto px-4 py-1">
+      <div className="flex items-center space-x-4 justify-between w-full mx-auto px-4 py-1">
         <Link href="/" passHref>
-          <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
+          <a className="dark:text-white hover:opacity-80 flex items-center py-2 md:p-2 space-x-2">
             <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
             <span className="sm:block hidden font-bold">{siteConfig.title}</span>
           </a>
         </Link>
 
-        <div className="flex items-center space-x-4 text-gray-700">
-          <button className="dark:text-white hover:opacity-80" onClick={openSearchBox}>
+        <div className="flex items-center flex-1 md:flex-initial space-x-4 text-gray-700">
+          <button
+            className="flex-1 flex items-center space-x-2 rounded-lg bg-gray-100 dark:bg-gray-800 md:w-40 px-2.5 py-1.5 dark:text-white hover:opacity-80"
+            onClick={openSearchBox}
+          >
             <FontAwesomeIcon icon="search" />
+            <span className="text-sm font-medium">Search ...</span>
           </button>
 
           {siteConfig.links.length !== 0 &&
diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx
index c04a7cc..dcf6196 100644
--- a/components/SearchModal.tsx
+++ b/components/SearchModal.tsx
@@ -62,7 +62,7 @@ function SearchModal({
 
   return (
     <Transition appear show={searchOpen} as={Fragment}>
-      <Dialog as="div" className="inset-0 z-50 fixed overflow-y-auto" onClose={closeSearchBox}>
+      <Dialog as="div" className="inset-0 z-[200] fixed overflow-y-auto" onClose={closeSearchBox}>
         <div className="min-h-screen text-center px-4">
           <Transition.Child
             as={Fragment}
@@ -85,7 +85,7 @@ function SearchModal({
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <div className="border rounded border-gray-400/30 shadow-xl my-20 text-left w-full max-w-3xl transform transition-all inline-block overflow-hidden ">
+            <div className="border rounded border-gray-400/30 shadow-xl my-12 text-left w-full max-w-3xl transform transition-all inline-block overflow-hidden">
               <Dialog.Title
                 as="h3"
                 className="flex items-center space-x-4 dark:text-white border-b bg-gray-50 border-gray-400/30 p-4 dark:bg-gray-800"
@@ -102,7 +102,7 @@ function SearchModal({
                 <div className="px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 font-medium text-xs">ESC</div>
               </Dialog.Title>
 
-              <div className="bg-white dark:text-white dark:bg-gray-900">
+              <div className="bg-white dark:text-white dark:bg-gray-900 max-h-[80vh] overflow-x-hidden overflow-y-scroll">
                 {results.loading && (
                   <div className="text-center px-4 py-12 text-sm font-medium">
                     <LoadingIcon className="animate-spin w-4 h-4 mr-2 inline-block svg-inline--fa" />
diff --git a/pages/api/search.ts b/pages/api/search.ts
index 61e1853..1a9cff6 100644
--- a/pages/api/search.ts
+++ b/pages/api/search.ts
@@ -3,7 +3,6 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 
 import { encodePath, getAccessToken } from '.'
 import apiConfig from '../../config/api.json'
-import siteConfig from '../../config/site.json'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   // Get access token from storage
@@ -22,7 +21,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         headers: { Authorization: `Bearer ${accessToken}` },
         params: {
           select: 'id,name,file,folder,parentReference',
-          top: '10',
         },
       })
       res.status(200).json(data.value)