diff --git a/content/papers.html b/content/papers.html
index 8d65f45e..c5180d3d 100644
--- a/content/papers.html
+++ b/content/papers.html
@@ -3,6 +3,7 @@ title: "Papers"
 date: 2019-09-30 11:30
 draft: false
 ---
+<link rel="stylesheet" type="text/css" href="/css/paper.css" />
 <script src="/scripts/data.js" type="text/javascript"></script>
 <script src="/scripts/loadAllData.js" type="text/javascript"></script>
 <script src="/scripts/getFullDataPath.js" type="text/javascript"></script>
@@ -14,21 +15,61 @@ draft: false
 <script>
   window.onload = async function () {
     var div=document.getElementById("papers_div")
-    var Cite = require("citation-js")
-    var dois =uniq(Object.values(await loadAllData()).flat().map(d => d.DOI))
-    for (doi of dois) {
-      var publi = await Cite.async(doi.string)
-      var output = publi.format('bibliography', {
-        format: 'html',
-        template: 'apa',
-        lang: 'en-US'
-      })
-      lnk = document.createElement("a")
-      lnk.innerHTML = output
-      lnk.target = '_blank'
-      lnk.href = doi.url
-      div.appendChild(lnk)
-    }
+    const Cite = require("citation-js")
+    const dois =uniq(Object.values(await loadAllData()).flat().map(d => d.DOI.string))
+    const publiscite = await Cite.async(dois)
+    const publis=publiscite.format('data', {format: 'object'})
+    for (const publi of publis){
+      const art=document.createElement("article")
+      art.className="paper"
+      const titlelink=document.createElement("a")
+      const titleh=document.createElement("h1")
+      titleh.innerText=publi.title
+      titlelink.appendChild(titleh)
+      titlelink.href=publi.URL     
+      art.appendChild(titlelink)
+      const authors=publi.author
+      const ulauths=document.createElement("ul")
+      ulauths.className="authors-list"
+      for(const author of authors){
+        const liauth=document.createElement("li")
+        const spanAuth=document.createElement("span")
+        spanAuth.innerText=String.raw`${author.given} ${author.family}`
+        liauth.appendChild(spanAuth)
+        if(author.sequence==="first"){
+          star=document.createElement("strong")
+          star.innerText="*"
+          liauth.appendChild(star)
+        }
+        var notifycontent=document.createElement("div")
+        for(const a of author.affiliation){
+          var div=document.createElement("div")
+          div.innerText=a.name
+          notifycontent.className="author-info"
+          notifycontent.appendChild(div)
+        }
+        if(author["authenticated-orcid"]){
+          const html=$.parseHTML(String.raw`<div class="orcid-id"><a href="https://orcid.org" target="_blank"><img alt="ORCID logo" src="https://orcid.org/sites/default/files/images/orcid_16x16.png" width="16" height="16"/></a> <a href="${author.ORCID}" target="_blank">${author.ORCID} </a></div>`)
+          notifycontent.appendChild(html[0])
+        }
+        tippy(spanAuth, {
+         content: notifycontent,
+         theme: 'light',
+         interactive: true,
+        });
+        ulauths.appendChild(liauth)
+      }
+      art.appendChild(ulauths)
+      const journaldiv=document.createElement("div")
+      journaldiv.innerText=(("container-title-short" in publi) ? publi["container-title-short"] : publi["container-title"])
+      journaldiv.innerText+=publi.issued["date-parts"][0][0]
+      journaldiv.innerHTML+=String.raw` ${publi.volume}(${publi.issue}), ${publi.page}`
+      art.appendChild(journaldiv)
+      const doilink=document.createElement("a")
+      doilink.href=publi.URL
+      doilink.innerText=String.raw`DOI: ${publi.URL}`
+      document.getElementById("papers_div").appendChild(art)
+    }    
   }
 </script>
 <div id="papers_div">
diff --git a/layouts/partials/head_custom.html b/layouts/partials/head_custom.html
index c9547651..5935e8b0 100644
--- a/layouts/partials/head_custom.html
+++ b/layouts/partials/head_custom.html
@@ -1,3 +1,7 @@
+<script src="https://unpkg.com/popper.js@1"></script>
+<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />
+<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/themes/light.css" />
+<script src="https://unpkg.com/tippy.js@5"></script>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <script type="text/javascript" id="MathJax-script" async
   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
diff --git a/static/css/paper.css b/static/css/paper.css
new file mode 100644
index 00000000..6179dda5
--- /dev/null
+++ b/static/css/paper.css
@@ -0,0 +1,47 @@
+.paper h1 {
+  font-size: 20pt
+}
+
+.paper ul.authors-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 0
+}
+
+.paper ul.authors-list li{
+  display: inline
+}
+
+.paper ul.authors-list li strong.star{
+  font-weight: bold;
+}
+
+.paper ul.authors-list li:after
+{
+  content: ", "
+}
+
+.paper ul.authors-list li:nth-last-child(2):after
+{
+  content: " and "
+}
+
+.paper ul.authors-list li:last-child:after
+{
+  content: ""
+}
+
+.orcid-id img {
+  vertical-align: middle;
+  float: left;
+  margin-right: 4px;
+}
+
+.orcid-id a {
+  vertical-align: middle;
+  display: inline;
+}
+.author-info {
+  font-size: 18x
+}
\ No newline at end of file