diff --git a/layouts/ccip.vue b/layouts/ccip.vue
new file mode 100644
index 0000000000..e74e5e7fee
--- /dev/null
+++ b/layouts/ccip.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="default-layout">
+        <div class="default-layout__body">
+            <Nuxt />
+            <core-footer />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {}
+    },
+    head() {
+        return {}
+    },
+}
+</script>
+
+<style>
+html {
+    @apply bg-black-900 font-sans text-primary-100;
+    font-size: 20px;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+.default-layout__body {
+    display: grid;
+    grid-template-columns: 100%;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
+
+.page-enter-active,
+.page-leave-active {
+    transition: 0.3s;
+}
+.page-enter,
+.page-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/pages/about/staff.vue b/pages/about/staff.vue
index 3ca8cd360d..ed684243fe 100644
--- a/pages/about/staff.vue
+++ b/pages/about/staff.vue
@@ -39,6 +39,10 @@ import CoreH1 from '@/components/core/titles/H1'
 import i18n from '@/i18n/about/staff.i18n'
 
 export default {
+    layout(context) {
+        const ccip = context.query.ccip // to determine if it's opass mobile app
+        return ccip ? 'ccip' : 'default'
+    },
     i18n,
     name: 'PageStaff',
     components: {