diff --git a/images/bioclimatic-atlas.png b/images/bioclimatic-atlas.png
new file mode 100644
index 0000000..d3d7eca
Binary files /dev/null and b/images/bioclimatic-atlas.png differ
diff --git a/images/components.png b/images/components.png
new file mode 100644
index 0000000..9846378
Binary files /dev/null and b/images/components.png differ
diff --git a/images/engineering-shiny.jpeg b/images/engineering-shiny.jpeg
new file mode 100644
index 0000000..5bd7148
Binary files /dev/null and b/images/engineering-shiny.jpeg differ
diff --git a/images/layouts.png b/images/layouts.png
new file mode 100644
index 0000000..29736d9
Binary files /dev/null and b/images/layouts.png differ
diff --git a/images/shiny-cover.png b/images/shiny-cover.png
new file mode 100644
index 0000000..7b628ec
Binary files /dev/null and b/images/shiny-cover.png differ
diff --git a/images/shiny-logo.png b/images/shiny-logo.png
new file mode 100644
index 0000000..a9a460e
Binary files /dev/null and b/images/shiny-logo.png differ
diff --git a/images/shiny-reactive.png b/images/shiny-reactive.png
new file mode 100644
index 0000000..8a7564f
Binary files /dev/null and b/images/shiny-reactive.png differ
diff --git a/images/shiny-repo.png b/images/shiny-repo.png
new file mode 100644
index 0000000..39d3e33
Binary files /dev/null and b/images/shiny-repo.png differ
diff --git a/images/zeplacetobe.png b/images/zeplacetobe.png
new file mode 100644
index 0000000..c83dd54
Binary files /dev/null and b/images/zeplacetobe.png differ
diff --git a/index.qmd b/index.qmd
index dedc9c7..d3d19ae 100644
--- a/index.qmd
+++ b/index.qmd
@@ -49,9 +49,3 @@ engine: knitr
#| child: "sections/shiny-app.qmd"
```
-
-
-```{r}
-#| child: "sections/others.qmd"
-```
-
diff --git a/sections/shiny-app.qmd b/sections/shiny-app.qmd
index 699caec..bb6fff1 100644
--- a/sections/shiny-app.qmd
+++ b/sections/shiny-app.qmd
@@ -1,7 +1,343 @@
# {{< fa globe size=1x >}} Shiny App
+## `shiny` package
-## Shiny App
+> Shiny is an {{< fa brands r-project >}} package that makes it easy to **build interactive web applications** (apps) straight from {{< fa brands r-project >}}.
-Coming soon...
+::: {.citation}
+Source: [Mastering Shiny](https://mastering-shiny.org/preface.html)
+:::
+
+. . .
+
+
+
+
+
+**Features**
+
+- Provides a curated set of **user interface** (UI) functions that generate the HTML, CSS, and JavaScript needed for common tasks.
+
+ {{< fa circle-right >}} No knowledge of HTML, CSS, or JavaScript required
+
+. . .
+
+
+
+- Introduces a new style of programming called **reactive programming** which automatically tracks the dependencies of pieces of code.
+
+ {{< fa circle-right >}} Automatically update output if input changes
+
+
+## `shiny` package
+
+{width=50% fig-align='center'}
+
+
+
+Available at:
+
+
+
+## Structure of a Shiny App
+
+A Shiny app is contained in a single script called **`app.R`** and has three components:
+
+- a **`ui`** (user interface) object
+- a **`server()`** function
+- a call to the **`shinyApp()`** function
+
+
+
+
+:::: {.columns}
+
+::: {.column width=45%}
+```{r}
+#| echo: true
+#| eval: false
+
+## Required package ----
+
+library(shiny)
+
+
+## User interface ----
+
+ui <- *(
+ ...
+)
+
+
+## Server component ----
+
+server <- function(input, output) {
+ ...
+}
+
+
+## Create Shiny app object ----
+
+shinyApp(ui = ui, server = server)
+
+```
+:::
+
+::: {.column width=10%}
+:::
+
+::: {.column width=45%}
+:::
+
+::::
+
+
+
+
+## Structure of a Shiny App
+
+A Shiny app is contained in a single script called **`app.R`** and has three components:
+
+- a **`ui`** (user interface) object
+- a **`server()`** function
+- a call to the **`shinyApp()`** function
+
+
+
+
+:::: {.columns}
+
+::: {.column width=45%}
+```{r}
+#| echo: true
+#| eval: false
+
+## Required package ----
+
+library(shiny)
+
+
+## User interface ----
+
+ui <- *(
+ ...
+)
+
+
+## Server component ----
+
+server <- function(input, output) {
+ ...
+}
+
+
+## Create Shiny app object ----
+
+shinyApp(ui = ui, server = server)
+
+```
+:::
+
+::: {.column width=10%}
+:::
+
+::: {.column width=45%}
+
+
+```{r}
+#| echo: true
+#| eval: false
+
+## Launch the Shiny app ----
+
+runApp()
+```
+
+:::
+
+::::
+
+
+## UI Components
+
+{width=65% fig-align='left'}
+
+
+
+{{< fa circle-right >}} More information [**here**](https://shiny.posit.co/r/components/)
+
+
+
+
+## UI Layouts
+
+{width=65% fig-align='left'}
+
+
+
+{{< fa circle-right >}} More information [**here**](https://shiny.posit.co/r/layouts/)
+
+
+
+
+
+
+## Reactive programming
+
+
+{width=30% fig-align='center'}
+
+
+
+
+- User interacts with UI **inputs** (click a button, enter text, select an option, etc.)
+- The **server** handles input changes and modifies the output value
+- The server updates the UI **output**
+
+
+
+## Minimal Shiny app
+
+
+:::: {.columns}
+
+::: {.column width=50%}
+```{r}
+#| echo: true
+#| eval: false
+
+## User interface ----
+
+ui <- fluidPage(
+
+ # Application title
+ titlePanel("Old Faithful Geyser Data"),
+
+ # Sidebar with a slider input for number of bins
+ sidebarLayout(
+ sidebarPanel(
+ sliderInput("bins",
+ "Number of bins:",
+ min = 1,
+ max = 50,
+ value = 30
+ )
+ ),
+
+ # Show a plot of the generated distribution
+ mainPanel(
+ plotOutput("distPlot")
+ )
+ )
+)
+```
+:::
+
+
+::: {.column width=50%}
+```{r}
+#| echo: true
+#| eval: false
+
+## Server logic ----
+
+server <- function(input, output) {
+
+ output$distPlot <- renderPlot({
+
+ # Generate bins based on input$bins
+ x <- faithful[, 2]
+ bins <- seq(min(x), max(x), length.out = input$bins + 1)
+
+ # Draw the histogram with the specified number of bins
+ hist(x, breaks = bins, col = 'darkgray', border = 'white',
+ xlab = 'Waiting time to next eruption (in mins)',
+ main = 'Histogram of waiting times')
+ })
+}
+```
+
+
+
+```{r}
+#| echo: true
+#| eval: false
+
+## Create the application ----
+
+shinyApp(ui = ui, server = server)
+```
+:::
+
+::::
+
+
+
+
+::: {.small}
+{{< fa circle-right >}} RStudio IDE: `New Project > New Directory > Shiny Application`
+:::
+
+
+
+## Examples
+
+:::: {.columns}
+
+::: {.column width=50%}
+{width=90%}
+
+::: {.small}
+{{< fa code >}}
+
+{{< fa globe >}}
+:::
+
+:::
+
+::: {.column width=50%}
+{width=90%}
+
+::: {.small}
+{{< fa code >}}
+
+{{< fa globe >}}
+:::
+:::
+
+::::
+
+
+
+## Resources
+
+{{< fa circle-right >}} [**Shiny website**](https://shiny.posit.co/)
+
+
+
+
+:::: {.columns}
+::: {.column width=50%}
+{width=50%}
+:::
+
+::: {.column width=50%}
+{width=43%}
+:::
+
+::::
+
+:::: {.columns}
+::: {.column width=50%}
+[{{< fa circle-right >}} ]{.small}
+:::
+
+::: {.column width=50%}
+[{{< fa circle-right >}} ]{.small}
+:::
+
+::::
+
+
+# Thanks
diff --git a/sections/table-of-contents.qmd b/sections/table-of-contents.qmd
index c4345e3..6a0ac64 100644
--- a/sections/table-of-contents.qmd
+++ b/sections/table-of-contents.qmd
@@ -45,16 +45,14 @@ R package
:::
::: { .column .center width="20%"}
-{{< fa globe size=2x >}}
-Shiny App
:::
::: { .column .center width="20%"}
+{{< fa globe size=2x >}}
+Shiny App
:::
::: { .column .center width="20%"}
-{{< fa expand size=2x >}}
-Others
:::
::: { .column .center width="20%"}
diff --git a/sections/title-slide.qmd b/sections/title-slide.qmd
index c192fb5..478f37f 100644
--- a/sections/title-slide.qmd
+++ b/sections/title-slide.qmd
@@ -15,7 +15,7 @@ Sharing code & tools
:::
::: {.subtitle}
-Research compendium, R package, Shiny App & website
+Research compendium, R Package & Shiny App
:::
::: {.date}