diff --git a/docs/css/front-page.css b/docs/css/front-page.css
index e284756aac..74a7c5bd24 100644
--- a/docs/css/front-page.css
+++ b/docs/css/front-page.css
@@ -1,18 +1,23 @@
-.front-page h1 {
+[dir=ltr] .front-page h1 {
     font-size: 32px;
     font-weight: 600;
     padding-left: 0.7rem;
     margin-bottom: 0.75rem;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .front-page a {
-    color: var(--link);
+    color: black;
+    text-align: center;
+    font-size: 16px;
 }
 
 .front-page a:hover,
 .front-page a:focus {
-    color: var(--ibexa-jazzberry);
-    text-decoration: none;
+    color: #af1164;
+    text-decoration:underline;
 }
 
 .tile {
@@ -34,11 +39,15 @@ h5.tile-title {
 }
 
 .tile-icon {
-    margin-right: 0.6rem;
+    margin-right: 0px;
+    margin-top: 20px;
+    stroke: #FFFFFF;
+    fill: #FFFFFF;
+    stroke-width: 0.3px;
 }
 
 .tile-body {
-    margin-left: 2.6rem;
+    margin-left: 0rem;
 }
 
 .tile-body ul {
@@ -49,37 +58,16 @@ h5.tile-title {
     list-style-type: none;
     background: url(../images/page.svg) no-repeat left top;
     background-size: 15px 18px;
-    padding-left: 1rem;
-    margin-left: 0.25rem;
+    padding-left: 0rem;
+    margin-left: 0rem;
 }
 
 .md-typeset .tile-body ol, .md-typeset .tile-body ul {
     margin-left: 0;
 }
 
-.most-popular h5 {
-    background-color: rgba(216,216,216,0.27);
-    font-size: 13px;
-    font-weight: bold;
-    line-height: 18px;
-    padding: 8px 14px;
-    margin-bottom: 1rem;
-}
-
-.md-typeset .most-popular ul {
-    list-style-position: inside;
-    padding-left: 0;
-    margin-left: 0px;
-}
-
-.md-typeset .most-popular ul li {
-    border-bottom: 1px solid #D8D8D8;
-    margin-left: 0px;
-    padding-left: 0.5rem;
-}
-
 .latest-release h5 {
-    border-bottom: 3px solid #D8D8D8;
+    border-bottom: 1px solid #af1164;
     font-size: 18px;
     font-weight: bold;
     line-height: 24px;
@@ -98,48 +86,246 @@ h5.tile-title {
     margin-bottom: 0;
 }
 
-.announcement {
-    margin-bottom: 1rem;
-    padding: .75rem 1.25rem;
-    background-color: #FFFFFF;
-    border: 1px solid var(--ibexa-jazzberry);
+.info-tile {
+    height: 230px;
+    width: 24%;
+    margin: 0.5%;
+    max-height: 230px;
+    padding-right: 1vw;
+    background: #af1164;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-family: "Noto Sans";
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
     border-radius: 5px;
+}
+
+.info-tile:hover {
+    opacity:0.5;
+}
+
+.info-tile-img {
+    position: absolute;
+    left: 2%;
+    top: 15%;
+    opacity: .4;
+    height: 10vw;
+    font-size:10vw;
+}
+
+.info-tile-up {
+    height: 120px;
+    max-height: 120px;
+    background: white;
+    display: inline-block;
+    text-overflow: ellipsis;
+    text-align: center;
+    justify-content: center;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-family: "Noto Sans";
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 5px;
+    border: 1px solid #af1164;
+    width: 100%;
+    padding: 5px;
+}
+
+[dir=ltr] .info-tile-body ul {
+    margin-left: 0;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+[dir=ltr] .info-tile-body ul li {
+    list-style-type: none;
+    background-size: 15px 18px;
+    text-align: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 0px;
+}
+
+.info-tile-title {
+    color: #ffffff;
+    font-family: "Noto Sans";
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 50px;
+    padding-left: 0;
+    text-align: center;
+}
+
+.info-tile-title a {
+  text-align: center;
+  font-size: 18px;
+}
+
+h5.info-tile-title {
+    color: #ffffff;
+    font-family: "Noto Sans";
     font-size: 18px;
-    color: var(--ibexa-jazzberry);
+    font-weight: bold;
+    line-height: 50px;
+    padding-left: 0;
+    text-align: center;
 }
 
-.announcement a.external:after {
-    content: none;
+.info-tile-icon {
+    margin-right: 0px;
+    margin-top: 0px;
+    margin-left: 0px;
+    margin-bottom: 0px;
 }
 
-.announcement .btn {
-    font-size: 0.8rem;
-    padding: .4rem .8rem;
+.info-tile-up:hover {
+    opacity:0.5;
 }
 
-.announcement .tile-icon {
-    flex-shrink: 0;
+a.instruction-tile {
+    display: inline-flex;
+    align-items: center;
+    height: 150px;
+    width: 24%;
+    margin: 0.5%;
+    max-height: 90px;
+    border-radius: 5px;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    background: #af1164;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    font-family: "Noto Sans";
+    color: white;
+    font-weight: bold;
+    position: relative;
+    margin-bottom: 8px;
+    text-align: center;
+    margin-top: 8px;
+    flex-direction: column;
+    justify-content: center;
+    color: white;
 }
 
-.announcement .btn-announcement {
-    background: var(--ibexa-jazzberry);
-    border: 1px solid var(--ibexa-jazzberry);
-    color: #FFFFFF;
+a.instruction-tile:hover {
+  opacity:0.5;
+  color: white;
 }
 
-.announcement .btn-announcement-outline {
-    background: #FFFFFF;
-    border: 1px solid var(--ibexa-jazzberry);
-    color: var(--ibexa-jazzberry);
+html {
+    height: 100%;
 }
 
-.announcement .btn-announcement-outline:hover,
-.announcement .btn-announcement-outline:focus {
-    background: var(--ibexa-jazzberry);
-    color: #FFFFFF;
+body {
+    margin: 0;
+    font-family: "Noto Sans";
+}
+  
+.accordion {
+    margin: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 10px;
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+    opacity: 0.8;
+    font-size: 14px;
+}
+ 
+.accordion details summary {
+    line-height: 50px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-weight: 400;
+    cursor: pointer;
+    border-radius: 10px;
+    position: relative;
+    user-select: none;
+}
+ 
+.accordion details[open] summary,
+.accordion details summary:hover {
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
-.announcement .btn-announcement:hover,
-.announcement .btn-announcement:focus {
-    background: #FFFFFF;
+.accordion details[open] summary{
+    font-weight: bold;
+}
+
+.accordion details ::marker {
+    font-size: 0;
+}
+
+.accordion details ul {
+    margin: 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+}
+
+.accordion details ul li {
+    cursor: pointer;
+    padding: 10px;
+    padding-left: 20px;
+    border-radius: 5px;
 }
+
+.accordion details ul li:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: #af1164;
+    text-decoration:underline;
+}
+  
+.md-typeset :is(.admonition,details) {
+    background-color: var(--md-admonition-bg-color);
+    border: 0 solid #af1164;
+    border-radius: 0.1rem;
+    box-shadow: var(--md-shadow-z1);
+    color: var(--md-admonition-fg-color);
+    display: flow-root;
+    font-size: .64rem;
+    margin: 1.5625em 0;
+    padding: 0 0.6rem;
+    page-break-inside: avoid;
+}
+
+.md-typeset .admonition,details {
+  background-color: var(--md-admonition-bg-color);
+  border: 0 solid #af1164;
+  border-radius: 0.1rem;
+  box-shadow: var(--md-shadow-z1);
+  color: var(--md-admonition-fg-color);
+  display: flow-root;
+  font-size: .64rem;
+  margin: 1.5625em 0;
+  padding: 0 0.6rem;
+  page-break-inside: avoid;
+}
+
+.md-typeset :is(.admonition-title,summary):before {
+    background-color: #af1164;
+    height: 1rem;
+    mask-size: contain;
+    position: absolute;
+    top: 0.625em;
+    width: 1rem;
+    display: none;
+}
+
+[dir=ltr] .summary-icon {
+  width: 30px;
+  height: 30px;
+  margin-left: 0px;
+  margin-right: 20px;
+  display: inline;
+}
\ No newline at end of file
diff --git a/docs/customer_management/customer_management.md b/docs/customer_management/customer_management.md
new file mode 100644
index 0000000000..29a4107a5b
--- /dev/null
+++ b/docs/customer_management/customer_management.md
@@ -0,0 +1,12 @@
+description: Manage customer in Ibexa DXP by learning about the Customer Portal and registration form.
+---
+
+# Customer management
+
+[[= cards([
+    "customer_management/customer_portal",
+    "customer_management/cp_applications",
+    "customer_management/cp_configuration",
+    "customer_management/create_user_registration_form",
+    
+], columns=4) =]]
\ No newline at end of file
diff --git a/docs/images/Build site.svg b/docs/images/Build site.svg
new file mode 100644
index 0000000000..15682956d1
--- /dev/null
+++ b/docs/images/Build site.svg	
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{stroke:#ae1164;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;}.cls-2{stroke:#ae1164;}</style></defs><path class="cls-2" d="M42.99,2c0-.55-.45-1-1-1h-14.96c-.55-.02-1.01,.42-1.03,.97,0,.29,.11,.57,.32,.76l14.97,14.95c.4,.39,1.03,.38,1.42-.01,.18-.19,.28-.43,.29-.69V2Z"/><path class="cls-2" d="M28.14,4.54l11.31,11.31h0l-12.73,12.73c-.78,.78-2.05,.78-2.83,0l-8.48-8.48c-.78-.78-.78-2.05,0-2.83L28.14,4.54Z"/><path class="cls-2" d="M17.74,23.41l-12.73,12.74"/><path class="cls-2" d="M21.05,25.77s-5.66,4.24,0,9.9"/><path class="cls-1" d="M26.36,47l2-4,4-2-4-2-2-4-2,4-4,2,4,2,2,4Z"/></svg>
\ No newline at end of file
diff --git a/docs/images/Idea.svg b/docs/images/Idea.svg
new file mode 100644
index 0000000000..53b42249c0
--- /dev/null
+++ b/docs/images/Idea.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{stroke:#db0032;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-2{stroke:#ae1164;}</style></defs><g><path class="cls-2" d="M30,34.66v4.34c0,3.31-2.69,6-6,6s-6-2.69-6-6v-4.34"/><line class="cls-2" x1="24" y1="45" x2="24" y2="47"/><path class="cls-1" d="M26,35.86v-11.86c0-1.66,1.34-3,3-3s3,1.34,3,3-1.34,3-3,3h-10c-1.66,0-3-1.34-3-3s1.34-3,3-3,3,1.34,3,3v11.86"/><line class="cls-2" x1="18.08" y1="40" x2="29.92" y2="40"/></g><circle class="cls-2" cx="24" cy="22" r="14"/><line class="cls-1" x1="24" y1="1" x2="24" y2="3"/><line class="cls-1" x1="9.16" y1="7.16" x2="10.56" y2="8.56"/><line class="cls-1" x1="3" y1="22" x2="5" y2="22"/><line class="cls-1" x1="9.16" y1="36.86" x2="10.56" y2="35.44"/><line class="cls-1" x1="38.84" y1="36.86" x2="37.44" y2="35.44"/><line class="cls-1" x1="45" y1="22" x2="43" y2="22"/><line class="cls-1" x1="38.84" y1="7.16" x2="37.44" y2="8.56"/></svg>
\ No newline at end of file
diff --git a/docs/images/Reward.svg b/docs/images/Reward.svg
new file mode 100644
index 0000000000..f97cbe79bf
--- /dev/null
+++ b/docs/images/Reward.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{stroke:#ae1164;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;}.cls-2{stroke:#ae1164;}</style></defs><path class="cls-2" d="M20,2.25l4.36,9.4h8.48c1.15-.05,2.11,.84,2.16,1.99,.03,.62-.23,1.22-.7,1.64l-7.35,7.24,4.08,9.37c.47,1.13-.07,2.43-1.2,2.9-.64,.27-1.37,.22-1.96-.13l-9.86-5.55-9.87,5.54c-1.06,.61-2.42,.25-3.03-.82-.34-.6-.39-1.32-.13-1.96l4.08-9.36L1.71,15.28c-.86-.76-.95-2.07-.19-2.93,.41-.47,1.02-.73,1.64-.71H11.64L16,2.25c.58-1.1,1.95-1.53,3.06-.94,.4,.21,.73,.54,.94,.94Z"/><line class="cls-1" x1="44" y1="27.96" x2="44" y2="33.96"/><line class="cls-1" x1="41" y1="30.96" x2="47" y2="30.96"/><line class="cls-1" x1="21" y1="40.96" x2="21" y2="46.96"/><line class="cls-1" x1="18" y1="43.96" x2="24" y2="43.96"/><line class="cls-1" x1="41" y1="2.96" x2="41" y2="8.96"/><line class="cls-1" x1="38" y1="5.96" x2="44" y2="5.96"/></svg>
\ No newline at end of file
diff --git a/docs/images/Site Factory.svg b/docs/images/Site Factory.svg
new file mode 100644
index 0000000000..0542ecf2a5
--- /dev/null
+++ b/docs/images/Site Factory.svg	
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{stroke:#ffffff;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;}.cls-2{stroke:#ffffff;}</style></defs><path class="cls-2" d="M43,11h1c.79,0,1.55,.32,2.12,.88,.56,.56,.88,1.32,.88,2.12v26c0,.79-.32,1.55-.88,2.12-.56,.56-1.32,.88-2.12,.88H4c-.79,0-1.55-.32-2.12-.88-.56-.56-.88-1.32-.88-2.12V14c0-.79,.32-1.55,.88-2.12,.56-.56,1.32-.88,2.12-.88h1"/><path class="cls-2" d="M14,47h20"/><path class="cls-2" d="M24,43v4"/><path class="cls-1" d="M9,31V3c0-.53,.21-1.04,.59-1.41,.38-.38,.88-.59,1.41-.59h26c.53,0,1.04,.21,1.41,.59,.38,.38,.59,.88,.59,1.41V31"/><path class="cls-1" d="M20,15h-6c-.55,0-1,.45-1,1v5c0,.55,.45,1,1,1h6c.55,0,1-.45,1-1v-5c0-.55-.45-1-1-1Z"/><path class="cls-1" d="M25.2,21h9.8"/><path class="cls-1" d="M25.2,15h9.8"/><path class="cls-1" d="M13,27h22"/><path class="cls-2" d="M1,37H47"/><path class="cls-1" d="M9,10h30"/><g><path class="cls-1" d="M13.5,6c-.28,0-.5-.22-.5-.5s.22-.5,.5-.5"/><path class="cls-1" d="M13.5,6c.28,0,.5-.22,.5-.5s-.22-.5-.5-.5"/></g><g><path class="cls-1" d="M18.5,6c-.28,0-.5-.22-.5-.5s.22-.5,.5-.5"/><path class="cls-1" d="M18.5,6c.28,0,.5-.22,.5-.5s-.22-.5-.5-.5"/></g><g><path class="cls-1" d="M23.5,6c-.28,0-.5-.22-.5-.5s.22-.5,.5-.5"/><path class="cls-1" d="M23.5,6c.28,0,.5-.22,.5-.5s-.22-.5-.5-.5"/></g></svg>
\ No newline at end of file
diff --git a/docs/images/Value.svg b/docs/images/Value.svg
new file mode 100644
index 0000000000..7ef85ed4ac
--- /dev/null
+++ b/docs/images/Value.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{stroke:#db0032;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:10px;}.cls-2{stroke:#ae1164;}</style></defs><path class="cls-2" d="M22.51,3.84c-.05,13.53,6.52,21.18,21.52,21.52-13.91-.05-20.81,7.4-21.52,21.51-.13-13.32-6.07-21.54-21.51-21.51,13.81-.2,21.47-6.86,21.51-21.52Z"/><line class="cls-1" x1="35.14" y1="1.12" x2="35.14" y2="7.27"/><line class="cls-1" x1="32.07" y1="4.2" x2="38.21" y2="4.2"/><line class="cls-1" x1="43.93" y1="33.11" x2="43.93" y2="39.25"/><line class="cls-1" x1="40.85" y1="36.18" x2="47" y2="36.18"/></svg>
\ No newline at end of file
diff --git a/docs/images/content.png b/docs/images/content.png
new file mode 100644
index 0000000000..8e6963a289
Binary files /dev/null and b/docs/images/content.png differ
diff --git a/docs/images/content_edit.svg b/docs/images/content_edit.svg
new file mode 100644
index 0000000000..45e6a4999c
--- /dev/null
+++ b/docs/images/content_edit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="content_edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{stroke:white;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;}.cls-2{stroke:white;}</style></defs><path class="cls-2" d="M9.03,17.02H27.95"/><path class="cls-2" d="M9.03,22.99H27.95"/><path class="cls-2" d="M9.03,11.07h13.94"/><path class="cls-2" d="M9.03,28.97h14.92"/><path class="cls-2" d="M9.03,34.94h7.96"/><path class="cls-2" d="M17,46.87H3.06c-1.09,0-1.98-.88-1.99-1.97V3.08c0-1.1,.89-1.99,1.99-1.99H29.53c.53,0,1.03,.21,1.41,.59l7.38,7.38c.38,.37,.59,.88,.59,1.41v6.56"/><path class="cls-1" d="M31.33,44.52l-8.36,2.35,2.39-8.36,14.3-14.27c1.61-1.69,4.29-1.74,5.97-.13,1.69,1.61,1.74,4.29,.13,5.97-.04,.04-.08,.09-.13,.13l-14.3,14.31Z"/><path class="cls-1" d="M37.87,26.02l5.97,5.97"/><path class="cls-1" d="M25.36,38.53l5.97,5.99"/></svg>
\ No newline at end of file
diff --git a/docs/images/customer.png b/docs/images/customer.png
new file mode 100644
index 0000000000..9c156a62ac
Binary files /dev/null and b/docs/images/customer.png differ
diff --git a/docs/images/four.png b/docs/images/four.png
new file mode 100644
index 0000000000..1ebeda9b87
Binary files /dev/null and b/docs/images/four.png differ
diff --git a/docs/images/number_one.png b/docs/images/number_one.png
new file mode 100644
index 0000000000..4013bf0e6a
Binary files /dev/null and b/docs/images/number_one.png differ
diff --git a/docs/images/one.png b/docs/images/one.png
new file mode 100644
index 0000000000..485cdbc626
Binary files /dev/null and b/docs/images/one.png differ
diff --git a/docs/images/product.png b/docs/images/product.png
new file mode 100644
index 0000000000..7135b813c6
Binary files /dev/null and b/docs/images/product.png differ
diff --git a/docs/images/three.png b/docs/images/three.png
new file mode 100644
index 0000000000..337925e5dc
Binary files /dev/null and b/docs/images/three.png differ
diff --git a/docs/images/two.png b/docs/images/two.png
new file mode 100644
index 0000000000..b0b50a4189
Binary files /dev/null and b/docs/images/two.png differ
diff --git a/docs/images/user.png b/docs/images/user.png
new file mode 100644
index 0000000000..5d47ff34d9
Binary files /dev/null and b/docs/images/user.png differ
diff --git a/docs/index.md b/docs/index.md
index d1d2c69563..13bd51653b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,121 +1,115 @@
 <div class="front-page">
-    <div class="row">
+    <div class="row align-middle justify-content-center">
         <h1>Ibexa developer documentation</h1>
     </div>
-    <div class="row mt-5 pb-4">
-        <div class="col-12">
-             <div class="announcement" role="alert">
-                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
-                    <span class="d-flex align-items-center">
-                        <svg class="tile-icon" width="32" height="32" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
-                            <g transform="scale(4) translate(1)"><path d="M22.293 19.35c-0.735-0.001-1.331-0.598-1.331-1.333 0-0.367 0.148-0.699 0.388-0.94l-0 0c1.367-1.384 2.211-3.287 2.211-5.387s-0.844-4.003-2.212-5.387l0.001 0.001c-0.254-0.243-0.412-0.585-0.412-0.964 0-0.736 0.597-1.333 1.333-1.333 0.381 0 0.725 0.16 0.968 0.417l0.001 0.001c1.846 1.866 2.987 4.433 2.987 7.267s-1.141 5.401-2.988 7.268l0.001-0.001c-0.242 0.243-0.576 0.393-0.946 0.393-0 0-0.001 0-0.001 0h0zM10.683 19c0.242-0.241 0.391-0.575 0.391-0.943s-0.149-0.702-0.391-0.943v0c-1.391-1.385-2.252-3.302-2.252-5.42 0-2.088 0.836-3.981 2.193-5.361l-0.001 0.001c0.236-0.241 0.382-0.571 0.382-0.935 0-0.737-0.597-1.334-1.334-1.334-0.373 0-0.709 0.153-0.951 0.399l-0 0c-1.823 1.862-2.949 4.413-2.949 7.228 0 2.854 1.157 5.439 3.028 7.309l0 0c0.241 0.241 0.574 0.389 0.942 0.389s0.7-0.149 0.942-0.389l-0 0zM27.237 23.060c2.94-2.896 4.762-6.92 4.762-11.37 0-4.413-1.792-8.408-4.689-11.297l-0-0c-0.243-0.255-0.586-0.414-0.966-0.414-0.736 0-1.333 0.597-1.333 1.333 0 0.381 0.159 0.724 0.415 0.967l0.001 0.001c2.413 2.406 3.907 5.734 3.907 9.41 0 3.708-1.519 7.061-3.968 9.471l-0.002 0.002c-0.242 0.241-0.391 0.575-0.391 0.943s0.149 0.702 0.391 0.943v0c0.241 0.242 0.575 0.391 0.943 0.391s0.702-0.149 0.943-0.391v0zM6.667 23.047c0.237-0.24 0.383-0.571 0.383-0.935 0-0.373-0.153-0.71-0.399-0.951l-0-0c-2.449-2.412-3.967-5.765-3.967-9.471 0-3.677 1.493-7.005 3.907-9.412l0-0c0.228-0.239 0.368-0.563 0.368-0.919 0-0.736-0.597-1.333-1.333-1.333-0.356 0-0.679 0.139-0.918 0.366l0.001-0.001c-2.897 2.889-4.689 6.883-4.689 11.297 0 4.45 1.822 8.474 4.76 11.368l0.002 0.002c0.241 0.242 0.575 0.391 0.943 0.391s0.702-0.149 0.943-0.391v0zM20 11.687c0-0.001 0-0.003 0-0.005 0-2.209-1.791-4-4-4s-4 1.791-4 4c0 1.731 1.1 3.206 2.639 3.762l0.028 0.009v15.213c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v0-15.213c1.565-0.565 2.665-2.037 2.667-3.766v-0z" fill="var(--ibexa-jazzberry)"></path></g>
-                        </svg>
-                        Ibexa DXP v4.5 is now out!
-                    </span>
-                    <span class="d-flex flex-column flex-xs-row flex-sm-row flex-md-row justify-content-between align-items-center ml-md-4">
-                        <a href="release_notes/ibexa_dxp_v4.5" class="btn btn-sm btn-announcement-outline mr-4 ml-4 ml-md-0 mb-3 mb-sm-0">
-                            See more
-                        </a>
-                    </span>
-                </div>
-            </div>
+    <div>
+        <div class="row gx-2">
+            <a href="getting_started/requirements/" class="instruction-tile">Check the requirements</a>
+            <a href="getting_started/install_ibexa_dxp/" class="instruction-tile">Install Ibexa DXP</a>
+            <a href="getting_started/install_on_ibexa_cloud/" class="instruction-tile">Install on Ibexa Cloud</a>
+            <a href="getting_started/first_steps/" class="instruction-tile">Go through the First steps</a>
         </div>
     </div>
-    <div class="row">
-        <div class="col-lg px-2 px-lg-4">
-            <div class="tile">
-                <div class="row">
-                    <div class="col-lg">
-                        <h5 class="tile-title">
-                            <svg class="tile-icon align-middle" width="32" height="32">
-                                <use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#publish"></use>
-                            </svg>
-                            Installation
-                        </h5>
-                        <div class="tile-body">
-                            <ol>
-                                <li><a href="getting_started/requirements/">Requirements</a></li>
-                                <li><a href="getting_started/install_ibexa_dxp/">Install Ibexa DXP</a></li>
-                                <li><a href="getting_started/first_steps/">First steps</a></li>
-                            </ol>
-                        </div>
+    <div>
+        <div class="row mt-5 pb-4">
+            <div class="col-12 d-flex flex-column flex-md-row">
+                <div class="info-tile-up" id="tile2">
+                    <div class = "info-tile-title">
+                        <a href="release_notes/ibexa_dxp_v4.5/" style="color: #af1164;">The latest release <span class="pill">v4.5</span></a>
                     </div>
+                <div class="info-tile-body align-middle">
+                    <a>The <a href="release_notes/ibexa_dxp_v4.5/" style="color: #af1164;">latest version of Ibexa DXP is v4.5</a>. 
+                    You can now <a href="update_and_migration/from_4.4/update_from_4.4/" style="color: #af1164;">update your application</a> 
+                    to the latest version.
                 </div>
             </div>
         </div>
-        <div class="col-lg px-2">
-            <div class="tile">
-                <div class="row">
-                    <div class="col-lg">
-                        <h5 class="tile-title">
-                            <svg class="tile-icon align-middle" width="32" height="32">
-                                <use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#about"></use>
-                            </svg>
-                            Tutorials
-                        </h5>
-                        <div class="tile-body">
-                            <ul>
-                                <li><a href="tutorials/beginner_tutorial/beginner_tutorial/">Beginner tutorial</a></li>
-                                <li><a href="tutorials/page_and_form_tutorial/page_and_form_tutorial/">Page and form tutorial</a></li>
-                                <li><a href="tutorials/generic_field_type/creating_a_point2d_field_type/">Generic Field Type</a></li>
-                            </ul>
-                        </div>
-                    </div>
+    </div>
+</div>
+<div> 
+    <div class="accordion">
+        <details>
+            <summary>
+                <img class="summary-icon" src="images/Build site.svg" height="25px" width="25px">Notable changes in v4.5</img>
+            </summary>
+            <ul>
+                <li><a href="release_notes/ibexa_dxp_v4.5/#all-new-ibexa-commerce-packages">All-new Ibexa Commerce packages</a></li>
+                <li><a href="release_notes/ibexa_dxp_v4.5/#new-commerce-page-blocks">New commerce page blocks</a></li>
+                <li><a href="release_notes/ibexa_dxp_v4.5/#page-builder-for-b2b-portals">Page Builder for B2B portals</a></li>
+                <li><a href="release_notes/ibexa_dxp_v4.5/#personalization-improvements">Personalization improvements</a></li>
+                <li><a href="release_notes/ibexa_dxp_v4.5/#customer-data-platform-cdp-configuration">Customer Data Platform (CDP) configuration</a></li>
+                <li><a href="release_notes/ibexa_dxp_v4.5/#api-improvements">API improvements</a></li>
+            </ul>
+        </details>
+        <details>
+            <summary>
+                <img class="summary-icon" src="images/Reward.svg" height="25px" width="25px">Most popular pages</img>
+            </summary>
+            <ul>
+                <li><a href="api/php_api/php_api/">PHP API</a></li>
+                <li><a href="search/solr_search_engine/">Solr search engine</a></li>
+                <li><a href="search/search_api/">Search API</a></li>
+                <li><a href="content_management/content_model/">Content model</a></li>
+                <li><a href="content_management/images/images/">Images</a></li>
+                <li><a href="content_management/pages/page_blocks/">Page blocks</a></li>
+            </ul>
+        </details>
+    </div>
+</div>
+<div class="row mt-5">
+    <div class="col-lg-12 mb-5 latest-release" style="text-align: center;">
+        <h5>
+            Manage your DXP
+        </h5>
+    </div>              
+</div>
+<div>
+    <div class="row gx-2">
+        <div class="info-tile" id="tile2" style = "background: #af1164;">
+            <svg class="tile-icon align-middle" width="32" height="32"><use fill="var(--white)" xlink:href="images/ez-icons.svg#content-draft"></svg>
+            <div class = "info-tile-title align-middle"><a href="content_management/content_management/" style="color: white;">Content management</a></div>
+                <div class="info-tile-body align-middle">
+                    <ul>
+                        <li><a href="content_management/content_model/" style="color: white;">Content model</a></li>
+                        <li><a href="content_management/file_management/file_management/" style="color: white;">File management</a></li>
+                        <li><a href="content_management/pages/pages/" style="color: white;">Pages</a></li>
+                    </ul>
                 </div>
             </div>
-        </div>
-        <div class="col-lg px-2 px-lg-4">
-            <div class="tile">
-                <div class="row">
-                    <div class="col-lg">
-                        <h5 class="tile-title">
-                            <svg class="tile-icon align-middle" width="32" height="32">
-                                <use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#settings-config"></use>
-                            </svg>
-                            Guide to Ibexa DXP
-                        </h5>
-                    <div class="tile-body">
-                        <ul>
-                            <li><a href="templating/render_content/render_content/">Content rendering</a></li>
-                            <li><a href="search/search/">Search</a></li>
-                            <li><a href="release_notes/release_notes/">Releases</a></li>
-                            <li><a href="api/php_api/php_api/">API</a></li>
-                        </ul>
-                    </div>
+        <div class="info-tile" id="tile2" style = "background: #af1164;">
+            <svg class="tile-icon" width="32" height="32"><use fill="var(--white)" xlink:href="images/ez-icons.svg#product"></svg>
+            <div class = "info-tile-title align-middle"><a href="pim/pim/" style="color: white;">Product management<a></div>
+                <div class="info-tile-body align-middle">
+                    <ul>
+                        <li><a href="pim/pim_configuration/" style="color: white;">PIM configuration</a></li>
+                        <li><a href="pim/catalogs/" style="color: white;">Catalogs</a></li>
+                        <li><a href="pim/prices/" style="color: white;">Prices</a></li>
+                    </ul>
                 </div>
             </div>
-        </div>
-    </div>
-    </div>
-    <div class="row mt-5">
-        <div class="col-lg-4 mb-5 most-popular">
-            <h5>
-                Most popular topics
-                <svg class="tile-icon" width="15" height="15">
-                    <use fill="var(--ibexa-jazzberry)" xlink:href="images/ez-icons.svg#bookmark-active"></use>
-                </svg>
-            </h5>
-                <ul>
-                    <li><a href="content_management/images/images/">Images</a></li>
-                    <li><a href="templating/twig_function_reference/twig_function_reference/">Twig functions</a></li>
-                    <li><a href="search/criteria_reference/search_criteria_reference">Search criteria reference</a></li>
-                    <li><a href="search/solr_search_engine/">Solr search engine</a></li>
-                </ul>
-        </div>
-        <div class="col-lg-8 mb-5 latest-release">
-            <h5>
-                The latest release
-                <span class="pill">v4.5</span>
-            </h5>
-            <div class="row mt-3">
-                <div class="col-lg-5">The <a href="release_notes/ibexa_dxp_v4.5/">latest version of Ibexa DXP is v4.5</a>. It is a Fast Track release, and it was released on May 12, 2023. You can now <a href="update_and_migration/from_4.4/update_from_4.4/">update your application to the latest version</a>. 
+        <div class="info-tile" id="tile2" style = "background: #af1164;">
+            <svg class="tile-icon align-middle" width="32" height="32"><use fill="var(--white)" xlink:href="images/ez-icons.svg#user_group"></svg>
+            <div class = "info-tile-title align-middle"><a href="customer_management/customer_management/" style="color: white;">Customer management</a></div>
+                <div class="info-tile-body align-middle">
+                    <ul>
+                        <li><a href="customer_management/customer_portal/" style="color: white;">Customer portal</a></li>
+                        <li><a href="customer_management/cp_configuration/" style="color: white;">Configuration</a></li>
+                        <li><a href="customer_management/create_user_registration_form/" style="color: white;">Registration form</a></li>
+                    </ul>
                 </div>
-                <div class="col-sm-7 features">
+            </div>
+        <div class="info-tile" id="tile2" style = "background: #af1164;">
+            <svg class="tile-icon align-middle" width="32" height="32"><use fill="var(--white)" xlink:href="images/ez-icons.svg#user"></svg>
+            <div class = "info-tile-title align-middle"><a href="users/user_management/" style="color: white;">User management</a></div>
+                <div class="info-tile-body align-middle">
                     <ul>
-                        <li><a href="release_notes/ibexa_dxp_v4.5/#all-new-ibexa-commerce-packages">Ibexa Commerce packages</a></li>
-                        <li><a href="release_notes/ibexa_dxp_v4.5/#translation-comparison">Translation comparison</a></li>
-                        <li><a href="release_notes/ibexa_dxp_v4.5/#page-builder-for-b2b-portals">Page Builder for B2B portals</a></li>
-                        <li><a href="release_notes/ibexa_dxp_v4.5/#new-commerce-page-blocks">New commerce page blocks</a></li>
-                        <li><a href="release_notes/ibexa_dxp_v4.5/#personalization-improvements">Personalization improvements</a></li>
-                        <li><a href="release_notes/ibexa_dxp_v4.5/#segment-management">Segment management</a></li>
+                        <li><a href="users/users/" style="color: white;">Users</a></li>
+                        <li><a href="users/customer_groups/" style="color: white;">Customer groups</a></li>
+                        <li><a href="users/invitations/" style="color: white;">Invitations</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
+
diff --git a/mkdocs.yml b/mkdocs.yml
index 6b00a340b5..37e60c2353 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -337,6 +337,7 @@ nav:
             - Configure Storefront: commerce/storefront/configure_storefront.md
             - Extend Storefront: commerce/storefront/extend_storefront.md
     - Customer management:
+        - Customer management: customer_management/customer_management.md
         - Customer Portal: customer_management/customer_portal.md
         - Customer Portal configuration: customer_management/cp_configuration.md
         - Create Customer Portal: customer_management/cp_page_builder.md