diff --git a/vignettes/cournot.PNG b/docs/articles/app.png
similarity index 100%
rename from vignettes/cournot.PNG
rename to docs/articles/app.png
diff --git a/docs/articles/codebook.html b/docs/articles/codebook.html
index 1f0e437..1094f6a 100644
--- a/docs/articles/codebook.html
+++ b/docs/articles/codebook.html
@@ -108,13 +108,13 @@ <h2 id="codebook-structure-and-output">Codebook structure and output<a class="an
 <code>Constants</code> is optional and can be turned off by using the
 argument <code>include_cons = FALSE</code>.</li>
 </ul>
-<p><img src="headings.png" style="border:1px solid" alt="Headings picture"></p>
+<p><img src="structure.png" style="border:1px solid" alt="Headings picture"></p>
 <p>Below is an example showing the structure for the
 <code>cournot</code> app, which includes all <code>Constants</code>,
 <code>Group</code>, and <code>Player</code> variables. If a class
 contains no information, the heading will still appear, along with the
 message “Empty class.”</p>
-<p><img src="cournot.png" style="border:1px solid" alt="App rankaversion information picture"></p>
+<p><img src="app.png" style="border:1px solid" alt="App rankaversion information picture"></p>
 <p>If the default codebook design does not meet your needs, you can
 create your own by selecting <code>output = "list"</code>. This will
 return all the information in list format, which you can then use in
diff --git a/docs/articles/intro.PNG b/docs/articles/otreedata.png
similarity index 100%
rename from docs/articles/intro.PNG
rename to docs/articles/otreedata.png
diff --git a/vignettes/headings.png b/docs/articles/structure.png
similarity index 100%
rename from vignettes/headings.png
rename to docs/articles/structure.png
diff --git a/docs/articles/title.PNG b/docs/articles/titles.png
similarity index 100%
rename from docs/articles/title.PNG
rename to docs/articles/titles.png
diff --git a/docs/pkgdown.yml b/docs/pkgdown.yml
index 07146d9..4e96b81 100644
--- a/docs/pkgdown.yml
+++ b/docs/pkgdown.yml
@@ -4,7 +4,7 @@ pkgdown_sha: ~
 articles:
   codebook: codebook.html
   intro_to_gmoTree: intro_to_gmoTree.html
-last_built: 2024-09-22T22:04Z
+last_built: 2024-09-22T22:13Z
 urls:
   reference: https://zauchnerp.github.io/gmoTree/reference
   article: https://zauchnerp.github.io/gmoTree/articles
diff --git a/vignettes/app.png b/vignettes/app.png
new file mode 100644
index 0000000..1d12417
Binary files /dev/null and b/vignettes/app.png differ
diff --git a/vignettes/codebook.Rmd b/vignettes/codebook.Rmd
index 2b13244..21aac5a 100644
--- a/vignettes/codebook.Rmd
+++ b/vignettes/codebook.Rmd
@@ -28,11 +28,11 @@ The output is structured with clear headings:
 - Heading Level 1: Represents each app in the oTree data.
 - Heading Level 2: `Group` and `Player` variables, categorized within each app. Showing the class `Constants` is optional and can be turned off by using the argument `include_cons = FALSE`.
 
-<img src= "headings.png" style = "border:1px solid" alt="Headings picture">
+<img src= "structure.png" style = "border:1px solid" alt="Headings picture">
 
 Below is an example showing the structure for the `cournot` app, which includes all `Constants`, `Group`, and `Player` variables. If a class contains no information, the heading will still appear, along with the message "Empty class."
 
-<img src="cournot.png" style = "border:1px solid" alt="App rankaversion information picture">
+<img src="app.png" style = "border:1px solid" alt="App rankaversion information picture">
 
 If the default codebook design does not meet your needs, you can create your own by selecting `output = "list"`. This will return all the information in list format, which you can then use in `R Markdown` to design your own custom codebook. Below is an example of a section of the list output for the `cournot` app.
 
@@ -130,7 +130,7 @@ str(cbook, 1)
 
 By setting the `preamb = TRUE` parameter, a predefined description of oTree data is inserted at the beginning of the codebook, explaining how experimental data is stored by oTree.
 
-<img src= "intro.png" style = "border:1px solid" alt="Introduction to oTree data picture">
+<img src= "otreedata.png" style = "border:1px solid" alt="Introduction to oTree data picture">
 
 # Customizing how the codebook is shown
 
@@ -148,7 +148,7 @@ codebook(
 )
 ```
 
-<img src="title.png" style = "border:1px solid" alt="Title picture">
+<img src="titles.png" style = "border:1px solid" alt="Title picture">
 
 ## Sorting the code
 
diff --git a/vignettes/structure.png b/vignettes/structure.png
new file mode 100644
index 0000000..fe23ee0
Binary files /dev/null and b/vignettes/structure.png differ