diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index c0d731fd95093c4658dc080db97a8ea83c2a485b..69f5036e44b5a2b0f8b56a89d0ac853bb6160676 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -72,6 +72,13 @@ const handleDownload = () => {
         console.error("Error fetching the file:", error);
     });
 };
+return (
+
+  <a type="button" onClick={handleDownload} className="download-butt">
+      Download
+  </a>
+
+);
 };
 
 export const DownloadImageButton = ({ url, fileName, children}: {url: string, fileName: string, children: React.ReactNode}) => {
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index 7c2358bc0539a280f0576b8a12aa659508ebde0a..5ed64e29370c0aeee5f8f08d77c0c624a363322a 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -1,4 +1,5 @@
 
+import { DownloadImageButton } from "../components/Buttons";
 import H2 from "../components/Headings";
 import { useTabNavigation } from "../utils/TabNavigation";
 
@@ -8,27 +9,41 @@ export function Notebook() {
     <div>
       <H2 text="Lab journals and Protocol collection"/> 
       <div className='row'>
+        
         <div className="col">
+          <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-1-proof-of-concept-pe.webp" style={{height: "75%", width: "auto"}}/>
+          </DownloadImageButton>
         </div>
+
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-2-engineering-pe.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
       </div>
       <div className='row'>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-3-primary-cell-culture.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-4-lnp.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
       </div>
       <div className='row'>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-5-downstream.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
         <div className="col">
+        <DownloadImageButton url="" fileName="">
             <img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-sop.webp" style={{height: "75%", width: "auto"}}/>
+            </DownloadImageButton>
         </div>
       </div>
     </div>