diff --git a/README.md b/README.md
index aa60946c..276c4e93 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,19 @@ Do not use heading level 1:
...
```
+### Volunteers section (WIP)
+
+You can also add volunteers to the article by adding this HTML:
+```html
+
+
+
+
John Doe
+
Software Developer
+
+
+```
+
## How to Insert News Items
News items are stored in the `content/news.yaml` file in the following format:
diff --git a/src/components/post/styles.js b/src/components/post/styles.js
index 9c94da9e..8ab248d8 100644
--- a/src/components/post/styles.js
+++ b/src/components/post/styles.js
@@ -147,6 +147,41 @@ export const Content = styled.div`
h2 {
margin-top: 50px;
}
+
+ .volunteers {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .volunteer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 15px;
+ width: 170px;
+ text-align: center;
+
+ img {
+ width: 80px;
+ height: 80px;
+ border-radius: 40px;
+ object-fit: cover;
+ }
+
+ .name {
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
+
+ .note {
+ font-size: 14px;
+ opacity: 0.5;
+
+ }
+
+ }
`;
export const Arrow = styled.img`