diff --git a/.gitignore b/.gitignore
index f11c4ce0..d52706e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,6 @@ server/media/
 .python-version
 
 .coverage
+
+# Cypress screenshots
+client/cypress/screenshots
diff --git a/client/src/pages/project.vue b/client/src/pages/project.vue
index e28bc9a0..21291be3 100644
--- a/client/src/pages/project.vue
+++ b/client/src/pages/project.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="project">
+  <div class="project" :class="specialContainerClass">
     <div class="project__header">
       <h1 class="project__title">{{project.title}}</h1>
       <p class="project__description">
@@ -36,6 +36,10 @@
     computed: {
       objectives() {
         return this.project.objectives ? this.project.objectives.split('\n') : [];
+      },
+      specialContainerClass() {
+        const cls = this.project.appearance;
+        return [cls ? `project--${cls}` : ''];
       }
     },
 
@@ -73,8 +77,12 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
 
   .project {
+
+    @include skillbox-colors;
+
     &__header {
       padding: $large-spacing;
     }