diff --git a/package.json b/package.json
index 10c405c..8cd73a6 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@aws-sdk/client-lambda": "^3.940.0",
     "@gotpop/scripts": "^0.1.7",
     "@gotpop/storyblok": "^0.1.96",
-    "@gotpop/system": "^0.1.279",
+    "@gotpop/system": "^0.1.280",
     "@storyblok/react": "5.4.20",
     "next": "^16.1.1",
     "react": "19.2.0",
diff --git a/src/app/theme.css b/src/app/theme.css
index 04add63..bb0c132 100644
--- a/src/app/theme.css
+++ b/src/app/theme.css
@@ -1,3 +1,73 @@
 :root {
   --theme-accent-text: #ffffff;
 }
+
+@keyframes slide-to-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-to-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-from-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+html:active-view-transition-type(navigation-forward) {
+  .hero-page {
+    view-transition-name: hero-page;
+  }
+
+  &::view-transition-old(hero-page) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(hero-page) {
+    animation-name: slide-from-left;
+  }
+}
+
+html:active-view-transition-type(navigation-back) {
+  .hero-page {
+    view-transition-name: hero-page;
+  }
+
+  &::view-transition-old(hero-page) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(hero-page) {
+    animation-name: slide-from-right;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 45ca6bb..7590e1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -670,10 +670,10 @@
   dependencies:
     "@storyblok/react" "^5.0.0"
 
-"@gotpop/system@^0.1.279":
-  version "0.1.279"
-  resolved "https://npm.pkg.github.com/download/@gotpop/system/0.1.279/19df29d0df7a7152fda2d6a0158c29cf0b8926da#19df29d0df7a7152fda2d6a0158c29cf0b8926da"
-  integrity sha512-U1Mv9MbAIoR0rXg9ZY+j5eZ5ATWve+1VsvFmhlKr0a8gz3BZNAMCzjqm8uZvFjA6/Zon7+Il4Loy8DdYi+tn2Q==
+"@gotpop/system@^0.1.280":
+  version "0.1.280"
+  resolved "https://npm.pkg.github.com/download/@gotpop/system/0.1.280/cff6e0eb618c7d635760137ec06b9f8925617d8a#cff6e0eb618c7d635760137ec06b9f8925617d8a"
+  integrity sha512-mqrzq7PNlp9v/vITBXNowLAGpgm2UvOPNR9Mn8voZnoFfyqcqgUTbq6i+F+C2y8BQVDPTbL/7ucqTjjfEk8nBw==
   dependencies:
     "@next/font" "^14.2.15"
     motion "^12.23.26"