diff --git a/README.md b/README.md
index 3f5d62bf..7ed7926d 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Synapse is actively developed and broadened to an AI-accelerated, portable frame
 Synapse is a software platform that enables physicists to couple experimental data, simulations, and machine learning (ML) models trained on experimental and simulation data.
 As an example, the schematic below illustrates how Synapse is used at the Berkeley Lab Laser Accelerator Center (BELLA):
 
-![Synapse overview](synapse_overview.png)
+![Synapse overview](figures/synapse.png)
 
 One of the main software components is the graphical user interface (GUI), which is deployed via [Spin](https://docs.nersc.gov/services/spin/) at NERSC.
 The application requires access to various data and information sources, as described below.
diff --git a/figures/fig_bella.jpg b/figures/fig_bella.jpg
new file mode 100644
index 00000000..1e60de74
Binary files /dev/null and b/figures/fig_bella.jpg differ
diff --git a/figures/fig_dashboard_backend.jpg b/figures/fig_dashboard_backend.jpg
new file mode 100644
index 00000000..6ad5c71b
Binary files /dev/null and b/figures/fig_dashboard_backend.jpg differ
diff --git a/figures/fig_dashboard_frontend.jpg b/figures/fig_dashboard_frontend.jpg
new file mode 100644
index 00000000..ed173f54
Binary files /dev/null and b/figures/fig_dashboard_frontend.jpg differ
diff --git a/figures/fig_database.jpg b/figures/fig_database.jpg
new file mode 100644
index 00000000..54dbc533
Binary files /dev/null and b/figures/fig_database.jpg differ
diff --git a/figures/fig_ml.png b/figures/fig_ml.png
new file mode 100644
index 00000000..4bfc15ef
Binary files /dev/null and b/figures/fig_ml.png differ
diff --git a/figures/fig_perlmutter.jpg b/figures/fig_perlmutter.jpg
new file mode 100644
index 00000000..b364d9b1
Binary files /dev/null and b/figures/fig_perlmutter.jpg differ
diff --git a/figures/synapse_1.png b/figures/synapse_1.png
new file mode 100644
index 00000000..38549b99
Binary files /dev/null and b/figures/synapse_1.png differ
diff --git a/figures/synapse_1.tex b/figures/synapse_1.tex
new file mode 100644
index 00000000..ae340eea
--- /dev/null
+++ b/figures/synapse_1.tex
@@ -0,0 +1,55 @@
+% This figure can be rendered by compiling the following LaTeX document:
+%
+% \documentclass[9pt, aspectratio=169]{beamer}
+% \usetheme{metropolis}
+% \usepackage{tikz}
+% \usetikzlibrary{arrows.meta, positioning, backgrounds, fit}
+% \begin{document}
+% \begin{frame}[plain]
+%     \begin{center}
+%         \resizebox{0.8\textwidth}{!}{\input{synapse_1}}
+%     \end{center}
+% \end{frame}
+% \end{document}
+
+
+\begin{tikzpicture}[
+    txt/.style={align=center},
+    data/.style={-{Stealth[length=4pt]}, orange, dashed},
+    ctrl/.style={-{Stealth[length=4pt]}, gray, dotted},
+    api/.style={{Stealth[length=4pt]}-{Stealth[length=4pt]}, gray, dotted},
+]
+
+    \node[inner sep=0pt] (exp) {\includegraphics[width=2cm]{fig_bella.jpg}};
+    \node[txt, above=1pt of exp] (exp-label) {Experiment};
+
+    \node[inner sep=0pt, right=2cm of exp, yshift=-2cm] (db) {\includegraphics[width=2cm]{fig_database.jpg}};
+    \node[txt, above=1pt of db] (db-label) {Database};
+
+    \node[inner sep=0pt, right=2cm of db, yshift=2cm] (hpc) {\includegraphics[width=2cm]{fig_perlmutter.jpg}};
+    \node[txt, above=1pt of hpc] (hpc-label) {Supercomputer};
+
+    \node[inner sep=0pt, right=2cm of hpc, yshift=-2cm] (ml) {\includegraphics[width=2cm]{fig_ml.png}};
+    \node[txt, above=1pt of ml] (ml-label) {AI/ML Models};
+
+    \node[inner sep=0pt, below=2cm of exp] (dashfe) {\includegraphics[width=2cm]{fig_dashboard_frontend.jpg}};
+    \node[txt, below=1pt of dashfe] (dashfe-label) {Dashboard Frontend \\ (Control Room)};
+
+    \node[inner sep=0pt, below=2cm of hpc] (dashbe) {\includegraphics[width=2cm]{fig_dashboard_backend.jpg}};
+    \node[txt, below=1pt of dashbe] (dashbe-label) {Dashboard Backend \\ (Kubernetes Cluster)};
+
+    \begin{scope}[on background layer] % draw behind
+        \node[draw=gray!50, rounded corners=5pt, fill=orange!5, inner sep=10pt, fit=(exp-label)(exp)(dashfe)(dashfe-label), label={[text=gray, anchor=south] north:Experimental Site}] {};
+        \node[draw=gray!50, rounded corners=5pt, fill=orange!5, inner sep=10pt, fit=(hpc-label)(hpc)(dashbe)(dashbe-label), label={[text=gray, anchor=south] north:Computing Site}] {};
+    \end{scope}
+
+    \draw[data] (exp) -- (db) node[midway, sloped, above] {write};
+    \draw[data] (hpc) -- (db) node[midway, sloped, above] {read/write};
+    \draw[data] (hpc) -- (ml) node[midway, sloped, above] {write};
+    \draw[data] (dashbe) -- (db) node[midway, sloped, above] {read};
+    \draw[data] (dashbe) -- (ml) node[midway, sloped, above] {read};
+    \draw[ctrl] (dashbe) -- (hpc) node[midway, rotate=90, yshift=7pt] {launch};
+    \draw[ctrl] (dashfe) -- (exp) node[midway, rotate=90, yshift=7pt] {feedback};
+    \draw[api] (dashfe) -- (dashbe);
+
+\end{tikzpicture}
\ No newline at end of file
diff --git a/figures/synapse_2.png b/figures/synapse_2.png
new file mode 100644
index 00000000..473a7d48
Binary files /dev/null and b/figures/synapse_2.png differ
diff --git a/figures/synapse_2.tex b/figures/synapse_2.tex
new file mode 100644
index 00000000..4a2eaca8
--- /dev/null
+++ b/figures/synapse_2.tex
@@ -0,0 +1,50 @@
+% This figure can be rendered by compiling the following LaTeX document:
+%
+% \documentclass[9pt, aspectratio=169]{beamer}
+% \usetheme{metropolis}
+% \usepackage{tikz}
+% \usetikzlibrary{arrows.meta, positioning, backgrounds, fit}
+% \begin{document}
+% \begin{frame}[plain]
+%     \begin{center}
+%         \resizebox{0.8\textwidth}{!}{\input{synapse_2}}
+%     \end{center}
+% \end{frame}
+% \end{document}
+
+
+\begin{tikzpicture}[
+    txt/.style={align=center},
+    data/.style={-{Stealth[length=4pt]}, orange, dashed},
+    ctrl/.style={-{Stealth[length=4pt]}, gray, dotted},
+    api/.style={{Stealth[length=4pt]}-{Stealth[length=4pt]}, gray, dotted},
+]
+
+    \node[inner sep=0pt] (hpc) {\includegraphics[width=2cm]{fig_perlmutter.jpg}};
+    \node[txt, above=1pt of hpc] {Supercomputer};
+
+    \node[inner sep=0pt, below=1.5cm of hpc] (exp) {\includegraphics[width=2cm]{fig_bella.jpg}};
+    \node[txt, below=1pt of exp] {Experiment};
+
+    \node[inner sep=0pt, right=3.5cm of hpc, yshift=1.25cm] (ml) {\includegraphics[width=2cm]{fig_ml.png}};
+    \node[txt, above=1pt of ml] {AI/ML Models};
+
+    \node[inner sep=0pt, right=3.5cm of hpc, yshift=-1.25cm] (db) {\includegraphics[width=2cm]{fig_database.jpg}};
+    \node[txt, below=1pt of db] {Database};
+
+    \node[inner sep=0pt, right=8.5cm of hpc] (dashbe) {\includegraphics[width=2cm]{fig_dashboard_backend.jpg}};
+    \node[txt, above=1pt of dashbe] {Dashboard Backend};
+
+    \node[inner sep=0pt, right=8.5cm of exp] (dashfe) {\includegraphics[width=2cm]{fig_dashboard_frontend.jpg}};
+    \node[txt, below=1pt of dashfe] {Dashboard Frontend};
+
+    \draw[data] (exp) -- (db) node[midway, sloped, below] {write};
+    \draw[data] (hpc) -- (db) node[midway, sloped, below] {read/write};
+    \draw[data] (hpc) -- (ml) node[midway, sloped, below] {write};
+    \draw[data] (dashbe) -- (db) node[midway, sloped, below] {read};
+    \draw[data] (dashbe) -- (ml) node[midway, sloped, below] {read};
+    \draw[ctrl] (dashbe) to[bend right=55] node[midway, above] {launch} (hpc);
+    \draw[ctrl] (dashfe) to[bend right=-10] node[midway, below] {operator feedback} (exp);
+    \draw[api] (dashfe) -- (dashbe);
+
+\end{tikzpicture}
\ No newline at end of file
diff --git a/synapse_overview.png b/synapse_overview.png
deleted file mode 100644
index 4478f427..00000000
Binary files a/synapse_overview.png and /dev/null differ