diff --git a/public/assets/css/pages/work/deltaco/asyncapp.css b/public/assets/css/pages/work/deltaco/asyncapp.css
new file mode 100644
index 0000000..43fc9bd
--- /dev/null
+++ b/public/assets/css/pages/work/deltaco/asyncapp.css
@@ -0,0 +1,77 @@
+/* # Overrides */
+
+:root {
+ --primer-color-accent: 3, 255, 219;
+
+ --color-accent: rgb(var(--primer-color-accent));
+}
+
+vv-shell {
+ gap: var(--padding);
+ width: 100%;
+ display: flex;
+ max-width: 1200px;
+ overflow-x: initial;
+ flex-direction: column;
+}
+
+/* # Overlay */
+
+div.overlay {
+ gap: var(--padding);
+ fill: var(--color-accent);
+ bottom: var(--padding);
+ border: solid 2px rgba(255, 255, 255, .1);
+ display: grid;
+ padding: var(--padding);
+ position: fixed;
+ align-self: center;
+ border-radius: 12px;
+ background-color: rgba(0, 0, 0, .8);
+ grid-template-columns: repeat(2, 1fr);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+}
+
+div.overlay button {
+ --size: 60px;
+
+ transition: 300ms background-color;
+ width: var(--size);
+ height: var(--size);
+ border: solid 2px rgba(var(--primer-color-accent), .2);
+ padding: calc(var(--padding) / 2);
+ border-radius: 6px;
+}
+
+div.overlay button.active {
+ fill: black;
+ pointer-events: none;
+ background-color: var(--color-accent);
+}
+
+div.overlay button svg {
+ width: 100%;
+ height: 100%;
+}
+
+/* # Sections */
+
+section.preview {
+ width: 100%;
+ height: 700px;
+ border: solid 4px var(--color-accent);
+ padding: calc(var(--padding) / 2);
+ overflow: hidden scroll;
+ align-self: center;
+ border-radius: 10px;
+}
+
+section.preview.mobile {
+ width: 350px;
+}
+
+section.preview img {
+ width: 100%;
+ border-radius: 4px;
+}
\ No newline at end of file
diff --git a/public/assets/js/pages/work/deltaco/asyncapp.js b/public/assets/js/pages/work/deltaco/asyncapp.js
new file mode 100644
index 0000000..85b0400
--- /dev/null
+++ b/public/assets/js/pages/work/deltaco/asyncapp.js
@@ -0,0 +1,11 @@
+const viewToggleButtonElements = document.querySelectorAll("button.view");
+
+viewToggleButtonElements.forEach(element => {
+ element.addEventListener("click", () => {
+ // Toggle active state between buttons
+ viewToggleButtonElements.forEach(element => element.classList.toggle("active"));
+
+ // Toggle "mobile" mode on preview window
+ document.querySelector("section.preview").classList.toggle("mobile");
+ });
+});
\ No newline at end of file
diff --git a/public/assets/media/icons/desktop.svg b/public/assets/media/icons/desktop.svg
new file mode 100644
index 0000000..f7f1abc
--- /dev/null
+++ b/public/assets/media/icons/desktop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/media/icons/mobile.svg b/public/assets/media/icons/mobile.svg
new file mode 100644
index 0000000..59a702f
--- /dev/null
+++ b/public/assets/media/icons/mobile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/work/deltaco/asyncapp.php b/public/work/deltaco/asyncapp.php
index 3deb03c..75995d9 100644
--- a/public/work/deltaco/asyncapp.php
+++ b/public/work/deltaco/asyncapp.php
@@ -1 +1,23 @@
-= VV::include("public/work/wip") ?>
\ No newline at end of file
+
+
+ = $asyncapp->summary() ?>
+
= $asyncapp->title() ?>
+