diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md
index 0b482ef..7c6426d 100644
--- a/docs/src/content/docs/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/challenges/angular/1-projection.md
@@ -3,54 +3,51 @@ title: 🟢 Projection
description: Challenge 1 is about learning how to project DOM element through components
---
-:::note
-WIP: go [here]() if you want to do this challenge
-:::
+Challenge #1
-> Challenge #1
+## Information
+
+In Angular, content projection is a powerful technique for creating highly customizable components. Utilizing and understanding the concepts of ng-content and ngTemplateOutlet can sighificantly enhance your ability to create shareable components.
+
+You can learn all about ng-content [here](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) from simple projection to more complex ones.
+
+To learn about ngTemplateOutlet, you can find the API documentation [here](https://angular.io/api/common/NgTemplateOutlet) along with some basic examples.
+
+With this two tools in hand, you are now ready to take on the challenge.
## Statement
-Refactor this working exemple of a dasboard containing multiple cards (teachers, students, ...)
-Implement the City card.
+You will start with an fully functional application that includes a dashboard containing a teacher card and a student card. The goal is to implement the city card.
+
+While the application works, the developer experience is far from being optimal. Every time you need to implement a new card, you have to modify the `card.component.ts`. In real-life projects, this component can be shared among many applications. The goal of the challenge is to create a CardComponent that can be customized without any modifications. Once you've created this component, you can begin implementing the CityCardComponent and ensure you are not touching the CardComponent.
## Constraints:
-- You **must** keep **CardComponent** and **ListItemComponent**
-- **NgFor** directive must be declare and stay inside **CardComponent**
-- No **NgIf** or **NgSwitch** inside **CardComponent**
-- CSS: prefer not to use **::ng-deep**, find a better way
+- You must refactor the CardComponent and ListItemComponent.
+- The NgFor directive must be declared and remain inside the CardComponent. You might be tempted to move it to the CardComponent but avoid doing so.
+- CardComponent should not contain any NgIf or NgSwitch.
+- CSS: try to avoid using ::ng-deep. Find a better way to handle CSS styling.
-## Submitting your work
+---
-1. Fork the project
-2. clone it
-3. npm ci
-4. **nx serve projection**
-5. _...work on it_
-6. Commit your work
-7. Submit a PR with a title beginning with **Answer:1** that I will review and other dev can review.
+:::note
+Start the project by running: `npx nx serve projection`.
+:::
-
- 
-
-
- 
-
-
- 
-
+:::tip[Reminder]
+Your PR title must start with Answer:1.
+:::
-_You can ask any question on_ 
+
diff --git a/docs/src/content/docs/guides/checkout-answer.md b/docs/src/content/docs/guides/checkout-answer.md
index d703ba7..93856c8 100644
--- a/docs/src/content/docs/guides/checkout-answer.md
+++ b/docs/src/content/docs/guides/checkout-answer.md
@@ -1,5 +1,5 @@
---
-title: Checkout Answer
+title: Checkout Somebody Answer
description: Guide to checkout the answer of someone else
sidebar:
order: 3
@@ -39,6 +39,10 @@ If you don't remember the command, click on the Code button on the right side of
+:::note
+If the command doesn't work or fails, Github CLI will guide you through the process.
+:::
+
🔥 You can now navigate through the solution locally and serve it to test it. 🔥
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 1ba6bc4..1af2ed7 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -12,7 +12,7 @@ hero:
icon: right-arrow
variant: primary
- text: Start your first challenge immediatly
- link: /challenges/angular/projection/
+ link: /challenges/angular/1-projection/
icon: rocket
---
diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css
index 4ff83c1..1a510f0 100644
--- a/docs/src/styles/custom-css.css
+++ b/docs/src/styles/custom-css.css
@@ -32,6 +32,34 @@
margin: 0px 2px;
}
+.chip {
+ border: 1px solid rgba(240, 246, 252, 0.1);
+ border-radius: 6px;
+ padding: 2px 8px;
+ background-color: rgb(33, 38, 45);
+ color: rgb(201, 209, 217);
+ fill: rgb(201, 209, 217);
+ width: fit-content;
+}
+
+.article-footer {
+ margin-top: 3rem !important;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+.article-footer > a {
+ border: 1px solid var(--sl-color-gray-5);
+ border-radius: 0.5rem;
+ padding: 1rem;
+ text-decoration: none;
+ color: var(--sl-color-gray-2);
+ box-shadow: var(--sl-shadow-md);
+ color: var(--sl-color-white);
+ font-size: var(--sl-text-2xl);
+ line-height: var(--sl-line-height-headings);
+}
+
a.primary {
color: #fff !important;
}