diff --git a/src/content/dvd-screensaver.md b/src/content/dvd-screensaver.md
index 98952fe..b903a1c 100644
--- a/src/content/dvd-screensaver.md
+++ b/src/content/dvd-screensaver.md
@@ -1,6 +1,6 @@
 ---
 slug: '/dvd-screensaver'
-date: '2023-01-04'
+date: '2024-01-04'
 title: 'DVD Screensaver'
 type: 'css'
 image: '../images/dvd-screensaver.gif'
diff --git a/src/content/hamburger-menu.md b/src/content/hamburger-menu.md
index c5dffab..a012a07 100644
--- a/src/content/hamburger-menu.md
+++ b/src/content/hamburger-menu.md
@@ -1,6 +1,6 @@
 ---
 slug: '/hamburger-menu'
-date: '2023-02-29'
+date: '2024-02-29'
 title: 'Hamburger Menu'
 type: 'css'
 image: '../images/hamburger-menu.gif'
diff --git a/src/content/modal.md b/src/content/modal.md
new file mode 100644
index 0000000..698cdc6
--- /dev/null
+++ b/src/content/modal.md
@@ -0,0 +1,37 @@
+---
+slug: "/modal"
+date: "2024-03-14"
+title: "Modal"
+type: "css"
+image: "../images/modal.gif"
+codepen: "https://codepen.io/kirblitz/pen/ExJgPvx"
+author: "Kirby Borromeo"
+github: "https://github.com/kerdaddyb"
+entries:
+  - name: 'Ady'
+    url: 'https://codepen.io/adycastueras/pen/rNbMMGE'
+  - name: 'Franco'
+    url: 'https://codepen.io/notco/pen/PogGGJO'
+  - name: 'Patrick'
+    url: 'https://codepen.io/janpatrick-dev/pen/gOywwXG'
+  - name: 'Kim'
+    url: 'https://codepen.io/Kim-Klinton-Vale/pen/WNWGGXK'
+  - name: 'Via'
+    url: 'https://codepen.io/Vianca-Andrea-Maulion/pen/bGJwwoM'
+  - name: 'Tams'
+    url: 'https://codepen.io/tkevinmatt/pen/eYoddjq'
+---
+
+- ⌛ You have 15 minutes to implement this, take your time (but not too much)!
+- 💅 Feel free to embellish and make it pretty!
+- 📦 Some basic CSS is provided for you. There are some `TODO` comments in there to help you out.
+- 🧙 You can search online if you get stuck.
+- 🎉 When you're done, `Fork` 🍴 the Codepen page and share with us the URL.
+
+<p align='center'>* * *</p>
+
+## Tips and hints
+
+- Use `transform` and `position properties` to position the elements.
+- Don't forget to put `pointer-events` property.
+- Use the `:target` pseudo element. Go wild!
diff --git a/src/images/modal.gif b/src/images/modal.gif
new file mode 100644
index 0000000..b4cc071
Binary files /dev/null and b/src/images/modal.gif differ
diff --git a/yarn.lock b/yarn.lock
index c2f4bc6..7a54e2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4246,6 +4246,11 @@ date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^3.3.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.4.0.tgz#19ac3c19a39af64acb21c23587cb08504dcdc3de"
+  integrity sha512-Akz4R8J9MXBsOgF1QeWeCsbv6pntT5KCPjU0Q9prBxVmWJYPLhwAIsNg3b0QAdr0ttiozYLD3L/af7Ra0jqYXw==
+
 debug@2, debug@2.6.9, debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"