diff --git a/nanoday2024poster/Co/Co.html b/nanoday2024poster/Co/Co.html
new file mode 100644
index 0000000..37b77c0
--- /dev/null
+++ b/nanoday2024poster/Co/Co.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Co in ZnS</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .section {
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .section-header {
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .section-header::after {
+    content: '-';
+    position: absolute;
+    top: 50%;
+    right: 20%;
+    transform: translateY(-50%);
+    transition: transform 0.3s ease;
+  }
+
+  .section-header.collapsed::after {
+    content: '+';
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  .section-content {
+    padding: 10px;
+    display: none;
+  }
+
+  .section-content img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  .home-button {
+    display: block;
+    width: 100px;
+    margin: 20px auto;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 5px;
+  }
+
+  .home-button:hover {
+    background-color: #0056b3;
+  }
+
+  .divider {
+    border-top: 2px solid #ddd;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <a href="../" class="home-button">Home</a>
+  <h1>Co in ZnS</h1>
+  <div class="divider"></div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Defect Formation Energy</div>
+    <div class="section-content">
+      <p>Demo text for Section 1</p>
+      <img src="dfe.png" alt="Example Image 1">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Relaxation of various charge states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Co_in_ZnS.q0.gif" alt="Example Image 2">
+    </div>
+  </div>
+
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Density of states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Co_in_ZnS_dos.q0.png" alt="Example Image 2">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Data</div>
+    <div class="section-content">
+      <p>Demo text for Section 3</p>
+      <table>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  function toggleSection(header) {
+    var content = header.nextElementSibling;
+    content.style.display = content.style.display === 'block' ? 'none' : 'block';
+    header.classList.toggle('collapsed');
+  }
+</script>
+</body>
+</html>
diff --git a/nanoday2024poster/Co/dfe.png b/nanoday2024poster/Co/dfe.png
new file mode 100644
index 0000000..d1cfbee
Binary files /dev/null and b/nanoday2024poster/Co/dfe.png differ
diff --git a/nanoday2024poster/Cu/Cu.html b/nanoday2024poster/Cu/Cu.html
new file mode 100644
index 0000000..aca59c9
--- /dev/null
+++ b/nanoday2024poster/Cu/Cu.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cu in ZnS</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .section {
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .section-header {
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .section-header::after {
+    content: '-';
+    position: absolute;
+    top: 50%;
+    right: 20%;
+    transform: translateY(-50%);
+    transition: transform 0.3s ease;
+  }
+
+  .section-header.collapsed::after {
+    content: '+';
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  .section-content {
+    padding: 10px;
+    display: none;
+  }
+
+  .section-content img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  .home-button {
+    display: block;
+    width: 100px;
+    margin: 20px auto;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 5px;
+  }
+
+  .home-button:hover {
+    background-color: #0056b3;
+  }
+
+  .divider {
+    border-top: 2px solid #ddd;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <a href="../" class="home-button">Home</a>
+  <h1>Cu in ZnS</h1>
+  <div class="divider"></div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Defect Formation Energy</div>
+    <div class="section-content">
+      <p>Demo text for Section 1</p>
+      <img src="dfe.png" alt="Example Image 1">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Relaxation of various charge states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Cu_in_ZnS.q0.gif" alt="Example Image 2">
+    </div>
+  </div>
+
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Density of states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Cu_in_ZnS_dos.q0.png" alt="Example Image 2">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Data</div>
+    <div class="section-content">
+      <p>Demo text for Section 3</p>
+      <table>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  function toggleSection(header) {
+    var content = header.nextElementSibling;
+    content.style.display = content.style.display === 'block' ? 'none' : 'block';
+    header.classList.toggle('collapsed');
+  }
+</script>
+</body>
+</html>
diff --git a/nanoday2024poster/Fe/Fe.html b/nanoday2024poster/Fe/Fe.html
new file mode 100644
index 0000000..d739cf0
--- /dev/null
+++ b/nanoday2024poster/Fe/Fe.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Fe in ZnS</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .section {
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .section-header {
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .section-header::after {
+    content: '-';
+    position: absolute;
+    top: 50%;
+    right: 20%;
+    transform: translateY(-50%);
+    transition: transform 0.3s ease;
+  }
+
+  .section-header.collapsed::after {
+    content: '+';
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  .section-content {
+    padding: 10px;
+    display: none;
+  }
+
+  .section-content img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  .home-button {
+    display: block;
+    width: 100px;
+    margin: 20px auto;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 5px;
+  }
+
+  .home-button:hover {
+    background-color: #0056b3;
+  }
+
+  .divider {
+    border-top: 2px solid #ddd;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <a href="../" class="home-button">Home</a>
+  <h1>Fe in ZnS</h1>
+  <div class="divider"></div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Defect Formation Energy</div>
+    <div class="section-content">
+      <p>Demo text for Section 1</p>
+      <img src="dfe.png" alt="Example Image 1">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Relaxation of various charge states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Fe_in_ZnS.q0.gif" alt="Example Image 2">
+    </div>
+  </div>
+
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Density of states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Fe_in_ZnS_dos.q0.png" alt="Example Image 2">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Data</div>
+    <div class="section-content">
+      <p>Demo text for Section 3</p>
+      <table>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  function toggleSection(header) {
+    var content = header.nextElementSibling;
+    content.style.display = content.style.display === 'block' ? 'none' : 'block';
+    header.classList.toggle('collapsed');
+  }
+</script>
+</body>
+</html>
diff --git a/nanoday2024poster/Fe/dfe.png b/nanoday2024poster/Fe/dfe.png
new file mode 100644
index 0000000..ffb6100
Binary files /dev/null and b/nanoday2024poster/Fe/dfe.png differ
diff --git a/nanoday2024poster/Ni/Ni.html b/nanoday2024poster/Ni/Ni.html
new file mode 100644
index 0000000..b326f4a
--- /dev/null
+++ b/nanoday2024poster/Ni/Ni.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Ni in ZnS</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .section {
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .section-header {
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .section-header::after {
+    content: '-';
+    position: absolute;
+    top: 50%;
+    right: 20%;
+    transform: translateY(-50%);
+    transition: transform 0.3s ease;
+  }
+
+  .section-header.collapsed::after {
+    content: '+';
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  .section-content {
+    padding: 10px;
+    display: none;
+  }
+
+  .section-content img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  .home-button {
+    display: block;
+    width: 100px;
+    margin: 20px auto;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 5px;
+  }
+
+  .home-button:hover {
+    background-color: #0056b3;
+  }
+
+  .divider {
+    border-top: 2px solid #ddd;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <a href="../" class="home-button">Home</a>
+  <h1>Ni in ZnS</h1>
+  <div class="divider"></div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Defect Formation Energy</div>
+    <div class="section-content">
+      <p>Demo text for Section 1</p>
+      <img src="dfe.png" alt="Example Image 1">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Relaxation of various charge states</div>
+    <div class="section-content">
+      <p>q=0</p>
+      <img src="Ni_in_ZnS_q0.gif" alt="Example Image 2">
+    </div>
+  </div>
+
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Density of states</div>
+    <div class="section-content">
+      <p>Demo text for Section 2</p>
+      <img src="Ni_in_ZnS_dos.q0.png" alt="Example Image 2">
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="section-header collapsed" onclick="toggleSection(this)">Data</div>
+    <div class="section-content">
+      <p>Demo text for Section 3</p>
+      <table>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  function toggleSection(header) {
+    var content = header.nextElementSibling;
+    content.style.display = content.style.display === 'block' ? 'none' : 'block';
+    header.classList.toggle('collapsed');
+  }
+</script>
+</body>
+</html>
diff --git a/nanoday2024poster/Ni/Ni_in_ZnS_q0.gif b/nanoday2024poster/Ni/Ni_in_ZnS_q0.gif
new file mode 100644
index 0000000..5aa703b
Binary files /dev/null and b/nanoday2024poster/Ni/Ni_in_ZnS_q0.gif differ
diff --git a/nanoday2024poster/Ni/dfe.png b/nanoday2024poster/Ni/dfe.png
new file mode 100644
index 0000000..5f48f28
Binary files /dev/null and b/nanoday2024poster/Ni/dfe.png differ
diff --git a/nanoday2024poster/index.html b/nanoday2024poster/index.html
index 9c98c4d..113e044 100644
--- a/nanoday2024poster/index.html
+++ b/nanoday2024poster/index.html
@@ -47,10 +47,10 @@
 <div class="button-container">
     <h1> Transition metal dopants in the wide band gap semiconductor ZnS: a first-principles study </h1>
 
-  <button class="button" onclick="openPage('cu')">Cu</button>
-  <button class="button" onclick="openPage('co')">Co</button>
-  <button class="button" onclick="openPage('ni')">Ni</button>
-  <button class="button" onclick="openPage('fe')">Fe</button>
+  <button class="button" onclick="openPage('Cu/Cu')">Cu</button>
+  <button class="button" onclick="openPage('Co/Co')">Co</button>
+  <button class="button" onclick="openPage('Ni/Ni')">Ni</button>
+  <button class="button" onclick="openPage('Fe/Fe')">Fe</button>
 </div>
 
 <script>
