diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 36fd79d773731f5e0490259266b12bd42b2dc47d..3b6c30751c0faa3223747d28234dbb7728cc1a46 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -183,7 +183,10 @@ export function Engineering() {
</p>
</div>
<div className='col-4'>
- <img src="https://static.igem.wiki/teams/5247/engineering-cycle/pe2-open.svg" alt="PE2 Prime Editor"/>
+ <figure>
+ <img src="https://static.igem.wiki/teams/5247/engineering-cycle/pe2-open.svg" alt="PE2 Prime Editor"/>
+ <figcaption><b>Figure 1: Illustration of PE2 Prime Editor</b> </figcaption>
+ </figure>
</div>
</div>
<div className='row align-items-center'>
@@ -206,8 +209,8 @@ export function Engineering() {
</p>
</div>
<div className='col-4'>
- <img src="https://static.igem.wiki/teams/5247/engineering-cycle/pe4-open.svg" alt="PE4 Prime Editor"/>
- <img src="https://static.igem.wiki/teams/5247/engineering-cycle/pe5-open.svg" alt="PE5 Prime Editor"/>
+ <img src="https://static.igem.wiki/teams/5247/engineering-cycle/pe4-open-new.svg" alt="PE4 Prime Editor"/>
+ <img src="https://static.igem.wiki/teams/5247/engineering-cycle/pe5-open-new.svg" alt="PE5 Prime Editor"/>
</div>
</div>
<div className='row align-items-center'>
@@ -333,6 +336,79 @@ export function Engineering() {
</div>
</section>
</div>
+ <div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
+ <section id="pegRNA sec" >
+ <div className="eng-box box" >
+ <H3 id="pegRNA" text="pegRNA"></H3>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg1">
+ <h3>peg1</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg2">
+ <h3>peg2</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg3">
+ <h3>peg3</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg4">
+ <h3>peg4</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg5">
+ <h3>peg5</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg6">
+ <h3>peg6</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <div className="box" >
+ <p id="peg7">
+ <h3>peg7</h3>
+ <LoremShort></LoremShort>
+ </p>
+ <p><LoremShort></LoremShort></p>
+ <p><LoremShort></LoremShort></p>
+ </div>
+ <br/>
+ <div className="row ">
+ <div className="col">
+ <div className="left"><ButtonOneEngineering label="Previous" open="nikase" scrollToId="Nikase"/></div>
+ </div>
+ <div className="col button-left">
+ <div className="right"><ButtonOneEngineering label="Next" open="delivery" scrollToId="Delivery"/></div>
+ </div>
+ </div>
+ </section>
+ </div>
<div className="enginneeringtab" id="tab-nikase" style={{display: "none"}}>
<section id="Nikase sec" >
<div className="eng-box box" >
@@ -458,71 +534,6 @@ export function Engineering() {
</div>
</section>
</div>
- <div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
- <section id="pegRNA sec" >
- <div className="eng-box box" >
- <H3 id="pegRNA" text="pegRNA"></H3>
- <p><LoremShort></LoremShort></p>
- </div>
- <div className="box" >
- <p id="peg1">
- <h3>peg1</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
- <div className="box" >
- <p id="peg2">
- <h3>peg2</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
- <div className="box" >
- <p id="peg3">
- <h3>peg3</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
- <div className="box" >
- <p id="peg4">
- <h3>peg4</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
- <div className="box" >
- <p id="peg5">
- <h3>peg5</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
- <div className="box" >
- <p id="peg6">
- <h3>peg6</h3>
- <LoremShort></LoremShort>
- </p>
- <p><LoremShort></LoremShort></p>
- <p><LoremShort></LoremShort></p>
- </div>
- <br/>
- <div className="row ">
- <div className="col">
- <div className="left"><ButtonOneEngineering label="Previous" open="nikase" scrollToId="Nikase"/></div>
- </div>
- <div className="col button-left">
- <div className="right"><ButtonOneEngineering label="Next" open="delivery" scrollToId="Delivery"/></div>
- </div>
- </div>
- </section>
- </div>
<div className="enginneeringtab" id="tab-delivery" style={{display: "none"}}>
<section id="Delivery sec" >
<div className="eng-box box" >
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 255962ebf1eae863d62047644ae0159e8757475c..d1cd12f42b03c96048cf83262d648050f84758a0 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -93,30 +93,33 @@ export function EngSide(){
</a>
</div>
<div>
- <a onClick={openThem({it: "nikase", scrollToId: "Nikase"})}>
+ <a onClick={openThem({it: "pegrna", scrollToId: "pegRNA"})}>
<div className="detail-sideitem">
- <div id="parent-nikase" className="sideitem">
- <summary>Nikase</summary>
- <span id="nikase" className="sidesubtab" style={{display: "none"}}>
+ <div id="parent-pegrna" className="sideitem">
+ <summary>pegRNA</summary>
+ <span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
<span id="subtitle10" className='sideitem'>Iteration 4</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
<span id="subtitle11" className='sideitem'>Iteration 5</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
<span id="subtitle12" className='sideitem'>Iteration 6</span>
</a></li>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg7"})}>
+ <span id="subtitle13" className='sideitem'>Iteration 7</span>
+ </a></li>
</ul>
</span>
</div>
@@ -124,29 +127,29 @@ export function EngSide(){
</a>
</div>
<div>
- <a onClick={openThem({it: "pegrna", scrollToId: "pegRNA"})}>
+ <a onClick={openThem({it: "nikase", scrollToId: "Nikase"})}>
<div className="detail-sideitem">
- <div id="parent-pegrna" className="sideitem">
- <summary>pegRNA</summary>
- <span id="pegrna" className="sidesubtab" style={{display: "none"}}>
+ <div id="parent-nikase" className="sideitem">
+ <summary>Nikase</summary>
+ <span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
- <span id="subtitle13" className='sideitem'>Iteration 1</span>
+ <li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
+ <span id="subtitle14" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
- <span id="subtitle14" className='sideitem'>Iteration 2</span>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
+ <span id="subtitle15" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
- <span id="subtitle15" className='sideitem'>Iteration 3</span>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
+ <span id="subtitle16" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
- <span id="subtitle16" className='sideitem'>Iteration 4</span>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
+ <span id="subtitle17" className='sideitem'>Iteration 4</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
- <span id="subtitle17" className='sideitem'>Iteration 6</span>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
+ <span id="subtitle18" className='sideitem'>Iteration 5</span>
</a></li>
- <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
- <span id="subtitle18" className='sideitem'>Iteration 7</span>
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
+ <span id="subtitle19" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
</span>
@@ -162,19 +165,19 @@ export function EngSide(){
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
- <span id="subtitle19" className='sideitem'>Iteration 1</span>
+ <span id="subtitle21" className='sideitem'>Iteration 1</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
- <span id="subtitle20" className='sideitem'>Iteration 2</span>
+ <span id="subtitle22" className='sideitem'>Iteration 2</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
- <span id="subtitle21" className='sideitem'>Iteration 3</span>
+ <span id="subtitle23" className='sideitem'>Iteration 3</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del4"})}>
- <span id="subtitle22" className='sideitem'>Iteration 4</span>
+ <span id="subtitle24" className='sideitem'>Iteration 4</span>
</a></li>
<li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del5"})}>
- <span id="subtitle23" className='sideitem'>Outlook</span>
+ <span id="subtitle25" className='sideitem'>Outlook</span>
</a></li>
</ul>
</span>