diff --git a/docs/.vuepress/components/Contribution.vue b/docs/.vuepress/components/Contribution.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f0328c85a8df4455611d9cfc1ff9ea1f75bcf7b
--- /dev/null
+++ b/docs/.vuepress/components/Contribution.vue
@@ -0,0 +1,177 @@
+<template>
+ <div class="contribution">
+ <h1>Contribution</h1>
+
+ <h3>Connecting iGEM Past, Present, and Future</h3>
+
+ <div class="contribution-container">
+ <img
+ src="https://static.igem.wiki/teams/5306/contributionscutiesgood.png"
+ alt="Contribution Image"
+ width="300"
+ />
+ <p>
+ Our team, MSP-Maastricht, is dedicated to being an active and ongoing contributor to the iGEM community. We believe that science and engineering bridge the past and future, as all research builds on the knowledge of those who came before us. Through our contributions, we hope to facilitate knowledge transfer and collaboration, benefiting future iGEM teams and the broader SynBio community.
+ </p>
+ </div>
+
+ <h3>Our Specific Contributions</h3>
+
+ <!-- Collapsible Cards -->
+ <div class="collapsible-cards">
+
+ <!-- Vibrio Natriegens Protocol Booklet -->
+ <div class="card">
+ <h4 @click="toggleSection('protocolGuide')">
+ Vibrio Natriegens Protocol Booklet
+ <span v-if="sections.protocolGuide">â–²</span>
+ <span v-else>â–¼</span>
+ </h4>
+ <div v-if="sections.protocolGuide" class="content">
+ <p>
+ Vibrio natriegens is a fast-growing bacterium with great potential in biotechnology. We provide a comprehensive protocol guide for Vibrio natriegens to aid future iGEM teams in utilizing this chassis organism.
+ </p>
+ </div>
+ </div>
+
+ <!-- Vibrio Natriegens Snapgene Codon Optimization Table -->
+ <div class="card">
+ <h4 @click="toggleSection('codonTable')">
+ Vibrio Natriegens Snapgene Codon Optimization Table
+ <span v-if="sections.codonTable">â–²</span>
+ <span v-else>â–¼</span>
+ </h4>
+ <div v-if="sections.codonTable" class="content">
+ <p>
+ Natronaut provides a codon optimization table for Vibrio natriegens, designed to streamline gene expression with SnapGene for better genetic construct performance.
+ </p>
+ </div>
+ </div>
+
+ <!-- Registry Parts -->
+ <div class="card">
+ <h4 @click="toggleSection('registryParts')">
+ Registry Parts
+ <span v-if="sections.registryParts">â–²</span>
+ <span v-else>â–¼</span>
+ </h4>
+ <div v-if="sections.registryParts" class="content">
+ <p>
+ Our team has registered new parts in the iGEM registry, aiming to facilitate research using the ANRA pathway with or without Vibrio Natriegens.
+ </p>
+ </div>
+ </div>
+
+ <!-- Sustainable Development Booklet -->
+ <div class="card">
+ <h4 @click="toggleSection('sustainableBooklet')">
+ Sustainable Development Booklet
+ <span v-if="sections.sustainableBooklet">â–²</span>
+ <span v-else>â–¼</span>
+ </h4>
+ <div v-if="sections.sustainableBooklet" class="content">
+ <p>
+ We are currently developing a Sustainable Development Booklet that outlines how iGEM projects can align with global sustainability goals.
+ </p>
+ </div>
+ </div>
+
+ <!-- Notion Organisation Template -->
+ <div class="card">
+ <h4 @click="toggleSection('notionTemplate')">
+ Notion Organisation Template
+ <span v-if="sections.notionTemplate">â–²</span>
+ <span v-else>â–¼</span>
+ </h4>
+ <div v-if="sections.notionTemplate" class="content">
+ <p>
+ We have created a Notion template to help future iGEM teams organize and manage their projects effectively, based on our experience.
+ </p>
+ </div>
+ </div>
+
+ </div>
+
+ <h3>Conclusion</h3>
+ <p>
+ Together, these contributions aim to empower future researchers, especially iGEM teams, and promote the responsible use of synthetic biology.
+ </p>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Contribution",
+ data() {
+ return {
+ sections: {
+ protocolGuide: false,
+ codonTable: false,
+ registryParts: false,
+ sustainableBooklet: false,
+ notionTemplate: false
+ }
+ };
+ },
+ methods: {
+ toggleSection(section) {
+ this.sections[section] = !this.sections[section];
+ }
+ }
+};
+</script>
+
+<style scoped>
+.contribution-container {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.contribution-container img {
+ margin-right: 20px;
+}
+
+.contribution-container p {
+ flex: 1;
+ font-size: 1.2em;
+}
+
+.collapsible-cards {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ margin: 20px 0;
+}
+
+.card {
+ background-color: #e3f2fd;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 20px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
+}
+
+.card h4 {
+ color: #396d7e;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.card .content {
+ margin-top: 10px;
+ font-size: 1.1em;
+ color: #333;
+}
+
+h1, h3 {
+ color: #396d7e;
+}
+
+.contribution-container img {
+ border-radius: 50%;
+ border: 2px solid #396d7e;
+}
+</style>
diff --git a/docs/contribution.md b/docs/contribution.md
index 8938d8fba4ddaf38e6244a66847604a5efe5b8a6..5ff00e68fc86e685d2de4f123fee2210cfeb1000 100644
--- a/docs/contribution.md
+++ b/docs/contribution.md
@@ -1,37 +1,11 @@
---
-title: Contribution
+title: Contributions
+footer: true
---
-### Connecting iGEM Past, Present and Future
-<p style="display: flex; align-items: center;">
- <img src="https://static.igem.wiki/teams/5306/contributionscutiesgood.png" alt="" width="300" style="margin-right: 20px;"/>
- <span>
- Our team, MSP-Maastricht, is dedicated to being an active and ongoing contributor to the iGEM community. We believe that science and engineering bridge the past and future, as all research builds on the knowledge of those who came before us. A key part of this tradition is our Contributions page, which showcases the innovative solutions we are developing to tackle real-world challenges. By sharing our strategies, methodologies, and findings, we aim to enhance the accessibility and application of synthetic biology techniques. Through these contributions, we hope to facilitate knowledge transfer and collaboration, benefiting future iGEM teams and the broader SynBio community.
- </span>
-</p>
+# Our Contributions
+<ClientOnly>
+ <Contribution />
+</ClientOnly>
-### Our Specific Contributions
-
-#### 1. *Vibrio natriegens* Protocol Guide
-
-*Vibrio natriegens* is a fast-growing bacterium with great potential in biotechnology. As such, it has begun to gain popularity as a chassis organism in synthetic biology, including in iGEM. Since its use as a chassis organism is quite new, it can be difficult to consolidate protocols. To fulfill this need, we aim to provide future iGEM teams a strong foundation to build upon through our comprehensive protocol guide for *Vibrio natriegens*. This guide will provide step-by-step instructions on obtaining, culturing, manipulating, and utilizing *V. natriegens*, making it easier for other researchers to adopt this organism in their work. Additionally, the guide also includes tips and tricks we have learned through our experience working with this novel bacterium. By providing this resource, we hope to save teams valuable time and effort during the competition and beyond.
-
-#### 2. *Vibrio natriegens* Codon Optimization Table
-
-In addition to our protocol guide, Natronaut has created an easily accessable codon optimization table specifically for *Vibrio natriegens* that can be directly used in Snapgene. This table will assist researchers in selecting the most efficient codons for gene expression, optimizing the performance of genetic constructs, and improving experimental outcomes for future teams working with *V. natriegens*.
-
-#### 3. New Registry Parts
-
-Another large aspect of our contribution to the iGEM community comes from our NUMBER newly registered parts. ADD DETAILS OF THE PARTS THEMSELVES: TYPE EG. BASIC, COMPOSITE WITH NUMBER. By the registry of these parts, we aim to further expand the accessability of such parts for future iGEM teams that wish to work with the assimilatory nitrate reduction to ammonium (ANRA) pathway wihtout or with *Vibrio Natriegens* as a chassis organism. Parts also come with characteristion which can aid and provide a starting point for future teams. Furthermore we wish for such future iGEM teams to continue to characterize and build upon these newly registered iGEM parts with their own findings, truly setting the foundations for collaboration.
-
-DO A TABLE WITH OUR CATAGORIES OF PARTS AND THEIR NUMBERS
-For detailed information about Natronaut's parts please refer to the Engineering and Parts pages. LINK
-
-#### 4. Sustainable Development Booklet
-DEVY WORKING
-
-
-### Conclusion
-
-Together, these contributions aim to empower future researchers, especially iGEM teams, promote the responsible use of synthetic biology, and facilitate advancements in addressing pressing environmental issues. We believe that sharing our insights and tools will not only enhance our own project but also benefit the global iGEM community and beyond.