diff --git a/project-report/project-report.pdf b/project-report/project-report.pdf
index a0bb68d..1fb6ca7 100644
Binary files a/project-report/project-report.pdf and b/project-report/project-report.pdf differ
diff --git a/project-report/src/images/home-frame-design.png b/project-report/src/images/home-frame-design.png
new file mode 100644
index 0000000..1862b13
Binary files /dev/null and b/project-report/src/images/home-frame-design.png differ
diff --git a/project-report/src/images/hyper-parameter-frame-design.png b/project-report/src/images/hyper-parameter-frame-design.png
new file mode 100644
index 0000000..cba30aa
Binary files /dev/null and b/project-report/src/images/hyper-parameter-frame-design.png differ
diff --git a/project-report/src/images/load-model-frame-design.png b/project-report/src/images/load-model-frame-design.png
new file mode 100644
index 0000000..eb45003
Binary files /dev/null and b/project-report/src/images/load-model-frame-design.png differ
diff --git a/project-report/src/images/testing-frame-design.png b/project-report/src/images/testing-frame-design.png
new file mode 100644
index 0000000..d619ec6
Binary files /dev/null and b/project-report/src/images/testing-frame-design.png differ
diff --git a/project-report/src/images/training-frame-1-design.png b/project-report/src/images/training-frame-1-design.png
new file mode 100644
index 0000000..c9a8122
Binary files /dev/null and b/project-report/src/images/training-frame-1-design.png differ
diff --git a/project-report/src/images/training-frame-2-design.png b/project-report/src/images/training-frame-2-design.png
new file mode 100644
index 0000000..c467c7f
Binary files /dev/null and b/project-report/src/images/training-frame-2-design.png differ
diff --git a/project-report/src/latex/design.tex b/project-report/src/latex/design.tex
index 2bcfd63..ea0cd31 100644
--- a/project-report/src/latex/design.tex
+++ b/project-report/src/latex/design.tex
@@ -121,9 +121,60 @@ \subsection{Queries}
     \end{minted}
 \end{itemize}
 
-\subsection{Human-Computer Interaction TODO}
+\subsection{Human-Computer Interaction}
 
-- Labeled screenshots of UI
+Here are the designs of each tkinter frame in the User Interface:
+
+\begin{itemize}
+    \item Home Frame design:
+        \begin{figure}[h!]
+        \centering
+        \includegraphics[width=0.7\textwidth]{./project-report/src/images/home-frame-design.png}
+        \end{figure}
+
+    \pagebreak
+
+    \item Hyper-Parameter Frame design:
+        \begin{figure}[h!]
+        \centering
+        \includegraphics[width=0.7\textwidth]{./project-report/src/images/hyper-parameter-frame-design.png}
+        \end{figure}
+
+    \pagebreak
+
+    \item Training Frame design:
+        \begin{itemize}
+            \item During training, the following is displayed on the Training Frame:
+                \begin{figure}[h!]
+                \centering
+                \includegraphics[width=0.7\textwidth]{./project-report/src/images/training-frame-1-design.png}
+                \end{figure}
+
+            \pagebreak
+
+            \item Once training has finished, the following is displayed on the Training Frame:
+                \begin{figure}[h!]
+                \centering
+                \includegraphics[width=0.7\textwidth]{./project-report/src/images/training-frame-1-design.png}
+                \end{figure}
+            \end{itemize}
+
+    \pagebreak
+
+    \item Load Model Frame design:
+        \begin{figure}[h!]
+        \centering
+        \includegraphics[width=0.7\textwidth]{./project-report/src/images/load-model-frame-design.png}
+        \end{figure}
+    
+    \pagebreak
+    
+    \item Test Frame design:
+        \begin{figure}[h!]
+        \centering
+        \includegraphics[width=0.7\textwidth]{./project-report/src/images/testing-frame-design.png}
+        \end{figure}
+\end{itemize}
 
 \subsection{Hardware Design}