diff --git a/playbook.yml b/playbook.yml
index 6682daec..54575e43 100644
--- a/playbook.yml
+++ b/playbook.yml
@@ -67,6 +67,9 @@ content:
       branches: HEAD
       start_path: docs
 
+    - url: https://github.com/OpenZeppelin/cairo-contracts
+      branches: HEAD
+      start_path: docs
 ui:
   bundle:
     url: ./ui/theme
diff --git a/ui/package.json b/ui/package.json
index c7e21624..d0a4423f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -30,8 +30,9 @@
     "fromentries": "^1.3.2",
     "glob": "^7.1.7",
     "handlebars": "^4.7.7",
-    "highlight.js": "^11.5.1",
+    "highlight.js": "^11.6.0",
     "highlightjs-solidity": "^2.0.5",
+    "highlightjs-cairo": "^0.1.0",
     "live-server": "^1.2.2",
     "lodash.debounce": "^4.0.8",
     "rimraf": "^3.0.2",
diff --git a/ui/preview/model.yml b/ui/preview/model.yml
index c43df7c3..2bba829d 100644
--- a/ui/preview/model.yml
+++ b/ui/preview/model.yml
@@ -51,6 +51,16 @@ site:
         version: '1.x'
         displayVersion: '1.x'
       latestVersion: *latest_version_contracts
+    contracts-cairo:
+      name: contracts-cairo
+      title: Contracts for Cairo
+      url: '#'
+      versions:
+      - &latest_version_abc
+        url: '#' 
+        version: '0.2.x'
+        displayVersion: '0.2.x'
+      latestVersion: *latest_version_abc
     cli:
       name: cli
       title: CLI
diff --git a/ui/src/js/highlight.js b/ui/src/js/highlight.js
index eb11e385..8bec452f 100644
--- a/ui/src/js/highlight.js
+++ b/ui/src/js/highlight.js
@@ -8,4 +8,5 @@ hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
 hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell'));
 hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
 require('highlightjs-solidity')(hljs);
+require('highlightjs-cairo')(hljs);
 hljs.initHighlightingOnLoad();
diff --git a/ui/theme/images/icons/contracts-cairo.svg b/ui/theme/images/icons/contracts-cairo.svg
new file mode 100644
index 00000000..bde3a023
--- /dev/null
+++ b/ui/theme/images/icons/contracts-cairo.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+    <title>contracts-cairo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-20-Copy" transform="translate(0.000000, 1.500000)" fill="#3D3D58">
+            <polygon id="Rectangle-Copy-12" points="17.1077448 0 18 1.06896471 13.2973867 14.1413788 12.2791768 15 6 9.36677642"></polygon>
+            <polygon id="Rectangle-Copy-13" points="0.892255226 15 0 13.9310353 4.70261331 0.858621172 5.72082325 0 12 5.63322358"></polygon>
+        </g>
+    </g>
+</svg>
diff --git a/ui/theme/partials/navigation.hbs b/ui/theme/partials/navigation.hbs
index b7bf23ca..f5261d59 100644
--- a/ui/theme/partials/navigation.hbs
+++ b/ui/theme/partials/navigation.hbs
@@ -2,7 +2,8 @@
   data-is-site-aspect="{{component.siteAspect}}" data-version="{{component.version.string}}" role="navigation">
   <button class="close-menu-btn">
     <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-      <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+      <path fill="currentColor"
+        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
     </svg>
   </button>
 
@@ -14,7 +15,7 @@
     {{/each}}
 
     <h3 class="nav-title">Our Products</h3>
-    {{#each (pick site.components "defender, contracts")}}
+    {{#each (pick site.components "defender, contracts, contracts-cairo")}}
       {{> navigation-component }}
     {{/each}}
 
@@ -64,7 +65,7 @@
     </div>
     {{#if (eq this @root.page.component)}}
     <ol class="nav-list">
-    {{> navigation-tree items=@root.page.navigation}}
+      {{> navigation-tree items=@root.page.navigation}}
     </ol>
     {{/if}}
   </div>
diff --git a/yarn.lock b/yarn.lock
index 8d721ffa..1f8a84dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2948,10 +2948,17 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-highlight.js@^11.5.1:
-  version "11.5.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.5.1.tgz#027c24e4509e2f4dcd00b4a6dda542ce0a1f7aea"
-  integrity sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==
+highlight.js@^11.0.0, highlight.js@^11.6.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
+  integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
+
+highlightjs-cairo@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/highlightjs-cairo/-/highlightjs-cairo-0.1.0.tgz#64c7a94d70513ed1bee72a1e7152f57baffb0a76"
+  integrity sha512-PYnLSgSokPIhaCShTAxdhlJdTLR/4ll2U2ikMimqOmi0NBH7J3Up2Nl1kJhqqCrXb4m4xrTlHTf61tEjf5juCQ==
+  dependencies:
+    highlight.js "^11.0.0"
 
 highlightjs-solidity@^2.0.5:
   version "2.0.5"