From 533fd0076cfe79ca9bc205533dac460aa200d915 Mon Sep 17 00:00:00 2001
From: EjdemJ <86803546+EjdemJ@users.noreply.github.com>
Date: Sat, 30 Sep 2023 12:54:42 +0200
Subject: [PATCH 1/7] 216. [PATCH] Fix state reset when leaving article page
 (#300)

---
 system/apps/blog/views/article/article.view.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/system/apps/blog/views/article/article.view.tsx b/system/apps/blog/views/article/article.view.tsx
index 69ea19e62..971c3d2cc 100644
--- a/system/apps/blog/views/article/article.view.tsx
+++ b/system/apps/blog/views/article/article.view.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { MDXRemote } from 'next-mdx-remote';
 import { ArticleScreen, Link, MainLayout, PageWrapper } from '../../components';
 import type { ArticleViewProps } from './defs';
@@ -6,6 +7,7 @@ import { ArticleThumbnail } from '../../components/article-thumbnail';
 import { ArticleMeta } from '../../components/article-meta';
 import { Box, Button, EditIcon, Font } from '@system/figa-ui';
 import { ArticleDetails } from '../../components/article-details';
+import { article_actions } from '../../store/article';
 import { auth_selectors } from '../../store/auth';
 import { useLang } from '../../dk';
 
@@ -21,6 +23,10 @@ const ArticleView = ({
   const lang = useLang();
   const isAuthor = auth_selectors.useIsAuthor(authorName);
 
+  useEffect(() => {
+    return () => article_actions.reset();
+  }, []);
+
   return (
     <MainLayout>
       <Box spacing={[150]}>

From 8e1529f312a7f4fafa1d5c7c61e110a946a05eff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Po=C5=82ubi=C5=84ski?= <polubis@wp.pl>
Date: Sat, 30 Sep 2023 12:56:14 +0200
Subject: [PATCH 2/7] 217. [PATCH] Add fonts and layout improvements with new
 properties (#299)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Adrian Połubiński <adrian.polubinski@billennium.com>
---
 system/build-storybook.log                    | 42 +++++++++----------
 system/libs/figa-ui/src/lib/font/defs.ts      |  1 +
 .../figa-ui/src/lib/font/font.stories.tsx     | 19 ++++++++-
 system/libs/figa-ui/src/lib/font/font.tsx     |  4 +-
 .../input/__snapshots__/input.test.tsx.snap   | 13 ++++++
 system/libs/figa-ui/src/lib/input/defs.ts     |  5 ++-
 .../libs/figa-ui/src/lib/input/input.test.tsx | 14 +++++++
 system/libs/figa-ui/src/lib/input/input.tsx   | 14 +++++++
 .../layout/__snapshots__/layout.test.tsx.snap | 22 ++++++++++
 system/libs/figa-ui/src/lib/layout/defs.ts    |  1 +
 .../figa-ui/src/lib/layout/layout.stories.tsx | 25 +++++++++++
 .../figa-ui/src/lib/layout/layout.test.tsx    | 10 +++++
 system/libs/figa-ui/src/lib/layout/layout.tsx |  4 +-
 .../src/lib/theme-provider/global-style.ts    | 22 ++++++++++
 14 files changed, 170 insertions(+), 26 deletions(-)

diff --git a/system/build-storybook.log b/system/build-storybook.log
index c59c5cf27..47260553e 100644
--- a/system/build-storybook.log
+++ b/system/build-storybook.log
@@ -1,5 +1,5 @@
 
-> nx run figa-ui:build-storybook -s public --output-dir C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+> nx run figa-ui:build-storybook -s public --output-dir C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 
 
 >  NX  ui framework: @storybook/react
@@ -7,13 +7,13 @@
 
 >  NX  Storybook builder starting ...
 
-info => Cleaning outputDir: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+info => Cleaning outputDir: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 info => Loading presets
-info => Copying static files: C:\Users\apolubinski\Dream-stack-for-React-dev\system\assets at C:\Users\APOLUB~1\AppData\Local\Temp\chromatic--1520-O2kSsn2j1bar\
+info => Copying static files: C:\Users\apolubinski\Dream-stack-for-React-dev\system\assets at C:\Users\APOLUB~1\AppData\Local\Temp\chromatic--24500-OnUmYP3PUH4J\
 info => Compiling manager..
 vite v4.1.4 building for production...
+info => Manager built (40 s)
 transforming...
-info => Manager built (45 s)
 
 /fonts/LexendBold.ttf referenced in C:/Users/apolubinski/Dream-stack-for-React-dev/system/libs/figa-ui/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
 
@@ -28,31 +28,31 @@ Use of eval in "node_modules/@storybook/components/dist/esm/index-681e4b07.js" i
 ✓ 2056 modules transformed.
 rendering chunks...
 computing gzip size...
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/iframe.html                                            13.71 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/iframe-039374ed.css                              0.55 kB │ gzip:   0.18 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/es.string.from-code-point-94f4f0df.js            0.59 kB │ gzip:   0.44 kB │ map:     2.25 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/es.regexp.flags-866124bc.js                      0.67 kB │ gzip:   0.47 kB │ map:     2.81 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/client-7fa0c2fc.js                               0.72 kB │ gzip:   0.46 kB │ map:     0.97 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/renderDocs-2b9269dd.js                           2.67 kB │ gzip:   1.33 kB │ map:     9.90 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/GlobalScrollAreaStyles-8793ce4a-8b8a3642.js     10.50 kB │ gzip:   2.39 kB │ map:    20.95 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/Color-f953d088-fcfca520.js                      34.27 kB │ gzip:  13.00 kB │ map:   134.17 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/WithTooltip-167e9982-6b09f1dc.js                40.96 kB │ gzip:  13.78 kB │ map:   181.36 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/OverlayScrollbars-1355f44c-d9f76308.js          64.54 kB │ gzip:  27.41 kB │ map:   444.01 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/syntaxhighlighter-b07b042a-92f2ae96.js         117.17 kB │ gzip:  48.79 kB │ map:   468.63 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/index-e7561cb4.js                              496.03 kB │ gzip: 146.16 kB │ map: 1,180.90 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/formatter-0d5cb0eb-eb19377b.js                 742.26 kB │ gzip: 239.76 kB │ map: 1,799.10 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/iframe-25e3c20e.js                           2,218.01 kB │ gzip: 613.30 kB │ map: 6,005.45 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/iframe.html                                            13.71 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/iframe-039374ed.css                              0.55 kB │ gzip:   0.18 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/es.string.from-code-point-4a5ed984.js            0.59 kB │ gzip:   0.44 kB │ map:     2.25 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/es.regexp.flags-3e1a8f2a.js                      0.67 kB │ gzip:   0.47 kB │ map:     2.81 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/client-57ae656e.js                               0.72 kB │ gzip:   0.46 kB │ map:     0.97 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/renderDocs-22285432.js                           2.67 kB │ gzip:   1.32 kB │ map:     9.90 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/GlobalScrollAreaStyles-8793ce4a-8d404270.js     10.50 kB │ gzip:   2.39 kB │ map:    20.95 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/Color-f953d088-c30e5131.js                      34.27 kB │ gzip:  13.00 kB │ map:   134.17 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/WithTooltip-167e9982-fc84e94b.js                40.96 kB │ gzip:  13.77 kB │ map:   181.36 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/OverlayScrollbars-1355f44c-0c235e05.js          64.54 kB │ gzip:  27.40 kB │ map:   444.01 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/syntaxhighlighter-b07b042a-30619d4c.js         117.17 kB │ gzip:  48.78 kB │ map:   468.63 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/index-7344df3d.js                              496.03 kB │ gzip: 146.15 kB │ map: 1,180.90 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/formatter-0d5cb0eb-6c285b14.js                 742.26 kB │ gzip: 239.76 kB │ map: 1,799.10 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/iframe-cc2bee6c.js                           2,221.20 kB │ gzip: 613.61 kB │ map: 6,000.88 kB
 
 (!) Some chunks are larger than 500 kBs after minification. Consider:
 - Using dynamic import() to code-split the application
 - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
 - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
-info => Output directory: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+info => Output directory: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 
 >  NX  Storybook builder finished ...
 
 
->  NX  Storybook files available in C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+>  NX  Storybook files available in C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 
 
  
@@ -60,5 +60,5 @@ info => Output directory: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\
  >  NX   Successfully ran target build-storybook for project figa-ui
 
 
-   View logs and investigate cache misses at https://nx.app/runs/14p6KOAcws
+   View logs and investigate cache misses at https://nx.app/runs/PEvxYxM576
 
diff --git a/system/libs/figa-ui/src/lib/font/defs.ts b/system/libs/figa-ui/src/lib/font/defs.ts
index 48928b6b1..82fb467de 100644
--- a/system/libs/figa-ui/src/lib/font/defs.ts
+++ b/system/libs/figa-ui/src/lib/font/defs.ts
@@ -29,6 +29,7 @@ interface FontProps extends FontHTMLElementProps {
   element?: SupportedFontElement;
   variant: FontVariant;
   children: ReactNode;
+  align?: 'center' | 'justify';
   italic?: boolean;
   trim?: boolean;
   motive?: FontMotive;
diff --git a/system/libs/figa-ui/src/lib/font/font.stories.tsx b/system/libs/figa-ui/src/lib/font/font.stories.tsx
index 02e87cb8a..aa464bf90 100644
--- a/system/libs/figa-ui/src/lib/font/font.stories.tsx
+++ b/system/libs/figa-ui/src/lib/font/font.stories.tsx
@@ -11,7 +11,10 @@ export default {
 
 const Template: Story = () => {
   return (
-    <Box padding={[300, 300, 300, 300]} spacing={[200, 200, 200, 200]}>
+    <Box
+      padding={[300, 300, 300, 300]}
+      spacing={[200, 200, 200, 200, 200, 200]}
+    >
       <Box>
         {FONT_VARIANTS.map((variant) => (
           <div key={variant}>
@@ -51,6 +54,20 @@ const Template: Story = () => {
           </div>
         ))}
       </Box>
+
+      <Box maxWidth="200px" padding={[50, 50, 50, 50]}>
+        <Font variant="b2" align="center">
+          I'm centered
+        </Font>
+      </Box>
+
+      <Box maxWidth="200px">
+        <Font variant="b2" align="justify">
+          I'm justified. I'm justified. I'm justified. I'm justified. I'm
+          justified. I'm justified. I'm justified. I'm justified. I'm justified.
+          I'm justified. I'm justified.
+        </Font>
+      </Box>
     </Box>
   );
 };
diff --git a/system/libs/figa-ui/src/lib/font/font.tsx b/system/libs/figa-ui/src/lib/font/font.tsx
index cfbdfe9e8..e10d17f55 100644
--- a/system/libs/figa-ui/src/lib/font/font.tsx
+++ b/system/libs/figa-ui/src/lib/font/font.tsx
@@ -23,6 +23,7 @@ const Font = ({
   motive = 'default',
   trim,
   bold,
+  align,
   ...props
 }: FontProps) => {
   return createElement(element ?? FONT_VARIANT_ELEMENT_MAP[variant], {
@@ -33,7 +34,8 @@ const Font = ({
       className,
       { italic },
       { bold },
-      { trim }
+      { trim },
+      align
     ),
     ...props,
   });
diff --git a/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap b/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap
index e5b931730..530d76a91 100644
--- a/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap
+++ b/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap
@@ -199,6 +199,19 @@ exports[`User is able to user control when input skips suffix when loading 1`] =
 </DocumentFragment>
 `;
 
+exports[`User is able to user control when textarea [FRAGILE] allows to set style 1`] = `
+<DocumentFragment>
+  <div
+    class="filled textarea"
+  >
+    <textarea
+      placeholder="type..."
+      style="max-height: 270px; min-height: 190px;"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`User is able to user control when textarea [FRAGILE] renders with default setup 1`] = `
 <DocumentFragment>
   <div
diff --git a/system/libs/figa-ui/src/lib/input/defs.ts b/system/libs/figa-ui/src/lib/input/defs.ts
index 23213e1cc..a221c4a83 100644
--- a/system/libs/figa-ui/src/lib/input/defs.ts
+++ b/system/libs/figa-ui/src/lib/input/defs.ts
@@ -23,6 +23,8 @@ interface ControlProps {
   variant?: InputVariant;
   disabled?: boolean;
   invalid?: boolean;
+  maxWidth?: string;
+  minWidth?: string;
   loading?: boolean;
   children: ReactNode;
 }
@@ -32,8 +34,7 @@ type BaseProps = Omit<ControlProps, 'children' | 'disabled' | 'className'>;
 type InputProps = InputHTMLElementProps &
   BaseProps & { prefx?: ReactNode; suffx?: ReactNode };
 
-type TextareaProps = TextareaHTMLElementProps &
-  BaseProps & { minHeight?: string; maxHeight?: string };
+type TextareaProps = TextareaHTMLElementProps & BaseProps;
 
 export type {
   InputProps,
diff --git a/system/libs/figa-ui/src/lib/input/input.test.tsx b/system/libs/figa-ui/src/lib/input/input.test.tsx
index 422045ce2..3b858e906 100644
--- a/system/libs/figa-ui/src/lib/input/input.test.tsx
+++ b/system/libs/figa-ui/src/lib/input/input.test.tsx
@@ -110,6 +110,20 @@ describe('User is able to user control when', () => {
       expect(asFragment()).toMatchSnapshot();
     });
 
+    it('[FRAGILE] allows to set style', () => {
+      const { asFragment } = render(
+        <Textarea
+          placeholder={PLACEHOLDER}
+          style={{
+            maxHeight: '270px',
+            minHeight: '190px',
+          }}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
     it('allows to use placeholder', () => {
       render(<Textarea placeholder={PLACEHOLDER} />);
 
diff --git a/system/libs/figa-ui/src/lib/input/input.tsx b/system/libs/figa-ui/src/lib/input/input.tsx
index 4c341599d..441a1039b 100644
--- a/system/libs/figa-ui/src/lib/input/input.tsx
+++ b/system/libs/figa-ui/src/lib/input/input.tsx
@@ -9,12 +9,18 @@ const Control = ({
   invalid,
   disabled,
   loading,
+  minWidth,
+  maxWidth,
   className,
   children,
 }: ControlProps) => {
   return (
     <div
       className={c(variant, { invalid }, { disabled }, { loading }, className)}
+      style={{
+        minWidth,
+        maxWidth,
+      }}
     >
       {invalid && !disabled && !loading && <ErrorIcon className="input-icon" />}
       {loading && <Loader className="input-loader" size="tiny" />}
@@ -28,6 +34,8 @@ const Textarea = ({
   variant,
   invalid,
   disabled,
+  maxWidth,
+  minWidth,
   loading,
   style,
   ...textareaProps
@@ -37,6 +45,8 @@ const Textarea = ({
       className={c('textarea', className)}
       variant={variant}
       invalid={invalid}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
       disabled={disabled}
       loading={loading}
     >
@@ -53,12 +63,16 @@ const Input = ({
   loading,
   suffx,
   prefx,
+  minWidth,
+  maxWidth,
   ...inputProps
 }: InputProps) => {
   return (
     <Control
       className={c('input', className, { prefx }, { suffx })}
       variant={variant}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
       invalid={invalid}
       disabled={disabled}
       loading={loading}
diff --git a/system/libs/figa-ui/src/lib/layout/__snapshots__/layout.test.tsx.snap b/system/libs/figa-ui/src/lib/layout/__snapshots__/layout.test.tsx.snap
index 7ba2295ea..3fba7dc8f 100644
--- a/system/libs/figa-ui/src/lib/layout/__snapshots__/layout.test.tsx.snap
+++ b/system/libs/figa-ui/src/lib/layout/__snapshots__/layout.test.tsx.snap
@@ -1,5 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`User is able to use layout when [FRAGILE] allows to disable content padding 1`] = `
+<DocumentFragment>
+  <div
+    class="layout off-padding"
+  >
+    <div>
+      Header
+    </div>
+    <main
+      class="layout-content"
+    >
+      <div>
+        Content
+      </div>
+    </main>
+    <footer
+      class="layout-footer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`User is able to use layout when [FRAGILE] allows to pass sidebar and gives option to maintain it 1`] = `
 <DocumentFragment>
   <div
diff --git a/system/libs/figa-ui/src/lib/layout/defs.ts b/system/libs/figa-ui/src/lib/layout/defs.ts
index 1f9b32804..f5a4a2827 100644
--- a/system/libs/figa-ui/src/lib/layout/defs.ts
+++ b/system/libs/figa-ui/src/lib/layout/defs.ts
@@ -6,6 +6,7 @@ interface LayoutProps {
   children: ReactNode;
   header: ReactNode;
   footer?: ReactNode;
+  offPadding?: boolean;
   sidebar?: (toggler: ToggleReturn) => ReactNode;
 }
 
diff --git a/system/libs/figa-ui/src/lib/layout/layout.stories.tsx b/system/libs/figa-ui/src/lib/layout/layout.stories.tsx
index 90655a429..b68853e99 100644
--- a/system/libs/figa-ui/src/lib/layout/layout.stories.tsx
+++ b/system/libs/figa-ui/src/lib/layout/layout.stories.tsx
@@ -189,6 +189,31 @@ WhenPageIsFullWithFooter.args = {
   footer: <div>Footer</div>,
 };
 
+export const WithoutPadding = Template.bind({});
+WithoutPadding.args = {
+  header: Header,
+  children: <div style={{ background: 'red' }}>Text</div>,
+  footer: <div>Footer</div>,
+  offPadding: true,
+};
+
+export const AsidedWithoutPadding = Template.bind({});
+AsidedWithoutPadding.args = {
+  header: Header,
+  children: (
+    <div>
+      <Font variant="h2">The content</Font>
+    </div>
+  ),
+  footer: <div>Footer</div>,
+  sidebar: (toggler) => (
+    <aside onClick={toggler.toggle}>
+      <Font variant="h5">The sidebar</Font>
+    </aside>
+  ),
+  offPadding: true,
+};
+
 export const Asided = Template.bind({});
 Asided.args = {
   header: Header,
diff --git a/system/libs/figa-ui/src/lib/layout/layout.test.tsx b/system/libs/figa-ui/src/lib/layout/layout.test.tsx
index 21dafc8ca..8ca82ebde 100644
--- a/system/libs/figa-ui/src/lib/layout/layout.test.tsx
+++ b/system/libs/figa-ui/src/lib/layout/layout.test.tsx
@@ -35,6 +35,16 @@ describe('User is able to use layout when', () => {
     screen.getByText(/Footer/);
   });
 
+  it('[FRAGILE] allows to disable content padding', () => {
+    const { asFragment } = render(
+      <Layout header={<div>Header</div>} offPadding>
+        <div>Content</div>
+      </Layout>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('[FRAGILE] allows to skip footer', () => {
     const { asFragment } = render(
       <Layout header={<div>Header</div>}>
diff --git a/system/libs/figa-ui/src/lib/layout/layout.tsx b/system/libs/figa-ui/src/lib/layout/layout.tsx
index d0639cddf..663fb21ab 100644
--- a/system/libs/figa-ui/src/lib/layout/layout.tsx
+++ b/system/libs/figa-ui/src/lib/layout/layout.tsx
@@ -8,6 +8,7 @@ const Layout = ({
   children,
   header,
   footer,
+  offPadding,
   sidebar,
 }: LayoutProps) => {
   const toggler = useToggle({ opened: !!sidebar });
@@ -18,7 +19,8 @@ const Layout = ({
         'layout',
         className,
         { asided: !!sidebar },
-        { opened: toggler.opened }
+        { opened: toggler.opened },
+        { 'off-padding': offPadding }
       )}
     >
       {header}
diff --git a/system/libs/figa-ui/src/lib/theme-provider/global-style.ts b/system/libs/figa-ui/src/lib/theme-provider/global-style.ts
index 6643d040f..b246683ef 100644
--- a/system/libs/figa-ui/src/lib/theme-provider/global-style.ts
+++ b/system/libs/figa-ui/src/lib/theme-provider/global-style.ts
@@ -146,6 +146,14 @@ const GlobalStyle = createGlobalStyle`
         &.trim, &.trim > * {
             ${trim()}
         }
+
+        &.center, &.center > * {
+            text-align: center;
+        }
+
+        &.justify, &.justify > * {
+            text-align: justify;
+        }
     }
 
     /* font.tsx */
@@ -984,6 +992,20 @@ const GlobalStyle = createGlobalStyle`
                 width: 100%;
             }
         }
+
+        &.off-padding {
+            .layout-content {
+                padding: 0;
+            }
+
+            &.asided {
+                .layout-content {
+                    & > *:last-child {
+                        padding: 0;
+                    }
+                }
+            }
+        }
     }
 
     /* layout.tsx */

From b7577af64ab03c12f08f844e79d58c9b2943cab3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Po=C5=82ubi=C5=84ski?= <polubis@wp.pl>
Date: Wed, 11 Oct 2023 09:49:36 +0200
Subject: [PATCH 3/7] 218. [PATCH] Align LeftBar component behavior (#316)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Adrian Połubiński <adrian.polubinski@billennium.com>
---
 .../blog/components/left-bar/left-bar.tsx     | 49 ++-----------
 system/libs/figa-hooks/src/index.ts           |  1 +
 .../figa-hooks/src/lib/use-scroll-to/defs.ts  |  9 +++
 .../figa-hooks/src/lib/use-scroll-to/index.ts |  2 +
 .../lib/use-scroll-to/use-scroll-to.test.tsx  | 73 +++++++++++++++++++
 .../src/lib/use-scroll-to/use-scroll-to.tsx   | 17 +++++
 system/nx.json                                |  2 +-
 7 files changed, 108 insertions(+), 45 deletions(-)
 create mode 100644 system/libs/figa-hooks/src/lib/use-scroll-to/defs.ts
 create mode 100644 system/libs/figa-hooks/src/lib/use-scroll-to/index.ts
 create mode 100644 system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.test.tsx
 create mode 100644 system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.tsx

diff --git a/system/apps/blog/components/left-bar/left-bar.tsx b/system/apps/blog/components/left-bar/left-bar.tsx
index 0108c1ca0..6b32731cf 100644
--- a/system/apps/blog/components/left-bar/left-bar.tsx
+++ b/system/apps/blog/components/left-bar/left-bar.tsx
@@ -1,53 +1,14 @@
-import {
-  ArrowTopIcon,
-  Button,
-  DiscordIcon,
-  LinkedinIcon,
-  LeftBar as UILeftBar,
-  UserIcon,
-} from '@system/figa-ui';
-import {
-  GREEN_ON_SOFTWARE_AUTHOR,
-  GREEN_ON_SOFTWARE_DISCORD,
-  GREEN_ON_SOFTWARE_LINKEDIN,
-} from '../../consts';
+import { useScrollTo } from '@system/figa-hooks';
+import { ArrowTopIcon, Button, LeftBar as UILeftBar } from '@system/figa-ui';
 
 const LeftBar = () => {
+  const [, { toTop }] = useScrollTo();
+
   return (
     <UILeftBar>
-      <Button shape="rounded" size={2}>
+      <Button shape="rounded" size={2} onClick={() => toTop()}>
         <ArrowTopIcon />
       </Button>
-      <a
-        href={GREEN_ON_SOFTWARE_DISCORD}
-        title="GreenOn Software Discord channel"
-        target="_blank"
-        rel="noreferrer"
-      >
-        <Button shape="rounded" size={2}>
-          <DiscordIcon />
-        </Button>
-      </a>
-      <a
-        href={GREEN_ON_SOFTWARE_AUTHOR}
-        title="Adrian Połubiński Linkedin"
-        target="_blank"
-        rel="noreferrer"
-      >
-        <Button shape="rounded" size={2}>
-          <UserIcon />
-        </Button>
-      </a>
-      <a
-        href={GREEN_ON_SOFTWARE_LINKEDIN}
-        title="Linkedin GreenOn Software profile"
-        target="_blank"
-        rel="noreferrer"
-      >
-        <Button shape="rounded" size={2}>
-          <LinkedinIcon />
-        </Button>
-      </a>
     </UILeftBar>
   );
 };
diff --git a/system/libs/figa-hooks/src/index.ts b/system/libs/figa-hooks/src/index.ts
index 668b6d52a..10796afc7 100644
--- a/system/libs/figa-hooks/src/index.ts
+++ b/system/libs/figa-hooks/src/index.ts
@@ -10,3 +10,4 @@ export * from './lib/use-isomorphic-layout-effect';
 export * from './lib/use-scroll';
 export * from './lib/use-query-params';
 export * from './lib/use-scroll-hide';
+export * from './lib/use-scroll-to';
diff --git a/system/libs/figa-hooks/src/lib/use-scroll-to/defs.ts b/system/libs/figa-hooks/src/lib/use-scroll-to/defs.ts
new file mode 100644
index 000000000..47441ea7e
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-scroll-to/defs.ts
@@ -0,0 +1,9 @@
+import type { MutableRefObject } from 'react';
+
+type ToTop = (behavior?: ScrollBehavior) => void;
+
+type ScrollToReturn<T extends HTMLElement = HTMLElement> = Readonly<
+  [MutableRefObject<T | null>, { toTop: ToTop }]
+>;
+
+export type { ToTop, ScrollToReturn };
diff --git a/system/libs/figa-hooks/src/lib/use-scroll-to/index.ts b/system/libs/figa-hooks/src/lib/use-scroll-to/index.ts
new file mode 100644
index 000000000..a3a7fc2ce
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-scroll-to/index.ts
@@ -0,0 +1,2 @@
+export * from './use-scroll-to';
+export * from './defs';
diff --git a/system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.test.tsx b/system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.test.tsx
new file mode 100644
index 000000000..c1b0bc21d
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.test.tsx
@@ -0,0 +1,73 @@
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { useScrollTo } from './use-scroll-to';
+
+describe('Scroll to works when: ', () => {
+  it('user is able to scroll to top for window', () => {
+    const spy = jest.spyOn(window, 'scrollTo').mockImplementation(jest.fn());
+
+    const { result } = renderHook(() => useScrollTo());
+
+    act(() => {
+      result.current[1].toTop('smooth');
+    });
+
+    expect(spy).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
+
+    act(() => {
+      result.current[1].toTop();
+    });
+
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(spy).toHaveBeenCalledWith({ behavior: undefined, top: 0 });
+  });
+
+  it('user is able to scroll to top for HTML element', async () => {
+    const Fixture = () => {
+      const [ref, { toTop }] = useScrollTo<HTMLDivElement>();
+
+      return (
+        <div
+          ref={ref}
+          title="Fixture"
+          style={{
+            height: '300px',
+            width: '300px',
+            overflowY: 'scroll',
+          }}
+        >
+          <div title="Result" style={{ height: '500px', width: '500px' }}>
+            Content
+          </div>
+          <button onClick={() => toTop('instant')}>Scroll to top</button>
+        </div>
+      );
+    };
+
+    render(<Fixture />);
+
+    expect(screen.getByTitle(/Fixture/).scrollTop).toBe(0);
+
+    fireEvent.scroll(screen.getByTitle(/Fixture/), {
+      target: {
+        scrollTop: 200,
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTitle(/Fixture/).scrollTop).toBe(200);
+    });
+
+    fireEvent.click(screen.getByText(/Scroll to top/));
+
+    await waitFor(() => {
+      expect(screen.getByTitle(/Fixture/).scrollTop).toBe(0);
+    });
+  });
+});
diff --git a/system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.tsx b/system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.tsx
new file mode 100644
index 000000000..6ba66c768
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-scroll-to/use-scroll-to.tsx
@@ -0,0 +1,17 @@
+import { useCallback, useRef } from 'react';
+import type { ScrollToReturn, ToTop } from './defs';
+
+const useScrollTo = <
+  T extends HTMLElement = HTMLElement
+>(): ScrollToReturn<T> => {
+  const ref = useRef<T>(null);
+
+  const toTop: ToTop = useCallback((behavior) => {
+    if (ref.current) ref.current.scrollTop = 0;
+    else window.scrollTo({ top: 0, behavior });
+  }, []);
+
+  return [ref, { toTop }];
+};
+
+export { useScrollTo };
diff --git a/system/nx.json b/system/nx.json
index 243aa4c87..2c55f6c15 100644
--- a/system/nx.json
+++ b/system/nx.json
@@ -15,7 +15,7 @@
           "e2e",
           "build-storybook"
         ],
-        "accessToken": "NWI2MDMyMWItMTA4Ni00ZTUwLTgzZTMtMjAxZmYyZjk5ZjlmfHJlYWQtd3JpdGU="
+        "accessToken": "YWEyN2VmYTYtZTNmZS00M2IzLWE3ZDQtNzVlM2YwZjI2NWIwfHJlYWQtd3JpdGU="
       }
     }
   },

From 443def34c27630ad9a2a7b328b4a77d8ba88ece5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Po=C5=82ubi=C5=84ski?= <polubis@wp.pl>
Date: Mon, 16 Oct 2023 09:07:51 +0200
Subject: [PATCH 4/7] 219. [PATCH] Add useSubject hook (#319)

---
 system/libs/figa-hooks/src/index.ts           |  1 +
 .../figa-hooks/src/lib/use-subject/defs.ts    | 13 +++++++
 .../figa-hooks/src/lib/use-subject/index.ts   |  2 +
 .../src/lib/use-subject/use-subject.test.ts   | 20 ++++++++++
 .../src/lib/use-subject/use-subject.ts        | 38 +++++++++++++++++++
 5 files changed, 74 insertions(+)
 create mode 100644 system/libs/figa-hooks/src/lib/use-subject/defs.ts
 create mode 100644 system/libs/figa-hooks/src/lib/use-subject/index.ts
 create mode 100644 system/libs/figa-hooks/src/lib/use-subject/use-subject.test.ts
 create mode 100644 system/libs/figa-hooks/src/lib/use-subject/use-subject.ts

diff --git a/system/libs/figa-hooks/src/index.ts b/system/libs/figa-hooks/src/index.ts
index 10796afc7..e40b1def3 100644
--- a/system/libs/figa-hooks/src/index.ts
+++ b/system/libs/figa-hooks/src/index.ts
@@ -11,3 +11,4 @@ export * from './lib/use-scroll';
 export * from './lib/use-query-params';
 export * from './lib/use-scroll-hide';
 export * from './lib/use-scroll-to';
+export * from './lib/use-subject';
diff --git a/system/libs/figa-hooks/src/lib/use-subject/defs.ts b/system/libs/figa-hooks/src/lib/use-subject/defs.ts
new file mode 100644
index 000000000..493e46109
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-subject/defs.ts
@@ -0,0 +1,13 @@
+import type { Observable } from 'rxjs';
+
+interface SubjectConfig<T> {
+  delay?: number;
+  cb(data: T): void;
+}
+
+interface SubjectReturn<T> {
+  emit(data: T): void;
+  $: Observable<T>;
+}
+
+export type { SubjectConfig, SubjectReturn };
diff --git a/system/libs/figa-hooks/src/lib/use-subject/index.ts b/system/libs/figa-hooks/src/lib/use-subject/index.ts
new file mode 100644
index 000000000..9df12d478
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-subject/index.ts
@@ -0,0 +1,2 @@
+export * from './use-subject';
+export * from './defs';
diff --git a/system/libs/figa-hooks/src/lib/use-subject/use-subject.test.ts b/system/libs/figa-hooks/src/lib/use-subject/use-subject.test.ts
new file mode 100644
index 000000000..de04dd16d
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-subject/use-subject.test.ts
@@ -0,0 +1,20 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useSubject } from './use-subject';
+
+describe('Subject can be used when: ', () => {
+  it('listen for actions', async () => {
+    const spy = jest.fn();
+    const { result } = renderHook(() =>
+      useSubject<string>({ cb: spy, delay: 150 })
+    );
+
+    act(() => {
+      result.current.emit('text');
+    });
+
+    await waitFor(() => {
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith('text');
+    });
+  });
+});
diff --git a/system/libs/figa-hooks/src/lib/use-subject/use-subject.ts b/system/libs/figa-hooks/src/lib/use-subject/use-subject.ts
new file mode 100644
index 000000000..af73215e6
--- /dev/null
+++ b/system/libs/figa-hooks/src/lib/use-subject/use-subject.ts
@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Subject, Subscription, debounceTime } from 'rxjs';
+import type { SubjectConfig, SubjectReturn } from './defs';
+
+const useSubject = <T>(config: SubjectConfig<T>): SubjectReturn<T> => {
+  const sub = useRef<Subscription>();
+  const { action, action$ } = useMemo(() => {
+    const action = new Subject<T>();
+
+    return {
+      action,
+      action$: action.asObservable(),
+    };
+  }, []);
+
+  useEffect(() => {
+    sub.current = new Subscription();
+    const current = sub.current;
+    const delay = config.delay ?? 300;
+
+    current.add(action$.pipe(debounceTime(delay)).subscribe(config.cb));
+
+    return () => {
+      current.unsubscribe();
+    };
+  }, [config.cb, config.delay, action$]);
+
+  const emit = useCallback(
+    (data: T) => {
+      action.next(data);
+    },
+    [action]
+  );
+
+  return { emit, $: action$ };
+};
+
+export { useSubject };

From 6918a09db03e54833b9e80caf4777c65d43460d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20W=C4=99grodzki?=
 <Reynart01@users.noreply.github.com>
Date: Tue, 17 Oct 2023 07:20:11 +0200
Subject: [PATCH 5/7] 220. [FEATURE] Add tags to articles (#318)

* Added tags WiP

* Added tags endpoints

* Update Article and search

* Remove comment

* Removed comments

* Tags logic improvements
---
 .../Controllers/ArticlesController.cs         |  16 +
 .../Articles/AddArticleCommand/AddArticle.cs  |   3 +-
 .../AddArticleCommand/AddArticleHandler.cs    |   9 +-
 .../AddArticleCommand/AddArticleValidator.cs  |  13 +
 .../Articles/GetArticleQuery/ArticleDto.cs    |   1 +
 .../GetArticlesQuery/ArticleLookupDto.cs      |   2 +
 .../Articles/GetArticlesQuery/GetArticles.cs  |   2 +-
 .../GetArticlesQuery/GetArticlesHandler.cs    |  10 +
 .../GetArticlesQuery/GetArticlesValidator.cs  |  12 +
 .../Articles/GetTagsQuery/GetTags.cs          |   8 +
 .../Articles/GetTagsQuery/GetTagsHandler.cs   |  41 ++
 .../UpdateArticleCommand/UpdateArticle.cs     |   3 +-
 .../UpdateArticleHandler.cs                   |  18 +-
 .../UpdateArticleValidator.cs                 |  13 +
 .../DependencyInjection.cs                    |   1 +
 .../_Mapper/ArticlesMapperProfile.cs          |   8 +-
 .../_Services/Interfaces/ITagsService.cs      |   8 +
 .../_Services/RatingsSessionService.cs        |   2 +-
 .../_Services/TagsService.cs                  |  50 ++
 .../GreenOnSoftware.Core/Models/Article.cs    |  27 +-
 .../GreenOnSoftware.Core/Models/ArticleTag.cs |  27 +
 .../GreenOnSoftware.Core/Models/Tag.cs        |  18 +
 .../Configuration/ArticleConfiguration.cs     |   3 +
 .../Configuration/TagConfiguration.cs         |  17 +
 .../GreenOnSoftwareDbContext.cs               |   1 +
 .../20231010141228_AddTags.Designer.cs        | 633 ++++++++++++++++++
 .../Migrations/20231010141228_AddTags.cs      |  74 ++
 .../GreenOnSoftwareDbContextModelSnapshot.cs  |  46 ++
 28 files changed, 1051 insertions(+), 15 deletions(-)
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTags.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTagsHandler.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/Interfaces/ITagsService.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/TagsService.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/ArticleTag.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Tag.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/TagConfiguration.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.Designer.cs
 create mode 100644 dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.cs

diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Api/Controllers/ArticlesController.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Api/Controllers/ArticlesController.cs
index 06f4ac70b..02d782ff8 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Api/Controllers/ArticlesController.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Api/Controllers/ArticlesController.cs
@@ -21,6 +21,8 @@
 using GreenOnSoftware.Application.Reviews.GetReviewsQuery;
 using GreenOnSoftware.Core.Enums;
 using GreenOnSoftware.Application.Ratings.UpdateArticleRate;
+using static Microsoft.EntityFrameworkCore.DbLoggerCategory;
+using GreenOnSoftware.Application.Articles.GetTagsQuery;
 
 namespace GreenOnSoftware.Api.Controllers;
 
@@ -240,6 +242,20 @@ public async Task<IActionResult> GetMyArticlesEn([FromQuery] GetArticles query)
         return Ok(result);
     }
 
+    [AllowAnonymous]
+    [HttpGet("Tags")]
+    [SwaggerResponse(StatusCodes.Status200OK, type: typeof(IEnumerable<string>))]
+    public async Task<IActionResult> GetTags()
+    {
+        var result = await _mediator.Send(new GetTags());
+
+        if (result.HasErrors)
+        {
+            return BadRequest(result);
+        }
+
+        return Ok(result);
+    }
     #endregion Articles
 
     #region Ratings
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticle.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticle.cs
index c89c29856..4235e81d5 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticle.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticle.cs
@@ -9,4 +9,5 @@ public record AddArticle(
     string? Description,
     string Content,
     IFormFile Thumbnail,
-    string Lang) : IRequest<Result>;
+    string Lang,
+    string[] Tags) : IRequest<Result>;
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleHandler.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleHandler.cs
index c84c60598..07bb98c64 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleHandler.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleHandler.cs
@@ -18,15 +18,17 @@ internal class AddArticleHandler : IRequestHandler<AddArticle, Result>
     private readonly IThumbnailService _thumbnailService;
     private readonly IContext _context;
     private readonly IArticleUrlIdentifierService _articleUrlIdentifierService;
+    private readonly ITagsService _tagsService;
 
     public AddArticleHandler(IClock clock, GreenOnSoftwareDbContext dbContext, IThumbnailService thumbnailService,
-        IContext context, IArticleUrlIdentifierService articleUrlIdentifierService)
+        IContext context, IArticleUrlIdentifierService articleUrlIdentifierService, ITagsService tagsService)
     {
         _clock = clock;
         _dbContext = dbContext;
         _thumbnailService = thumbnailService;
         _context = context;
         _articleUrlIdentifierService = articleUrlIdentifierService;
+        _tagsService = tagsService;
     }
 
     public async Task<Result> Handle(AddArticle command, CancellationToken cancellationToken)
@@ -53,6 +55,8 @@ public async Task<Result> Handle(AddArticle command, CancellationToken cancellat
 
         string? thumbnailUrl = uploadPictureResult.Data;
 
+        List<Tag> tags = await _tagsService.ConvertToValidTagsAsync(command.Tags);
+
         var newArticle = new Article(
             command.Title,
             command.Description,
@@ -61,7 +65,8 @@ public async Task<Result> Handle(AddArticle command, CancellationToken cancellat
             url,
             lang,
             _context.Identity.Id!,
-            _clock.UtcNow);
+            _clock.UtcNow,
+            tags);
 
         await _dbContext.Articles.AddAsync(newArticle);
         await _dbContext.SaveChangesAsync();
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleValidator.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleValidator.cs
index 3f8e702c0..85350e550 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleValidator.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/AddArticleCommand/AddArticleValidator.cs
@@ -22,5 +22,18 @@ public AddArticleValidator()
 
         RuleFor(x => x.Thumbnail)
             .NotEmpty();
+
+        RuleFor(x => x.Tags)
+            .NotEmpty()
+            .Must(x => x?.Length >= 1 && x?.Length <= 10)
+            .WithMessage(x => "Number of tags must be between 1 and 10");
+
+        RuleForEach(x => x.Tags)
+            .ChildRules(tag =>
+                tag.RuleFor(x => x)
+                    .MinimumLength(1)
+                    .MaximumLength(20)
+                    .Matches(@"^([A-Z][a-z0-9\+\&\#\!\=\.\@\*]*)+$")
+                    .WithMessage("Tag must be in PascalCase. Allowed special characters: ., #, $, =, +, !, @, *"));
     }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticleQuery/ArticleDto.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticleQuery/ArticleDto.cs
index 737bcd695..6c2b64ad4 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticleQuery/ArticleDto.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticleQuery/ArticleDto.cs
@@ -21,4 +21,5 @@ public class ArticleDto
 
     public DateTime CreatedDate { get; set; }
     public DateTime ModifiedDate { get; set; }
+    public string[] Tags { get; set; }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/ArticleLookupDto.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/ArticleLookupDto.cs
index 6f4d9924e..f8b438dad 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/ArticleLookupDto.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/ArticleLookupDto.cs
@@ -17,4 +17,6 @@ public class ArticleLookupDto
 
     [JsonConverter(typeof(LanguageToTextConverter))]
     public Language Lang { get; set; }
+
+    public string[] Tags { get; set; }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticles.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticles.cs
index 9bb1f0e5b..af60ceb56 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticles.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticles.cs
@@ -3,7 +3,7 @@
 
 namespace GreenOnSoftware.Application.Articles.GetArticlesQuery;
 
-public record GetArticles(string[]? Status, string? Search, int? ItemsPerPage, int? CurrentPage)
+public record GetArticles(string[]? Status, string? Search, int? ItemsPerPage, int? CurrentPage, string[]? Tags)
     : ISearchQuery<ArticleLookupDto>
 {
     internal Language Lang { get; private set; }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesHandler.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesHandler.cs
index 5c2a2b916..5bb93dfe3 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesHandler.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesHandler.cs
@@ -49,6 +49,16 @@ public async Task<PagedResult<ArticleLookupDto>> Handle(GetArticles query, Cance
             .Where(() => isAnnonymous, x => x.Status == Status.Accepted)
             .Where(() => isGeneralUser, x => x.Status == Status.Accepted || x.AuthorId == _context.Identity.Id)
             .Where(() => isAdminOrContentEditor, x => x.Status != Status.Draft || x.AuthorId == _context.Identity.Id);
+        
+        if(query.Tags?.Length > 0)
+        {
+            foreach(var tag in query.Tags)
+            {
+
+                queryable = queryable
+                    .Where(x => x.Tags.Any(t=>t.Name == tag));
+            }
+        }
 
         var totalItems = await queryable.CountAsync(cancellationToken);
         var totalPages = totalItems <= itemsPerPage ? 1 : (int)Math.Ceiling((double)totalItems / itemsPerPage);
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesValidator.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesValidator.cs
index 285978fc4..5a8e88f66 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesValidator.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetArticlesQuery/GetArticlesValidator.cs
@@ -25,5 +25,17 @@ public GetArticlesValidator(IContext context)
 
         RuleFor(x => x.CurrentPage)
             .LessThanOrEqualTo(1000);
+
+        RuleFor(x => x.Tags)
+            .Must(x => x is null || x.Length <= 10)
+            .WithMessage(x => "Maximum number of tags: 10");
+
+        RuleForEach(x => x.Tags)
+            .ChildRules(tag =>
+                tag.RuleFor(x => x)
+                    .MinimumLength(1)
+                    .MaximumLength(20)
+                    .Matches(@"^([A-Z][a-z0-9\+\&\#\!\=\.\@\*]*)+$")
+                    .WithMessage("Tag must be in PascalCase. Allowed special characters: ., #, $, =, +, !, @, *"));
     }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTags.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTags.cs
new file mode 100644
index 000000000..1984309a9
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTags.cs
@@ -0,0 +1,8 @@
+using GreenOnSoftware.Commons.Dtos;
+using MediatR;
+
+namespace GreenOnSoftware.Application.Articles.GetTagsQuery;
+
+public record GetTags : IRequest<Result>
+{
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTagsHandler.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTagsHandler.cs
new file mode 100644
index 000000000..aa65f5287
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/GetTagsQuery/GetTagsHandler.cs
@@ -0,0 +1,41 @@
+using GreenOnSoftware.Commons.Context;
+using GreenOnSoftware.Commons.Dtos;
+using GreenOnSoftware.Commons.Extensions;
+using GreenOnSoftware.Core.Enums;
+using GreenOnSoftware.DataAccess;
+using MediatR;
+using Microsoft.EntityFrameworkCore;
+
+namespace GreenOnSoftware.Application.Articles.GetTagsQuery;
+
+public sealed class GetTagsHandler : IRequestHandler<GetTags, Result>
+{
+    private readonly IContext _context;
+    private readonly GreenOnSoftwareDbContext _dbContext;
+
+    public GetTagsHandler(IContext context, GreenOnSoftwareDbContext dbContext)
+    {
+        _context = context;
+        _dbContext = dbContext;
+    }
+
+    public async Task<Result> Handle(GetTags request, CancellationToken cancellationToken)
+    {
+        var result = new Result<IEnumerable<string>>();
+        var isAnnonymous = !_context.Identity.IsAuthenticated;
+        var isGeneralUser = _context.Identity.IsGeneralUser;
+        var isAdminOrContentEditor = _context.Identity.IsAdmin || _context.Identity.IsContentEditor;
+
+        var tags = await _dbContext.Tags
+            .Where(x => x.Articles.Any(a => !a.IsDeleted))
+            .Where(() => isAnnonymous, x => x.Articles.Any(a => a.Status == Status.Accepted))
+            .Where(() => isGeneralUser, x => x.Articles.Any(a => a.Status == Status.Accepted || a.AuthorId == _context.Identity.Id))
+            .Where(() => isAdminOrContentEditor, x => x.Articles.Any(a => a.Status != Status.Draft || a.AuthorId == _context.Identity.Id))
+            .Select(x=>x.Name)
+            .ToListAsync();
+
+        result.SetData(tags);
+
+        return result;
+    }
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticle.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticle.cs
index 02b4c7e16..953fb88ee 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticle.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticle.cs
@@ -10,7 +10,8 @@ public record UpdateArticle(
     string? Description,
     string Content,
     IFormFile? Thumbnail, 
-    string Lang) : IRequest<Result>
+    string Lang,
+    string[] Tags) : IRequest<Result>
 {
     internal string UrlIdentifier { get; private set; }
     internal Language CurrentLang { get; private set; }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleHandler.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleHandler.cs
index 40c2f5b5b..741342895 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleHandler.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleHandler.cs
@@ -19,8 +19,9 @@ internal sealed class UpdateArticleHandler : IRequestHandler<UpdateArticle, Resu
     private readonly IBlobStorageService _blobStorageService;
     private readonly IContext _context;
     private readonly IArticleUrlIdentifierService _articleUrlIdentifierService;
+    private readonly ITagsService _tagsService;
 
-    public UpdateArticleHandler(IClock clock, GreenOnSoftwareDbContext dbContext, IBlobStorageService blobStorageService, IThumbnailService thumbnailService, IContext context, IArticleUrlIdentifierService articleUrlIdentifierService)
+    public UpdateArticleHandler(IClock clock, GreenOnSoftwareDbContext dbContext, IBlobStorageService blobStorageService, IThumbnailService thumbnailService, IContext context, IArticleUrlIdentifierService articleUrlIdentifierService, ITagsService tagsService)
     {
         _clock = clock;
         _blobStorageService = blobStorageService;
@@ -28,6 +29,7 @@ public UpdateArticleHandler(IClock clock, GreenOnSoftwareDbContext dbContext, IB
         _dbContext = dbContext;
         _context = context;
         _articleUrlIdentifierService = articleUrlIdentifierService;
+        _tagsService = tagsService;
     }
 
     public async Task<Result> Handle(UpdateArticle command, CancellationToken cancellationToken)
@@ -43,8 +45,13 @@ public async Task<Result> Handle(UpdateArticle command, CancellationToken cancel
 
         Language destLang = Enum.Parse<Language>(command.Lang, ignoreCase: true);
 
-        Article? currentArticle = await _dbContext.Articles
-            .FirstOrDefaultAsync(x => !x.IsDeleted && x.Lang == command.CurrentLang && x.Url == command.UrlIdentifier, cancellationToken);
+        var queryResult = await _dbContext.Articles
+            .Include(x => x.Tags)
+            .Where(x => !x.IsDeleted && x.Lang == command.CurrentLang && x.Url == command.UrlIdentifier)
+            .Select(article => new { article, tags = article.Tags.Select(t => new { t.Id, t.Articles.Count }) })
+            .FirstOrDefaultAsync();
+
+        Article? currentArticle = queryResult?.article;
 
         if (currentArticle is null)
         {
@@ -101,6 +108,11 @@ public async Task<Result> Handle(UpdateArticle command, CancellationToken cancel
             destLang,
             _clock.UtcNow);
 
+        List<Tag> tags = await _tagsService.ConvertToValidTagsAsync(command.Tags);
+        IEnumerable<Tag> tagsToRemove = currentArticle.UpdateTags(tags);
+        tagsToRemove = tagsToRemove.Where(x => queryResult!.tags.Any(y => y.Id == x.Id && y.Count == 1)).ToList();
+
+        _dbContext.Tags.RemoveRange(tagsToRemove);
         await _dbContext.SaveChangesAsync(cancellationToken);
 
         result.SetData(new UpdateArticleResult {
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleValidator.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleValidator.cs
index 9a4dcfe2d..05060d5e7 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleValidator.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/Articles/UpdateArticleCommand/UpdateArticleValidator.cs
@@ -19,5 +19,18 @@ public UpdateArticleValidator()
             .MaximumLength(2)
             .Must(x => Enum.TryParse<Language>(x, ignoreCase: true, out _))
             .WithMessage("Lang must have valid values");
+
+        RuleFor(x => x.Tags)
+           .NotEmpty()
+           .Must(x => x?.Length >= 1 && x?.Length <= 10)
+           .WithMessage(x => "Number of tags must be between 1 and 10");
+
+        RuleForEach(x => x.Tags)
+            .ChildRules(tag =>
+                tag.RuleFor(x => x)
+                    .MinimumLength(1)
+                    .MaximumLength(20)
+                    .Matches(@"^([A-Z][a-z0-9\+\&\#\!\=\.\@\*]*)+$")
+                    .WithMessage("Tag must be in PascalCase. Allowed special characters: ., #, $, =, +, !, @, *"));
     }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/DependencyInjection.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/DependencyInjection.cs
index e3272350b..bf2d75031 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/DependencyInjection.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/DependencyInjection.cs
@@ -12,6 +12,7 @@ public static IServiceCollection AddApplication(this IServiceCollection services
         services.AddTransient<IThumbnailService, ThumbnailService>();
         services.AddTransient<IRatingsSessionService, RatingsSessionService>();
         services.AddTransient<IArticleUrlIdentifierService, ArticleUrlIdentifierService>();
+        services.AddTransient<ITagsService, TagsService>();
 
         return services;
     }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Mapper/ArticlesMapperProfile.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Mapper/ArticlesMapperProfile.cs
index fd9da541b..35ffdb646 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Mapper/ArticlesMapperProfile.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Mapper/ArticlesMapperProfile.cs
@@ -14,12 +14,14 @@ public ArticlesMapperProfile()
     {
         CreateProjection<Article, ArticleLookupDto>()
             .ForMember(dest => dest.AuthorEmail, o => o.MapFrom(src => src.Author != null ? src.Author.Email : null))
-            .ForMember(dest => dest.AuthorName, o => o.MapFrom(src => src.Author != null ? src.Author.UserName : null));
+            .ForMember(dest => dest.AuthorName, o => o.MapFrom(src => src.Author != null ? src.Author.UserName : null))
+            .ForMember(dest => dest.Tags, o => o.MapFrom(src => src.Tags != null ? src.Tags.Select(x=>x.Name) : null));
 
         CreateMap<Article, ArticleDto>()
             .ForMember(dest => dest.AuthorEmail, o => o.MapFrom((src, dest) => src.Author?.Email))
-            .ForMember(dest => dest.AuthorName, o => o.MapFrom((src, dest) => src.Author?.UserName));   
-        
+            .ForMember(dest => dest.AuthorName, o => o.MapFrom((src, dest) => src.Author?.UserName))
+            .ForMember(dest => dest.Tags, o => o.MapFrom(src => src.Tags != null ? src.Tags.Select(x => x.Name) : null));
+
         CreateMap<Review, ReviewDto>()
             .ForMember(dest => dest.ReviewerName, o => o.MapFrom((src, dest) => src.Reviewer?.UserName))
             .AfterMap<CurrentUserReviewerAction>();
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/Interfaces/ITagsService.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/Interfaces/ITagsService.cs
new file mode 100644
index 000000000..1423a9acd
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/Interfaces/ITagsService.cs
@@ -0,0 +1,8 @@
+using GreenOnSoftware.Core.Models;
+
+namespace GreenOnSoftware.Application.Services.Interfaces;
+
+public interface ITagsService
+{
+    Task<List<Tag>> ConvertToValidTagsAsync(string[] tags);
+}
\ No newline at end of file
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/RatingsSessionService.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/RatingsSessionService.cs
index 125940891..7cf5bb2ed 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/RatingsSessionService.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/RatingsSessionService.cs
@@ -18,4 +18,4 @@ public void SetAvatarName(string avatarName)
     {
         _httpContextAccessor.HttpContext!.Session.SetString(AvatarNameKey, avatarName);
     }
-}
\ No newline at end of file
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/TagsService.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/TagsService.cs
new file mode 100644
index 000000000..56e854b9c
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Application/_Services/TagsService.cs
@@ -0,0 +1,50 @@
+using GreenOnSoftware.Application.Services.Interfaces;
+using GreenOnSoftware.Core.Models;
+using GreenOnSoftware.DataAccess;
+using Microsoft.EntityFrameworkCore;
+
+namespace GreenOnSoftware.Application.Services;
+
+public class TagsService : ITagsService
+{
+    private readonly GreenOnSoftwareDbContext _dbContext;
+
+    public TagsService(GreenOnSoftwareDbContext dbContext)
+    {
+        _dbContext = dbContext;
+    }
+
+    public async Task<List<Tag>> ConvertToValidTagsAsync(string[] tags)
+    {
+        IEnumerable<Tag> existingTags = await GetAllTagsAsync();
+
+        existingTags = existingTags
+            .Where(x => tags.Any(y => y.Equals(x.Name, StringComparison.OrdinalIgnoreCase)));
+
+        IEnumerable<Tag> newTags = tags
+            .Where(x => !existingTags.Any(y => y.Name.Equals(x, StringComparison.OrdinalIgnoreCase)))
+            .Select(x => new Tag(x));
+
+        return existingTags
+            .Concat(newTags)
+            .ToList();
+    }
+
+    public async Task DeleteUnusedTagsAsync()
+    {
+        var tags = await _dbContext.Tags
+            .Where(x => !x.Articles.Any())
+            .ToListAsync();
+
+        _dbContext.Tags.RemoveRange(tags);
+
+        await _dbContext.SaveChangesAsync();
+    }
+
+    private async Task<List<Tag>> GetAllTagsAsync()
+    {
+        return await _dbContext
+            .Tags
+            .ToListAsync();
+    }
+}
\ No newline at end of file
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Article.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Article.cs
index b02973a54..760725fb1 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Article.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Article.cs
@@ -2,10 +2,9 @@
 using GreenOnSoftware.Core.Identity;
 using GreenOnSoftware.Core.Models.Ratings;
 using GreenOnSoftware.Core.Models.Reviews;
-using Microsoft.AspNetCore.Identity;
-using System.Linq;
 
 namespace GreenOnSoftware.Core.Models;
+
 public class Article : Entity
 {
     private Article()
@@ -13,7 +12,7 @@ private Article()
 
     }
 
-    public Article(string title, string? description, string content, string? thumbnailUrl, string url, Language lang, Guid authorId, DateTime operationDate)
+    public Article(string title, string? description, string content, string? thumbnailUrl, string url, Language lang, Guid authorId, DateTime operationDate, List<Tag> tags)
     {
         CreatedDate = ModifiedDate = operationDate;
         Title = title;
@@ -24,6 +23,7 @@ public Article(string title, string? description, string content, string? thumbn
         AuthorId = authorId;
         Status = Status.Draft;
         Lang = lang;
+        Tags = tags;
     }
 
     public DateTime CreatedDate { get; private set; }
@@ -49,6 +49,8 @@ public Article(string title, string? description, string content, string? thumbn
 
     public List<Review> Reviews { get; private set; } = new();
 
+    public List<Tag> Tags { get; private set; } = new();
+
     public void Update(string title, string? description, string content, string url, Language lang, DateTime operationDate)
     {
         Title = title;
@@ -267,4 +269,23 @@ public IEnumerable<Review> GetReviews()
         return Reviews
             .OrderByDescending(x => x.CreatedDate);
     }
+
+    public IEnumerable<Tag> UpdateTags(List<Tag> tags)
+    {
+        IEnumerable<Tag> newTags = tags
+            .Where(x => !Tags.Any(y => y.Id == x.Id));
+
+        IEnumerable<Tag> tagsToRemove = Tags
+            .Where(x => !tags.Any(y => y.Id == x.Id))
+            .ToList();
+
+        foreach (var articleTag in tagsToRemove)
+        {
+            Tags.Remove(articleTag);
+        }
+
+        Tags.AddRange(newTags);
+
+        return tagsToRemove;
+    }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/ArticleTag.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/ArticleTag.cs
new file mode 100644
index 000000000..e89751d39
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/ArticleTag.cs
@@ -0,0 +1,27 @@
+namespace GreenOnSoftware.Core.Models;
+
+public class ArticleTag
+{
+    public Tag Tag { get; private set; }
+
+    public Guid TagId { get; private set; }
+
+    public  Article Article { get; set; }
+
+    public Guid ArticleId { get; private set; }
+
+    private ArticleTag()
+    {
+        
+    }
+
+    public ArticleTag(string tag)
+    {
+        Tag = new Tag(tag);
+    }
+
+    public ArticleTag(Tag tag)
+    {
+        Tag = tag;
+    }
+}
\ No newline at end of file
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Tag.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Tag.cs
new file mode 100644
index 000000000..582c6f1e1
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.Core/Models/Tag.cs
@@ -0,0 +1,18 @@
+namespace GreenOnSoftware.Core.Models;
+
+public class Tag : Entity
+{
+    public string Name { get; private set; }
+
+    public ICollection<Article> Articles { get; set; }
+
+    private Tag()
+    {
+
+    }
+
+    public Tag(string name)
+    {
+        Name = name;
+    }
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/ArticleConfiguration.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/ArticleConfiguration.cs
index bda4ff4b3..cd250d2af 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/ArticleConfiguration.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/ArticleConfiguration.cs
@@ -42,5 +42,8 @@ public void Configure(EntityTypeBuilder<Article> builder)
             .WithMany()
             .HasForeignKey(x=>x.AuthorId)
             .OnDelete(DeleteBehavior.SetNull);
+
+        builder.HasMany(x => x.Tags)
+            .WithMany(x => x.Articles);
     }
 }
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/TagConfiguration.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/TagConfiguration.cs
new file mode 100644
index 000000000..56a01eaa9
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Configuration/TagConfiguration.cs
@@ -0,0 +1,17 @@
+using GreenOnSoftware.Core.Models;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Metadata.Builders;
+
+namespace GreenOnSoftware.DataAccess.Configuration;
+
+public class TagConfiguration : IEntityTypeConfiguration<Tag>
+{
+    public void Configure(EntityTypeBuilder<Tag> builder)
+    {
+        builder.HasKey(x => x.Id);
+
+        builder.Property(x => x.Name)
+            .HasMaxLength(20)
+            .IsRequired();
+    }
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/GreenOnSoftwareDbContext.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/GreenOnSoftwareDbContext.cs
index 1f4fe563e..8d4eb75de 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/GreenOnSoftwareDbContext.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/GreenOnSoftwareDbContext.cs
@@ -19,6 +19,7 @@ public GreenOnSoftwareDbContext(DbContextOptions options) : base(options)
         public DbSet<Review> Reviews { get; set; }
         public DbSet<Comment> Comments { get; set; }
         public DbSet<Snippet> Snippets { get; set; }
+        public DbSet<Tag> Tags { get; set; }
 
         protected override void OnModelCreating(ModelBuilder modelBuilder)
         {
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.Designer.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.Designer.cs
new file mode 100644
index 000000000..9a3158fc3
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.Designer.cs
@@ -0,0 +1,633 @@
+// <auto-generated />
+using System;
+using GreenOnSoftware.DataAccess;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace GreenOnSoftware.DataAccess.Migrations
+{
+    [DbContext(typeof(GreenOnSoftwareDbContext))]
+    [Migration("20231010141228_AddTags")]
+    partial class AddTags
+    {
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "6.0.7")
+                .HasAnnotation("Relational:MaxIdentifierLength", 128);
+
+            SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder, 1L, 1);
+
+            modelBuilder.Entity("ArticleTag", b =>
+                {
+                    b.Property<Guid>("ArticlesId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid>("TagsId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("ArticlesId", "TagsId");
+
+                    b.HasIndex("TagsId");
+
+                    b.ToTable("ArticleTag");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Identity.User", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<int>("AccessFailedCount")
+                        .HasColumnType("int");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("Email")
+                        .HasMaxLength(256)
+                        .HasColumnType("nvarchar(256)");
+
+                    b.Property<bool>("EmailConfirmed")
+                        .HasColumnType("bit");
+
+                    b.Property<bool>("LockoutEnabled")
+                        .HasColumnType("bit");
+
+                    b.Property<DateTimeOffset?>("LockoutEnd")
+                        .HasColumnType("datetimeoffset");
+
+                    b.Property<string>("NormalizedEmail")
+                        .HasMaxLength(256)
+                        .HasColumnType("nvarchar(256)");
+
+                    b.Property<string>("NormalizedUserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("nvarchar(256)");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PhoneNumber")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<bool>("PhoneNumberConfirmed")
+                        .HasColumnType("bit");
+
+                    b.Property<string>("SecurityStamp")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<bool>("TwoFactorEnabled")
+                        .HasColumnType("bit");
+
+                    b.Property<string>("UserName")
+                        .HasMaxLength(256)
+                        .HasColumnType("nvarchar(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedEmail")
+                        .HasDatabaseName("EmailIndex");
+
+                    b.HasIndex("NormalizedUserName")
+                        .IsUnique()
+                        .HasDatabaseName("UserNameIndex")
+                        .HasFilter("[NormalizedUserName] IS NOT NULL");
+
+                    b.ToTable("Users", (string)null);
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Identity.UserRole", b =>
+                {
+                    b.Property<Guid>("UserId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid>("RoleId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("UserId", "RoleId");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("UserRoles", (string)null);
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Article", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid?>("AuthorId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("Content")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<DateTime>("CreatedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<string>("Description")
+                        .HasMaxLength(500)
+                        .HasColumnType("nvarchar(500)");
+
+                    b.Property<bool>("IsDeleted")
+                        .HasColumnType("bit");
+
+                    b.Property<string>("Lang")
+                        .IsRequired()
+                        .HasMaxLength(2)
+                        .HasColumnType("nvarchar(2)");
+
+                    b.Property<DateTime>("ModifiedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<string>("Status")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ThumbnailUrl")
+                        .HasMaxLength(300)
+                        .HasColumnType("nvarchar(300)");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("nvarchar(200)");
+
+                    b.Property<string>("Url")
+                        .IsRequired()
+                        .HasMaxLength(300)
+                        .HasColumnType("nvarchar(300)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("AuthorId");
+
+                    b.ToTable("Articles");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Comment", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid?>("ArticleId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid?>("AuthorId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("Content")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<DateTime>("CreatedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<bool>("IsDeleted")
+                        .HasColumnType("bit");
+
+                    b.Property<DateTime>("ModifiedDate")
+                        .HasColumnType("datetime2");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId");
+
+                    b.HasIndex("AuthorId");
+
+                    b.ToTable("Comments");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Ratings.AnnonymousArticleRate", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid>("ArticleId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("AvatarName")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("nvarchar(100)");
+
+                    b.Property<DateTime>("CreatedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<Guid>("UserId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<int>("Value")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId");
+
+                    b.ToTable("AnnonymousArticleRates", (string)null);
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Ratings.UserArticleRate", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid>("ArticleId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("AvatarName")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("nvarchar(100)");
+
+                    b.Property<DateTime>("CreatedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<Guid?>("UserId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<int>("Value")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("UserArticleRates", (string)null);
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Reviews.Review", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid>("ArticleId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("Content")
+                        .IsRequired()
+                        .HasMaxLength(4000)
+                        .HasColumnType("nvarchar(4000)");
+
+                    b.Property<DateTime>("CreatedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<DateTime>("ModifiedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<Guid?>("ReviewerId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("ArticleId");
+
+                    b.HasIndex("ReviewerId");
+
+                    b.ToTable("Reviews", (string)null);
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Snippets.Snippet", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<DateTime>("CreatedDate")
+                        .HasColumnType("datetime2");
+
+                    b.Property<string>("Description")
+                        .IsRequired()
+                        .HasMaxLength(500)
+                        .HasColumnType("nvarchar(500)");
+
+                    b.Property<string>("Frames")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("GifUrl")
+                        .HasMaxLength(300)
+                        .HasColumnType("nvarchar(300)");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("nvarchar(200)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Snippets", (string)null);
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Tag", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(20)
+                        .HasColumnType("nvarchar(20)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Tags");
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole<System.Guid>", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("ConcurrencyStamp")
+                        .IsConcurrencyToken()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("Name")
+                        .HasMaxLength(256)
+                        .HasColumnType("nvarchar(256)");
+
+                    b.Property<string>("NormalizedName")
+                        .HasMaxLength(256)
+                        .HasColumnType("nvarchar(256)");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("NormalizedName")
+                        .IsUnique()
+                        .HasDatabaseName("RoleNameIndex")
+                        .HasFilter("[NormalizedName] IS NOT NULL");
+
+                    b.ToTable("Roles", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<System.Guid>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"), 1L, 1);
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<Guid>("RoleId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("RoleId");
+
+                    b.ToTable("RoleClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<System.Guid>", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"), 1L, 1);
+
+                    b.Property<string>("ClaimType")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("ClaimValue")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<Guid>("UserId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("UserClaims", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<System.Guid>", b =>
+                {
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("nvarchar(450)");
+
+                    b.Property<string>("ProviderKey")
+                        .HasColumnType("nvarchar(450)");
+
+                    b.Property<string>("ProviderDisplayName")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<Guid>("UserId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("LoginProvider", "ProviderKey");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("UserLogins", (string)null);
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<System.Guid>", b =>
+                {
+                    b.Property<Guid>("UserId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("LoginProvider")
+                        .HasColumnType("nvarchar(450)");
+
+                    b.Property<string>("Name")
+                        .HasColumnType("nvarchar(450)");
+
+                    b.Property<string>("Value")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("UserId", "LoginProvider", "Name");
+
+                    b.ToTable("UserTokens", (string)null);
+                });
+
+            modelBuilder.Entity("ArticleTag", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Models.Article", null)
+                        .WithMany()
+                        .HasForeignKey("ArticlesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("GreenOnSoftware.Core.Models.Tag", null)
+                        .WithMany()
+                        .HasForeignKey("TagsId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Identity.UserRole", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole<System.Guid>", "Role")
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", null)
+                        .WithMany("Roles")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Role");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Article", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", "Author")
+                        .WithMany()
+                        .HasForeignKey("AuthorId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.Navigation("Author");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Comment", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Models.Article", "Article")
+                        .WithMany("Comments")
+                        .HasForeignKey("ArticleId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", "Author")
+                        .WithMany()
+                        .HasForeignKey("AuthorId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.Navigation("Article");
+
+                    b.Navigation("Author");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Ratings.AnnonymousArticleRate", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Models.Article", "Article")
+                        .WithMany("AnnonymousRates")
+                        .HasForeignKey("ArticleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Article");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Ratings.UserArticleRate", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Models.Article", "Article")
+                        .WithMany("Rates")
+                        .HasForeignKey("ArticleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", "User")
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.Navigation("Article");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Reviews.Review", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Models.Article", "Article")
+                        .WithMany("Reviews")
+                        .HasForeignKey("ArticleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", "Reviewer")
+                        .WithMany()
+                        .HasForeignKey("ReviewerId")
+                        .OnDelete(DeleteBehavior.SetNull);
+
+                    b.Navigation("Article");
+
+                    b.Navigation("Reviewer");
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim<System.Guid>", b =>
+                {
+                    b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole<System.Guid>", null)
+                        .WithMany()
+                        .HasForeignKey("RoleId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim<System.Guid>", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin<System.Guid>", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", null)
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken<System.Guid>", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Identity.User", null)
+                        .WithMany("Tokens")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Identity.User", b =>
+                {
+                    b.Navigation("Roles");
+
+                    b.Navigation("Tokens");
+                });
+
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Article", b =>
+                {
+                    b.Navigation("AnnonymousRates");
+
+                    b.Navigation("Comments");
+
+                    b.Navigation("Rates");
+
+                    b.Navigation("Reviews");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.cs
new file mode 100644
index 000000000..3b9b47841
--- /dev/null
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/20231010141228_AddTags.cs
@@ -0,0 +1,74 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace GreenOnSoftware.DataAccess.Migrations
+{
+    public partial class AddTags : Migration
+    {
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "Tags",
+                columns: table => new
+                {
+                    Id = table.Column<Guid>(type: "uniqueidentifier", nullable: false),
+                    Name = table.Column<string>(type: "nvarchar(20)", maxLength: 20, nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_Tags", x => x.Id);
+                });
+
+            migrationBuilder.CreateTable(
+                name: "ArticleTag",
+                columns: table => new
+                {
+                    ArticlesId = table.Column<Guid>(type: "uniqueidentifier", nullable: false),
+                    TagsId = table.Column<Guid>(type: "uniqueidentifier", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_ArticleTag", x => new { x.ArticlesId, x.TagsId });
+                    table.ForeignKey(
+                        name: "FK_ArticleTag_Articles_ArticlesId",
+                        column: x => x.ArticlesId,
+                        principalTable: "Articles",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                    table.ForeignKey(
+                        name: "FK_ArticleTag_Tags_TagsId",
+                        column: x => x.TagsId,
+                        principalTable: "Tags",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ArticleTag_TagsId",
+                table: "ArticleTag",
+                column: "TagsId");
+
+            migrationBuilder.Sql(@"
+                DECLARE @unknownId uniqueidentifier  
+                SET @unknownId = NEWID()  
+
+                INSERT INTO Tags(Id, Name)
+                VALUES (@unknownId, 'Unknown');
+
+                INSERT INTO ArticleTag(ArticlesId, TagsId)
+                SELECT Id, @unknownId FROM Articles
+                WHERE Id NOT in (SELECT DISTINCT ArticlesId FROM ArticleTag);");
+        }
+
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "ArticleTag");
+
+            migrationBuilder.DropTable(
+                name: "Tags");
+        }
+    }
+}
diff --git a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/GreenOnSoftwareDbContextModelSnapshot.cs b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/GreenOnSoftwareDbContextModelSnapshot.cs
index 8e3689843..bcbf08295 100644
--- a/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/GreenOnSoftwareDbContextModelSnapshot.cs
+++ b/dotnet/GreenOnSoftware/GreenOnSoftware.DataAccess/Migrations/GreenOnSoftwareDbContextModelSnapshot.cs
@@ -22,6 +22,21 @@ protected override void BuildModel(ModelBuilder modelBuilder)
 
             SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder, 1L, 1);
 
+            modelBuilder.Entity("ArticleTag", b =>
+                {
+                    b.Property<Guid>("ArticlesId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<Guid>("TagsId")
+                        .HasColumnType("uniqueidentifier");
+
+                    b.HasKey("ArticlesId", "TagsId");
+
+                    b.HasIndex("TagsId");
+
+                    b.ToTable("ArticleTag");
+                });
+
             modelBuilder.Entity("GreenOnSoftware.Core.Identity.User", b =>
                 {
                     b.Property<Guid>("Id")
@@ -319,6 +334,22 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                     b.ToTable("Snippets", (string)null);
                 });
 
+            modelBuilder.Entity("GreenOnSoftware.Core.Models.Tag", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uniqueidentifier");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(20)
+                        .HasColumnType("nvarchar(20)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Tags");
+                });
+
             modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRole<System.Guid>", b =>
                 {
                     b.Property<Guid>("Id")
@@ -435,6 +466,21 @@ protected override void BuildModel(ModelBuilder modelBuilder)
                     b.ToTable("UserTokens", (string)null);
                 });
 
+            modelBuilder.Entity("ArticleTag", b =>
+                {
+                    b.HasOne("GreenOnSoftware.Core.Models.Article", null)
+                        .WithMany()
+                        .HasForeignKey("ArticlesId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("GreenOnSoftware.Core.Models.Tag", null)
+                        .WithMany()
+                        .HasForeignKey("TagsId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
             modelBuilder.Entity("GreenOnSoftware.Core.Identity.UserRole", b =>
                 {
                     b.HasOne("Microsoft.AspNetCore.Identity.IdentityRole<System.Guid>", "Role")

From f7bab2a207c6ec7b94620abe550abf36f788fce6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Po=C5=82ubi=C5=84ski?= <polubis@wp.pl>
Date: Tue, 17 Oct 2023 15:10:13 +0200
Subject: [PATCH 6/7] 233. [PATCH] Improve useElementSize hook (#322)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Adrian Połubiński <adrian.polubinski@billennium.com>
---
 .../src/lib/use-element-size/defs.ts          | 13 ++++---
 .../use-element-size.test.tsx                 |  6 ++--
 .../lib/use-element-size/use-element-size.ts  | 34 ++++++++++---------
 .../src/lib/creator-layout/creator-layout.tsx |  2 +-
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/system/libs/figa-hooks/src/lib/use-element-size/defs.ts b/system/libs/figa-hooks/src/lib/use-element-size/defs.ts
index 8d543a3bc..f6394dc17 100644
--- a/system/libs/figa-hooks/src/lib/use-element-size/defs.ts
+++ b/system/libs/figa-hooks/src/lib/use-element-size/defs.ts
@@ -1,3 +1,5 @@
+import type { MutableRefObject } from 'react';
+
 interface ElementSize {
   width: number;
   height: number;
@@ -19,12 +21,14 @@ type ElementSizeState = UndetectedState | DetectedState | UnsupportedState;
 
 type ElementSizeStateStatus = ElementSizeState['status'];
 
-/** Configuration object. */
-interface UseElementSizeConfig {
-  /** It quantifies how much time is needed to broadcast the next event in milliseconds. */
+interface ElementSizeConfig {
   delay?: number;
 }
 
+type ElementSizeReturn<T extends HTMLElement> = Readonly<
+  [ElementSizeState, MutableRefObject<T | null>]
+>;
+
 export type {
   UndetectedState,
   ElementSize,
@@ -32,5 +36,6 @@ export type {
   UnsupportedState,
   ElementSizeStateStatus,
   ElementSizeState,
-  UseElementSizeConfig,
+  ElementSizeReturn,
+  ElementSizeConfig,
 };
diff --git a/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.test.tsx b/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.test.tsx
index 6a6f725d6..fea49c18d 100644
--- a/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.test.tsx
+++ b/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.test.tsx
@@ -52,12 +52,12 @@ describe('Element size can be detected when: ', () => {
 
       expect(observeSpy).toHaveBeenCalledTimes(1);
       expect(observeSpy).toHaveBeenCalledWith(document.body);
-      expect(result.current.state).toEqual({
+      expect(result.current[0]).toEqual({
         status: 'undetected',
       } as ElementSizeState);
 
       await waitFor(() => {
-        expect(result.current.state).toEqual({
+        expect(result.current[0]).toEqual({
           status: 'detected',
           height: HEIGHT,
           width: WIDTH,
@@ -67,7 +67,7 @@ describe('Element size can be detected when: ', () => {
 
     it('updates state if listening native HTML element', async () => {
       const ComponentFixture = () => {
-        const { ref, state } = useElementSize<HTMLDivElement>();
+        const [state, ref] = useElementSize<HTMLDivElement>();
         return (
           <div ref={ref}>
             {state.status === 'detected'
diff --git a/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.ts b/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.ts
index adf740078..727db2163 100644
--- a/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.ts
+++ b/system/libs/figa-hooks/src/lib/use-element-size/use-element-size.ts
@@ -1,17 +1,22 @@
 import { useEffect, useRef, useState, useMemo } from 'react';
 import { Subject, throttleTime } from 'rxjs';
-import type { ElementSizeState, UseElementSizeConfig } from './defs';
+import type {
+  ElementSizeState,
+  ElementSizeConfig,
+  ElementSizeReturn,
+} from './defs';
+import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect';
 
 /**
  * The hook responsible for detecting the height and width of
  * any HTML element. By default it checks body.
  *
  * It returns reference and state to work with.
- * @param {UseElementSizeConfig} config - Configuration object.
+ * @param {ElementSizeConfig} config - Configuration object.
  */
 const useElementSize = <T extends HTMLElement>(
-  config?: UseElementSizeConfig
-) => {
+  config?: ElementSizeConfig
+): ElementSizeReturn<T> => {
   const [state, setState] = useState<ElementSizeState>({
     status: 'undetected',
   });
@@ -19,9 +24,11 @@ const useElementSize = <T extends HTMLElement>(
   const ref = useRef<T>(null);
   const observerRef = useRef<ResizeObserver | null>(null);
 
-  const changed = useMemo(() => new Subject<ElementSizeState>(), []);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const changed$ = useMemo(() => changed.asObservable(), []);
+  const { changed, changed$ } = useMemo(() => {
+    const changed = new Subject<ElementSizeState>();
+    const changed$ = changed.asObservable();
+    return { changed, changed$ };
+  }, []);
 
   useEffect(() => {
     const sub = changed$.pipe(throttleTime(config?.delay ?? 150)).subscribe({
@@ -33,10 +40,9 @@ const useElementSize = <T extends HTMLElement>(
     return () => {
       sub.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [changed$, config?.delay]);
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const observeElement = () => {
       if (!ref?.current && !document.body) {
         changed.next({ status: 'unsupported' });
@@ -61,13 +67,9 @@ const useElementSize = <T extends HTMLElement>(
     return () => {
       observerRef.current?.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [changed]);
 
-  return {
-    state,
-    ref,
-  };
+  return [state, ref];
 };
 
 export { useElementSize };
diff --git a/system/libs/figa-ui/src/lib/creator-layout/creator-layout.tsx b/system/libs/figa-ui/src/lib/creator-layout/creator-layout.tsx
index 6abbc9047..1d00a799c 100644
--- a/system/libs/figa-ui/src/lib/creator-layout/creator-layout.tsx
+++ b/system/libs/figa-ui/src/lib/creator-layout/creator-layout.tsx
@@ -124,7 +124,7 @@ const CreatorLayout = ({
   ...props
 }: CreatorLayoutProps) => {
   const [view, setView] = useState<CreatorLayoutView>('undetected');
-  const { state: size } = useElementSize({ delay: 20 });
+  const [size] = useElementSize({ delay: 20 });
 
   const [Code, Preview] = children;
 

From 83a69b4b07cd4340a1246e407b4c51d0badf8c85 Mon Sep 17 00:00:00 2001
From: Adamell000 <jasnypelnyfull@gmail.com>
Date: Wed, 25 Oct 2023 21:26:56 +0200
Subject: [PATCH 7/7] added timeline, needs refactor

---
 .../libs/figa-ui/src/lib/timeline/check.svg   |  15 ++
 system/libs/figa-ui/src/lib/timeline/defs.ts  |   8 +
 system/libs/figa-ui/src/lib/timeline/index.ts |   2 +
 system/libs/figa-ui/src/lib/timeline/mocks.ts |  32 ++++
 .../src/lib/timeline/timeline.stories.tsx     |  22 +++
 .../figa-ui/src/lib/timeline/timeline.tsx     | 175 ++++++++++++++++++
 6 files changed, 254 insertions(+)
 create mode 100644 system/libs/figa-ui/src/lib/timeline/check.svg
 create mode 100644 system/libs/figa-ui/src/lib/timeline/defs.ts
 create mode 100644 system/libs/figa-ui/src/lib/timeline/index.ts
 create mode 100644 system/libs/figa-ui/src/lib/timeline/mocks.ts
 create mode 100644 system/libs/figa-ui/src/lib/timeline/timeline.stories.tsx
 create mode 100644 system/libs/figa-ui/src/lib/timeline/timeline.tsx

diff --git a/system/libs/figa-ui/src/lib/timeline/check.svg b/system/libs/figa-ui/src/lib/timeline/check.svg
new file mode 100644
index 000000000..069b6c944
--- /dev/null
+++ b/system/libs/figa-ui/src/lib/timeline/check.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 352.62 352.62"
+	 xml:space="preserve">
+<g>
+	<path d="M337.222,22.952c-15.912-8.568-33.66,7.956-44.064,17.748c-23.867,23.256-44.063,50.184-66.708,74.664
+		c-25.092,26.928-48.348,53.856-74.052,80.173c-14.688,14.688-30.6,30.6-40.392,48.96c-22.032-21.421-41.004-44.677-65.484-63.648
+		c-17.748-13.464-47.124-23.256-46.512,9.18c1.224,42.229,38.556,87.517,66.096,116.28c11.628,12.24,26.928,25.092,44.676,25.704
+		c21.42,1.224,43.452-24.48,56.304-38.556c22.645-24.48,41.005-52.021,61.812-77.112c26.928-33.048,54.468-65.485,80.784-99.145
+		C326.206,96.392,378.226,44.983,337.222,22.952z M26.937,187.581c-0.612,0-1.224,0-2.448,0.611
+		c-2.448-0.611-4.284-1.224-6.732-2.448l0,0C19.593,184.52,22.653,185.132,26.937,187.581z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/system/libs/figa-ui/src/lib/timeline/defs.ts b/system/libs/figa-ui/src/lib/timeline/defs.ts
new file mode 100644
index 000000000..d462f7a75
--- /dev/null
+++ b/system/libs/figa-ui/src/lib/timeline/defs.ts
@@ -0,0 +1,8 @@
+interface IEvent {
+  date: string;
+  title: string;
+  description: string;
+  isReached: boolean;
+}
+
+export type { IEvent };
diff --git a/system/libs/figa-ui/src/lib/timeline/index.ts b/system/libs/figa-ui/src/lib/timeline/index.ts
new file mode 100644
index 000000000..a2189ffab
--- /dev/null
+++ b/system/libs/figa-ui/src/lib/timeline/index.ts
@@ -0,0 +1,2 @@
+export * from './defs';
+export * from './timeline';
diff --git a/system/libs/figa-ui/src/lib/timeline/mocks.ts b/system/libs/figa-ui/src/lib/timeline/mocks.ts
new file mode 100644
index 000000000..367d6d53a
--- /dev/null
+++ b/system/libs/figa-ui/src/lib/timeline/mocks.ts
@@ -0,0 +1,32 @@
+export const mocks = [
+  {
+    date: 'Jan 20',
+    title: 'Start of Evaluation',
+    description: 'Preparation',
+  },
+  {
+    date: 'Feb 14',
+    title: 'Initial Scoping',
+    description: 'Data checking',
+  },
+  {
+    date: 'March 8',
+    title: 'Validation',
+    description: 'Completed proof of concept',
+  },
+  {
+    date: 'Apr 30',
+    title: 'Contracting',
+    description: 'Signed contract',
+  },
+  {
+    date: 'June 7',
+    title: 'Migration',
+    description: 'All information is migrated',
+  },
+  {
+    date: 'Sep 16',
+    title: 'Global Launch',
+    description: 'In Asia, Australia, Latin America',
+  },
+];
diff --git a/system/libs/figa-ui/src/lib/timeline/timeline.stories.tsx b/system/libs/figa-ui/src/lib/timeline/timeline.stories.tsx
new file mode 100644
index 000000000..838d90b88
--- /dev/null
+++ b/system/libs/figa-ui/src/lib/timeline/timeline.stories.tsx
@@ -0,0 +1,22 @@
+import type { Story, Meta } from '@storybook/react';
+
+import { Timeline } from './timeline';
+import { Box } from '../box';
+
+export default {
+  component: Timeline,
+  title: 'Timeline',
+} as Meta;
+
+const Template: Story = () => {
+  return (
+    <Box style={{ height: '100vh' }}>
+      <Box margin="auto">
+        <Timeline />
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/system/libs/figa-ui/src/lib/timeline/timeline.tsx b/system/libs/figa-ui/src/lib/timeline/timeline.tsx
new file mode 100644
index 000000000..f75b4f423
--- /dev/null
+++ b/system/libs/figa-ui/src/lib/timeline/timeline.tsx
@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import { Font } from '../font';
+import { mocks } from './mocks';
+
+const StyledTimeline = styled.div`
+  width: 900px;
+  height: 20px;
+  background-color: #ffffff33;
+  border-radius: 50px;
+  display: flex;
+  position: relative;
+`;
+
+const EventContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > div {
+    background-color: black;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 3px solid;
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+const ProgressBar = styled.div`
+  position: absolute;
+  height: 20px;
+  width: ${({ width }: { width: string }) => `${width}%`};
+  left: 0;
+  top: 0;
+  background-color: #35b78b;
+  border-radius: 50px;
+`;
+
+const MoveProgressBar = styled('input')`
+  position: absolute;
+  width: 500px;
+  transform: rotate(-90deg);
+  transform-origin: center;
+  left: -200px;
+`;
+
+const Timeline = () => {
+  const [progressBar, setProgressBar] = useState<string>('30');
+  const [reachedEventIndex, setReachedEventIndex] = useState(0);
+
+  const eventRefs = useRef<HTMLDivElement[]>([]);
+  const progressBarRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const positions = eventRefs.current.map((ref) => {
+      return ref.getBoundingClientRect().x;
+    });
+
+    const checkIfEventIsReached = () => {
+      const ref = progressBarRef.current;
+      if (ref === null) throw Error('ProgressBar ref is null');
+      const progressBarPosition = ref.getBoundingClientRect().right;
+      const reachedEventsPositions = positions.filter(
+        (pos) => pos <= progressBarPosition
+      );
+
+      setReachedEventIndex(reachedEventsPositions.length - 1);
+    };
+    checkIfEventIsReached();
+  }, [progressBar]);
+
+  return (
+    <>
+      <StyledTimeline>
+        <EventContainer>
+          {mocks.map((event, index) => (
+            <div
+              key={event.title}
+              ref={(ref) => {
+                if (ref === null) return;
+                eventRefs.current[index] = ref;
+              }}
+              style={{
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderColor:
+                  index === 0 || index <= reachedEventIndex
+                    ? '#35b78b'
+                    : '#ffffff33',
+                transition: '0.2s',
+              }}
+            >
+              {index <= reachedEventIndex && index !== mocks.length - 1 && (
+                <svg
+                  fill="#35b78b"
+                  version="1.1"
+                  id="Capa_1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20px"
+                  height="20px"
+                  viewBox="0 0 352.62 352.62"
+                >
+                  <g>
+                    <path
+                      d="M337.222,22.952c-15.912-8.568-33.66,7.956-44.064,17.748c-23.867,23.256-44.063,50.184-66.708,74.664
+		c-25.092,26.928-48.348,53.856-74.052,80.173c-14.688,14.688-30.6,30.6-40.392,48.96c-22.032-21.421-41.004-44.677-65.484-63.648
+		c-17.748-13.464-47.124-23.256-46.512,9.18c1.224,42.229,38.556,87.517,66.096,116.28c11.628,12.24,26.928,25.092,44.676,25.704
+		c21.42,1.224,43.452-24.48,56.304-38.556c22.645-24.48,41.005-52.021,61.812-77.112c26.928-33.048,54.468-65.485,80.784-99.145
+		C326.206,96.392,378.226,44.983,337.222,22.952z M26.937,187.581c-0.612,0-1.224,0-2.448,0.611
+		c-2.448-0.611-4.284-1.224-6.732-2.448l0,0C19.593,184.52,22.653,185.132,26.937,187.581z"
+                    />
+                  </g>
+                </svg>
+              )}
+              {index === mocks.length - 1 && (
+                <Font
+                  variant="b2"
+                  style={{ fontSize: '14px', color: '#35b78b' }}
+                >
+                  {`${progressBar}`}
+                  <span style={{ fontSize: '12px', color: '#35b78b' }}>%</span>
+                </Font>
+              )}
+              <div
+                style={{
+                  position: 'absolute',
+                  bottom: '-120%',
+                  left: '50%',
+                  transform: 'translateX(-50%)',
+                }}
+              >
+                <Font
+                  variant="h3"
+                  style={{
+                    fontSize: '10px',
+                    whiteSpace: 'nowrap',
+                    textAlign: 'center',
+                    color: index <= reachedEventIndex ? 'white' : '#555',
+                  }}
+                >
+                  {event.title}
+                </Font>
+                <Font
+                  variant="b1"
+                  style={{
+                    fontSize: '7px',
+                    whiteSpace: 'nowrap',
+                    textAlign: 'center',
+                    color: index <= reachedEventIndex ? 'white' : '#555',
+                  }}
+                >
+                  {event.description}
+                </Font>
+              </div>
+            </div>
+          ))}
+        </EventContainer>
+        <ProgressBar width={progressBar} ref={progressBarRef} />
+      </StyledTimeline>
+      <MoveProgressBar
+        type="range"
+        value={progressBar}
+        onChange={(e) => setProgressBar(e.target.value)}
+      />
+    </>
+  );
+};
+
+export { Timeline };