diff --git a/src/components/makeSources.tsx b/src/components/makeSources.tsx
index 4314105ac1912521722ae8c2ded183003fabb91f..74565b4036de75ac90f32d599c8978c4e594102c 100644
--- a/src/components/makeSources.tsx
+++ b/src/components/makeSources.tsx
@@ -1,18 +1,123 @@
-import * as BibtexParser from 'bibtex-parser-js';
-
-interface BibTexEntry {
-  author: string;
-  title: string;
-  year: string;
-  url?: string;
-  note?: string;
-  institution?: string;
-  howpublished?: string;
+import React, { useState } from "react";
+import bibtexParse from 'bibtex-parser-js';
+
+interface BibEntry {
+  ENTRYTYPE: string;
+  title?: string;
+  author?: string;
+  journal?: string;
+  volume?: string;
+  pages?: string;
+  year?: string;
+  doi?: string;
+  [key: string]: any;
 }
 
-export function Sources{
+interface BibtexParserProps {
+  bibtexSources: string[]; // Accept an array of BibTeX strings
+}
 
+export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources }) => {
+  const [parsedEntries, setParsedEntries] = useState<BibEntry[]>([]);
 
-}
+  // Parse BibTeX on component mount or when sources change
+  // Inside the useEffect
+React.useEffect(() => {
+    try {
+      const allEntries: BibEntry[] = [];
+      bibtexSources.forEach((bibtex) => {
+        const parsed = bibtexParse.toJSON(bibtex);
+        allEntries.push(...parsed);
+      });
+      setParsedEntries(allEntries);
+    } catch (error) {
+      console.error("Error parsing BibTeX: ", error);
+      alert("An error occurred while parsing the BibTeX entries.");
+    }
+  }, [bibtexSources]);
+  
+
+  // Helper function to render authors
+  const renderAuthors = (authors: string) => {
+    const authorList = authors.split(" and ");
+    return authorList.map((author, index) => (
+      <span key={index}>
+        {author}
+        {index < authorList.length - 1 ? ", " : ""}
+      </span>
+    ));
+  };
+
+  // Helper function to render individual citations based on their type
+// Helper function to render individual citations based on their type
+const renderCitation = (entry: BibEntry, index: number) => {
+    switch (entry.ENTRYTYPE) {
+      case "article":
+        return (
+          <li key={index}>
+            <span>{renderAuthors(entry.author || "")}</span>&nbsp;
+            <span>{entry.title}</span>.&nbsp;
+            <i>{entry.journal}</i>,&nbsp;
+            <b>{entry.volume}</b>,&nbsp;
+            <span>{entry.pages}</span> ({entry.year}).&nbsp;
+            {entry.doi && (
+              <a href={`https://doi.org/${entry.doi}`}>
+                doi: {entry.doi}
+              </a>
+            )}
+          </li>
+        );
+  
+      case "book":
+        return (
+          <li key={index}>
+            <span>{renderAuthors(entry.author || entry.editor || "")}</span>&nbsp;
+            <span>{entry.title}</span>.&nbsp;
+            <i>{entry.publisher}</i>,&nbsp;{entry.year}.
+          </li>
+        );
+  
+      case "misc":
+        return (
+          <li key={index}>
+            <span>{entry.author}</span>&nbsp;
+            <span>{entry.title}</span>.&nbsp;
+            <i>{entry.howpublished}</i>,&nbsp;{entry.year}.
+          </li>
+        );
+  
+      // Handle additional entry types here
+      case "inproceedings":
+        return (
+          <li key={index}>
+            <span>{renderAuthors(entry.author || "")}</span>&nbsp;
+            <span>{entry.title}</span>. In <i>{entry.booktitle}</i>,&nbsp;
+            <b>{entry.editor}</b>, {entry.year}.
+          </li>
+        );
+  
+      case "phdthesis":
+        return (
+          <li key={index}>
+            <span>{renderAuthors(entry.author || "")}</span>&nbsp;
+            <span>{entry.title}</span>, PhD thesis, {entry.school}, {entry.year}.
+          </li>
+        );
+  
+      default:
+        return <li key={index}>Unknown entry type: {entry.ENTRYTYPE}</li>;
+    }
+  };
+  
 
+  return (
+    <div>
+      <h2>Citations</h2>
+      <ol>
+        {parsedEntries.map((entry, index) => renderCitation(entry, index))}
+      </ol>
+    </div>
+  );
+};
 
+export default BibtexParser;
diff --git a/src/contents/methods.tsx b/src/contents/methods.tsx
index 05f1f2364d7606032a553327cfc314f04c690d83..031f6bcd841f8e1f5138b15a18f1127f7351f626 100644
--- a/src/contents/methods.tsx
+++ b/src/contents/methods.tsx
@@ -1,6 +1,7 @@
 import { Section, Subesction } from "../components/sections";
 import { useTabNavigation } from "../utils/TabNavigation";
 import {H5} from "../components/Headings";
+import TestSource from "../soures/test-sources";
 
 export function Methods() {
   useTabNavigation();
@@ -92,7 +93,7 @@ export function Methods() {
           <H5 text="Importance of Safety in LNP Development"></H5>
             <p>Testing the safety of our LNPs was a critical step in their development. LNPs are increasingly being used in cutting-edge therapies, such as mRNA vaccines and targeted drug delivery systems. For these technologies to be viable, the nanoparticles must not harm the cells they are intended to interact with. The MTT and proliferation assays provided robust data, confirming the biocompatibility of our LNPs and reinforcing their potential for safe use in further research and clinical applications. </p>
           </Subesction>
-
+      <TestSource/>
         </Section>
         <Section title="References" id="References">
           <ol>
diff --git a/src/soures/test-sources.tsx b/src/soures/test-sources.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77cce4c6405bd821146fc422fc87b1ca67234a8b
--- /dev/null
+++ b/src/soures/test-sources.tsx
@@ -0,0 +1,26 @@
+import BibtexParser from "../components/makeSources";
+
+export function TestSource(){
+  const bibtexSources = [
+    `
+    @article{doe2023,
+      author = {John Doe and Jane Smith},
+      title = {A Great Paper},
+      journal = {Important Journal},
+      volume = {12},
+      pages = {123-456},
+      year = {2023},
+      doi = {10.1000/journal-doi}
+    }
+    `
+  ];
+
+  return (
+    <div>
+      <h1>BibTeX to HTML in React</h1>
+      <BibtexParser bibtexSources={bibtexSources} />
+    </div>
+  );
+}
+
+export default TestSource;
\ No newline at end of file