diff --git a/extractedTranslations/en/articles.json b/extractedTranslations/en/articles.json
new file mode 100644
index 00000000..51870229
--- /dev/null
+++ b/extractedTranslations/en/articles.json
@@ -0,0 +1,6 @@
+{
+  "ArticleDetails": "",
+  "Произошла ошибка при загрузке статьи": "",
+  "Список статей": "",
+  "Статья не найдена": ""
+}
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
index 63a376de..6d79481b 100644
--- a/extractedTranslations/en/translation.json
+++ b/extractedTranslations/en/translation.json
@@ -1,6 +1,7 @@
 {
   "": "",
   " ": " ",
+  "ArticleDetails": "ArticleDetails",
   "Profile page": "Profile page",
   "decrement": "decrement",
   "increment": "increment",
@@ -33,11 +34,15 @@
   "Произошла непредвиденная ошибка": "Произошла непредвиденная ошибка",
   "Произошла ошибка": "Произошла ошибка",
   "Произошла ошибка при загрузке профиля": "Произошла ошибка при загрузке профиля",
+  "Произошла ошибка при загрузке статьи": {
+    "": ""
+  },
   "Профиль": "Профиль",
   "Редактировать": "Редактировать",
   "Сохранить": "Сохранить",
   "Список статей": "Список статей",
   "Статья": "Статья",
+  "Статья не найдена": "Статья не найдена",
   "Страна": "Страна",
   "Страница не найдена": "Страница не найдена",
   "Форма авторизации": "Форма авторизации",
diff --git a/extractedTranslations/ru/translation.json b/extractedTranslations/ru/translation.json
index 21f73e8c..d08b7ae0 100644
--- a/extractedTranslations/ru/translation.json
+++ b/extractedTranslations/ru/translation.json
@@ -1,6 +1,7 @@
 {
   "": "",
   " ": " ",
+  "ArticleDetails": "ArticleDetails",
   "Profile page": "Profile page",
   "decrement": "decrement",
   "increment": "increment",
@@ -33,11 +34,15 @@
   "Произошла непредвиденная ошибка": "Произошла непредвиденная ошибка",
   "Произошла ошибка": "Произошла ошибка",
   "Произошла ошибка при загрузке профиля": "Произошла ошибка при загрузке профиля",
+  "Произошла ошибка при загрузке статьи": {
+    "": ""
+  },
   "Профиль": "Профиль",
   "Редактировать": "Редактировать",
   "Сохранить": "Сохранить",
   "Список статей": "Список статей",
   "Статья": "Статья",
+  "Статья не найдена": "Статья не найдена",
   "Страна": "Страна",
   "Страница не найдена": "Страница не найдена",
   "Форма авторизации": "Форма авторизации",
diff --git a/json-server/db.json b/json-server/db.json
index 687d4788..8d448067 100644
--- a/json-server/db.json
+++ b/json-server/db.json
@@ -21,18 +21,109 @@
       "author": "typicode"
     }
   ],
+  "articles": [
+    {
+      "id": "1",
+      "title": "JavaScript news",
+      "subtitle": "Что нового в JS за 2023 год",
+      "img": "https://teknotower.com/wp-content/uploads/2020/11/js.png",
+      "views": 1022,
+      "createdAt": "01.09.2023",
+      "type": ["IT"],
+      "blocks": [
+        {
+          "id": "1",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "4",
+          "type": "CODE",
+          "code": "<!DOCTYPE html>\n<html>\n  <body>\n    <p id=\"hello\"></p>\n\n    <script>\n      document.getElementById(\"hello\").innerHTML = \"Hello, world!\";\n    </script>\n  </body>\n</html>;"
+        },
+        {
+          "id": "5",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "2",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "3",
+          "type": "CODE",
+          "code": "const path = require('path');\n\nconst server = jsonServer.create();\n\nconst router = jsonServer.router(path.resolve(__dirname, 'db.json'));\n\nserver.use(jsonServer.defaults({}));\nserver.use(jsonServer.bodyParser);"
+        },
+        {
+          "id": "7",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "8",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "9",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы."
+          ]
+        }
+      ]
+    }
+  ],
   "comments": [
     {
       "id": "1",
-      "body": "some comment",
-      "postId": "1"
+      "text": "some comment 1",
+      "articleId": "1",
+      "userId": "1"
+    },
+    {
+      "id": "2",
+      "text": "some comment 2",
+      "articleId": "1",
+      "userId": "1"
+    },
+    {
+      "id": "3",
+      "text": "some comment 3",
+      "articleId": "1",
+      "userId": "1"
     }
   ],
   "users": [
     {
       "id": "1",
       "username": "admin",
-      "password": "123"
+      "password": "123",
+      "role": "ADMIN"
+    },
+    {
+      "id": "2",
+      "username": "user",
+      "password": "456",
+      "role": "USER"
     }
   ],
   "profile": {
diff --git a/public/locales/en/article.json b/public/locales/en/article.json
deleted file mode 100644
index e3c9fb57..00000000
--- a/public/locales/en/article.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "Статья": "Article",
-  "Список статей": "List of articles"
-}
\ No newline at end of file
diff --git a/public/locales/en/articles.json b/public/locales/en/articles.json
new file mode 100644
index 00000000..5add0509
--- /dev/null
+++ b/public/locales/en/articles.json
@@ -0,0 +1,6 @@
+{
+  "Список статей": "List of articles",
+  "Статья не найдена": "Article not found",
+  "Произошла ошибка при загрузке статьи": "An error occurred while loading the article",
+  "Articles page": "Articles"
+}
\ No newline at end of file
diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
index 02a305d6..b69344a9 100644
--- a/public/locales/en/profile.json
+++ b/public/locales/en/profile.json
@@ -17,5 +17,6 @@
   "Нет данных": "No data",
   "Имя и фамилия обязательны": "First and last name are required",
   "Некорректный возраст": "Incorrect age",
-  "Некорректная страна": "Incorrect country"
+  "Некорректная страна": "Incorrect country",
+  "Profile page": "Profile"
 }
\ No newline at end of file
diff --git a/public/locales/ru/article.json b/public/locales/ru/article.json
deleted file mode 100644
index d68d6f03..00000000
--- a/public/locales/ru/article.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "Статья": "Статья",
-  "Список статей": "Список статей"
-}
\ No newline at end of file
diff --git a/public/locales/ru/articles.json b/public/locales/ru/articles.json
new file mode 100644
index 00000000..71240e78
--- /dev/null
+++ b/public/locales/ru/articles.json
@@ -0,0 +1,6 @@
+{
+  "Список статей": "Список статей",
+  "Статья не найдена": "Статья не найдена",
+  "Произошла ошибка при загрузке статьи": "Произошла ошибка при загрузке статьи",
+  "Articles page": "Статьи"
+}
\ No newline at end of file
diff --git a/public/locales/ru/profile.json b/public/locales/ru/profile.json
index a7936b2b..01883e05 100644
--- a/public/locales/ru/profile.json
+++ b/public/locales/ru/profile.json
@@ -17,5 +17,6 @@
   "Нет данных": "Нет данных",
   "Имя и фамилия обязательны": "Имя и фамилия обязательны",
   "Некорректный возраст": "Некорректный возраст",
-  "Некорректная страна": "Некорректная страна"
+  "Некорректная страна": "Некорректная страна",
+  "Profile page": "Профиль"
 }
\ No newline at end of file
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
index 4d3faa33..27fc883f 100644
--- a/src/app/providers/StoreProvider/config/StateSchema.ts
+++ b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -8,6 +8,7 @@ import { CounterSchema } from 'entities/Counter';
 import { UserSchema } from 'entities/User';
 import { LoginSchema } from 'features/AuthByUsername';
 import { ProfileSchema } from 'entities/Profile';
+import { ArticleDetailsSchema } from 'entities/Article';
 
 export interface StateSchema {
   counter: CounterSchema,
@@ -16,6 +17,7 @@ export interface StateSchema {
   // Async reducers
   loginForm?: LoginSchema,
   profile?: ProfileSchema,
+  articleDetails?: ArticleDetailsSchema,
 }
 
 export type StateSchemaKey = keyof StateSchema;
diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
index f2436596..a618357d 100644
--- a/src/app/styles/index.scss
+++ b/src/app/styles/index.scss
@@ -20,5 +20,7 @@ body {
 
 .page-wrapper {
   flex-grow: 1;
-  padding: 20px;
+  padding: 20px 20px 20px 40px;
+  height: calc(100vh - var(--navbar-height));
+  overflow-y: auto;
 }
diff --git a/src/app/styles/themes/dark.scss b/src/app/styles/themes/dark.scss
index dfe7311a..665472b6 100644
--- a/src/app/styles/themes/dark.scss
+++ b/src/app/styles/themes/dark.scss
@@ -5,4 +5,8 @@
   --secondary-color: #049604;
   --inverted-primary-color: #0452ff;
   --inverted-secondary-color: #0232c2;
+
+  // skeleton
+  --skeleton-color: #1515ad;
+  --skeleton-shadow: #2b2be8;
 }
diff --git a/src/app/styles/themes/light.scss b/src/app/styles/themes/light.scss
index 11edaa4e..751b631e 100644
--- a/src/app/styles/themes/light.scss
+++ b/src/app/styles/themes/light.scss
@@ -6,4 +6,8 @@
   --secondary-color: #0232c2;
   --inverted-primary-color: #04ff04;
   --inverted-secondary-color: #049604;
+
+  // skeleton
+  --skeleton-color: #fff;
+  --skeleton-shadow: rgba(0 0 0 / 20%);
 }
diff --git a/src/app/styles/themes/orange.scss b/src/app/styles/themes/orange.scss
index e0627b19..e32e3083 100644
--- a/src/app/styles/themes/orange.scss
+++ b/src/app/styles/themes/orange.scss
@@ -5,4 +5,8 @@
   --secondary-color: #d01f0e;
   --inverted-primary-color: #dbd5dc;
   --inverted-secondary-color: #faf4fb;
+
+  // skeleton
+  --skeleton-color: #fff;
+  --skeleton-shadow: rgba(0 0 0 / 20%);
 }
diff --git a/src/entities/Article/index.ts b/src/entities/Article/index.ts
new file mode 100644
index 00000000..fbc89484
--- /dev/null
+++ b/src/entities/Article/index.ts
@@ -0,0 +1,8 @@
+export { ArticleDetails } from './ui/ArticleDetails/ArticleDetails';
+export { Article } from './model/types/article';
+export { ArticleDetailsSchema } from './model/types/articleDetailsSchema';
+export {
+  getArticleDetails,
+  getArticleDetailsIsLoading,
+  getArticleDetailsError,
+} from './model/selectors/getArticleDetails/getArticleDetails';
diff --git a/src/entities/Article/model/selectors/getArticleDetails/getArticleDetails.ts b/src/entities/Article/model/selectors/getArticleDetails/getArticleDetails.ts
new file mode 100644
index 00000000..dfc289e3
--- /dev/null
+++ b/src/entities/Article/model/selectors/getArticleDetails/getArticleDetails.ts
@@ -0,0 +1,5 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getArticleDetails = (state: StateSchema) => state.articleDetails?.data;
+export const getArticleDetailsIsLoading = (state: StateSchema) => state.articleDetails?.isLoading;
+export const getArticleDetailsError = (state: StateSchema) => state.articleDetails?.error;
diff --git a/src/entities/Article/model/services/fetchArticleById/fetchArticleById.ts b/src/entities/Article/model/services/fetchArticleById/fetchArticleById.ts
new file mode 100644
index 00000000..8214e456
--- /dev/null
+++ b/src/entities/Article/model/services/fetchArticleById/fetchArticleById.ts
@@ -0,0 +1,25 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import { ThunkConfig } from 'app/providers/StoreProvider';
+
+import { Article } from '../../types/article';
+
+export const fetchArticleById = createAsyncThunk<Article, string, ThunkConfig<string>>(
+  'getArticleDetails/fetchArticleById',
+  async (articleId, thunkAPI) => {
+    const { extra, rejectWithValue } = thunkAPI;
+
+    try {
+      const response = await extra.api.get<Article>(`/articles/${articleId}`);
+
+      if (!response.data) {
+        throw new Error();
+      }
+
+      return response.data;
+    } catch (e) {
+      console.log(e);
+      return rejectWithValue('error');
+    }
+  },
+);
diff --git a/src/entities/Article/model/slice/articleDetailsSlice.ts b/src/entities/Article/model/slice/articleDetailsSlice.ts
new file mode 100644
index 00000000..29490819
--- /dev/null
+++ b/src/entities/Article/model/slice/articleDetailsSlice.ts
@@ -0,0 +1,35 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { fetchArticleById } from '../services/fetchArticleById/fetchArticleById';
+import { ArticleDetailsSchema } from '../types/articleDetailsSchema';
+import { Article } from '../types/article';
+
+const initialState: ArticleDetailsSchema = {
+  isLoading: false,
+  error: undefined,
+  data: undefined,
+};
+
+export const articleDetailsSlice = createSlice({
+  name: 'articleDetails',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchArticleById.pending, (state) => {
+        state.error = undefined;
+        state.isLoading = true;
+      })
+      .addCase(fetchArticleById.fulfilled, (state, action: PayloadAction<Article>) => {
+        state.isLoading = false;
+        state.data = action.payload;
+      })
+      .addCase(fetchArticleById.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload;
+      });
+  },
+});
+
+export const { actions: articleDetailsActions } = articleDetailsSlice;
+export const { reducer: articleDetailsReducer } = articleDetailsSlice;
diff --git a/src/entities/Article/model/types/article.ts b/src/entities/Article/model/types/article.ts
new file mode 100644
index 00000000..fa1658a0
--- /dev/null
+++ b/src/entities/Article/model/types/article.ts
@@ -0,0 +1,46 @@
+export enum ArticleBlockType {
+  TEXT = 'TEXT',
+  CODE = 'CODE',
+  IMAGE = 'IMAGE'
+}
+
+export interface ArticleBlockBase {
+  id: string;
+  type: ArticleBlockType;
+}
+
+export interface ArticleTextBlock extends ArticleBlockBase {
+  type: ArticleBlockType.TEXT;
+  title?: string;
+  paragraphs: string[];
+}
+
+export interface ArticleCodeBlock extends ArticleBlockBase {
+  type: ArticleBlockType.CODE;
+  code: string;
+}
+
+export interface ArticleImageBlock extends ArticleBlockBase {
+  type: ArticleBlockType.IMAGE;
+  src: string;
+  title: string;
+}
+
+export type ArticleBlock = ArticleTextBlock | ArticleCodeBlock | ArticleImageBlock;
+
+export enum ArticleType {
+  IT = 'IT',
+  SCIENCE = 'SCIENCE',
+  ECONOMICS = 'ECONOMICS'
+}
+
+export interface Article {
+  id: string;
+  title: string;
+  subtitle: string;
+  img: string;
+  views: number;
+  createdAt: string;
+  type: ArticleType[];
+  blocks: ArticleBlock[];
+}
diff --git a/src/entities/Article/model/types/articleDetailsSchema.ts b/src/entities/Article/model/types/articleDetailsSchema.ts
new file mode 100644
index 00000000..ed382320
--- /dev/null
+++ b/src/entities/Article/model/types/articleDetailsSchema.ts
@@ -0,0 +1,7 @@
+import { Article } from './article';
+
+export interface ArticleDetailsSchema {
+  isLoading: boolean;
+  error?: string;
+  data?: Article;
+}
diff --git a/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.module.scss b/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.module.scss
new file mode 100644
index 00000000..6ac1ef5e
--- /dev/null
+++ b/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.module.scss
@@ -0,0 +1,2 @@
+.articleCodeBlockComponent {
+}
\ No newline at end of file
diff --git a/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.stories.tsx b/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.stories.tsx
new file mode 100644
index 00000000..d35b7e95
--- /dev/null
+++ b/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticleCodeBlockComponent } from './ArticleCodeBlockComponent';
+
+export default {
+  title: 'shared/ArticleCodeBlockComponent',
+  component: ArticleCodeBlockComponent,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticleCodeBlockComponent>;
+
+const Template: ComponentStory<typeof ArticleCodeBlockComponent> = (args) => <ArticleCodeBlockComponent {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};
diff --git a/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.tsx b/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.tsx
new file mode 100644
index 00000000..0b497490
--- /dev/null
+++ b/src/entities/Article/ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+
+import { classNames } from 'shared/lib/classNames';
+
+import cls from './ArticleCodeBlockComponent.module.scss';
+
+interface ArticleCodeBlockComponentProps {
+  className?: string;
+}
+
+export const ArticleCodeBlockComponent = (props: ArticleCodeBlockComponentProps) => {
+  const { className } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div className={classNames(cls.articleCodeBlockComponent, {}, [className])}>
+      ArticleCodeBlockComponent
+    </div>
+  );
+};
diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.module.scss b/src/entities/Article/ui/ArticleDetails/ArticleDetails.module.scss
new file mode 100644
index 00000000..8db212ab
--- /dev/null
+++ b/src/entities/Article/ui/ArticleDetails/ArticleDetails.module.scss
@@ -0,0 +1,15 @@
+.articleDetails {
+  min-height: 100%;
+}
+
+.avatar {
+  margin: 0 auto;
+}
+
+.title {
+  margin-top: 20px;
+}
+
+.skeleton {
+  margin-top: 15px;
+}
diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.stories.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.stories.tsx
new file mode 100644
index 00000000..892316a1
--- /dev/null
+++ b/src/entities/Article/ui/ArticleDetails/ArticleDetails.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticleDetails } from './ArticleDetails';
+
+export default {
+  title: 'shared/ArticleDetails',
+  component: ArticleDetails,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticleDetails>;
+
+const Template: ComponentStory<typeof ArticleDetails> = (args) => <ArticleDetails {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};
diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
new file mode 100644
index 00000000..800db02f
--- /dev/null
+++ b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
@@ -0,0 +1,76 @@
+import { memo, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+
+import { classNames } from 'shared/lib/classNames';
+import { DynamicModuleLoader, ReducersList } from 'shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
+import { useAppDispatch } from 'shared/lib/hooks/useAppDispatch/useAppDispatch';
+import { Text, TextAlign } from 'shared/ui/Text';
+import { Skeleton } from 'shared/ui/Skeleton';
+
+import { fetchArticleById } from '../../model/services/fetchArticleById/fetchArticleById';
+import {
+  getArticleDetails,
+  getArticleDetailsError,
+  getArticleDetailsIsLoading,
+} from '../../model/selectors/getArticleDetails/getArticleDetails';
+import cls from './ArticleDetails.module.scss';
+import { articleDetailsReducer } from '../../model/slice/articleDetailsSlice';
+
+interface ArticleDetailsProps {
+  className?: string;
+  id: string;
+}
+
+const reducers: ReducersList = {
+  articleDetails: articleDetailsReducer,
+};
+
+export const ArticleDetails = memo((props: ArticleDetailsProps) => {
+  const { className, id } = props;
+
+  const { t } = useTranslation('articles');
+  const dispatch = useAppDispatch();
+  const data = useSelector(getArticleDetails);
+  const isLoading = useSelector(getArticleDetailsIsLoading);
+  const error = useSelector(getArticleDetailsError);
+
+  useEffect(() => {
+    dispatch(fetchArticleById(id));
+  }, [dispatch, id]);
+
+  let content;
+
+  if (isLoading) {
+    content = (
+      <div>
+        <Skeleton className={cls.avatar} width={200} height={200} borderRadius="50%" />
+        <Skeleton className={cls.title} width={300} height={32} />
+        <Skeleton className={cls.skeleton} width={600} height={24} />
+        <Skeleton className={cls.skeleton} width="100%" height={200} />
+        <Skeleton className={cls.skeleton} width="100%" height={200} />
+      </div>
+    );
+  } else if (error) {
+    content = (
+      <Text
+        title={t('Произошла ошибка при загрузке статьи')}
+        align={TextAlign.CENTER}
+      />
+    );
+  } else {
+    content = (
+      <div>{t('ArticleDetails')}</div>
+    );
+  }
+
+  return (
+    <DynamicModuleLoader reducers={reducers} removeAfterUnmount>
+      <div className={classNames(cls.articleDetails, {}, [className])}>
+        {content}
+      </div>
+    </DynamicModuleLoader>
+  );
+});
+
+ArticleDetails.displayName = 'ArticleDetails';
diff --git a/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.module.scss b/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.module.scss
new file mode 100644
index 00000000..cb345f29
--- /dev/null
+++ b/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.module.scss
@@ -0,0 +1,2 @@
+.articleImageBlockComponent {
+}
\ No newline at end of file
diff --git a/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.stories.tsx b/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.stories.tsx
new file mode 100644
index 00000000..172449fe
--- /dev/null
+++ b/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticleImageBlockComponent } from './ArticleImageBlockComponent';
+
+export default {
+  title: 'shared/ArticleImageBlockComponent',
+  component: ArticleImageBlockComponent,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticleImageBlockComponent>;
+
+const Template: ComponentStory<typeof ArticleImageBlockComponent> = (args) => <ArticleImageBlockComponent {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};
diff --git a/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.tsx b/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.tsx
new file mode 100644
index 00000000..32b59c7c
--- /dev/null
+++ b/src/entities/Article/ui/ArticleImageBlockComponent/ArticleImageBlockComponent.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+
+import { classNames } from 'shared/lib/classNames';
+
+import cls from './ArticleImageBlockComponent.module.scss';
+
+interface ArticleImageBlockComponentProps {
+  className?: string;
+}
+
+export const ArticleImageBlockComponent = (props: ArticleImageBlockComponentProps) => {
+  const { className } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div className={classNames(cls.articleImageBlockComponent, {}, [className])}>
+      ArticleImageBlockComponent
+    </div>
+  );
+};
diff --git a/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.module.scss b/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.module.scss
new file mode 100644
index 00000000..03cd7bf7
--- /dev/null
+++ b/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.module.scss
@@ -0,0 +1,2 @@
+.articleTextBlockComponent {
+}
\ No newline at end of file
diff --git a/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.stories.tsx b/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.stories.tsx
new file mode 100644
index 00000000..c1a61d06
--- /dev/null
+++ b/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ArticleTextBlockComponent } from './ArticleTextBlockComponent';
+
+export default {
+  title: 'shared/ArticleTextBlockComponent',
+  component: ArticleTextBlockComponent,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ArticleTextBlockComponent>;
+
+const Template: ComponentStory<typeof ArticleTextBlockComponent> = (args) => <ArticleTextBlockComponent {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};
diff --git a/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.tsx b/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.tsx
new file mode 100644
index 00000000..aa2d1303
--- /dev/null
+++ b/src/entities/Article/ui/ArticleTextBlockComponent/ArticleTextBlockComponent.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+
+import { classNames } from 'shared/lib/classNames';
+
+import cls from './ArticleTextBlockComponent.module.scss';
+
+interface ArticleTextBlockComponentProps {
+  className?: string;
+}
+
+export const ArticleTextBlockComponent = (props: ArticleTextBlockComponentProps) => {
+  const { className } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div className={classNames(cls.articleTextBlockComponent, {}, [className])}>
+      ArticleTextBlockComponent
+    </div>
+  );
+};
diff --git a/src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx b/src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx
index bede1e7c..00119571 100644
--- a/src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx
+++ b/src/pages/ArticleDetailsPage/ui/ArticleDetailsPage/ArticleDetailsPage.tsx
@@ -1,7 +1,9 @@
 import { memo } from 'react';
+import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { classNames } from 'shared/lib/classNames';
+import { ArticleDetails } from 'entities/Article';
 
 import cls from './ArticleDetailsPage.module.scss';
 
@@ -12,11 +14,20 @@ interface ArticleDetailsPageProps {
 export const ArticleDetailsPage = memo((props: ArticleDetailsPageProps) => {
   const { className } = props;
 
-  const { t } = useTranslation('article');
+  const { t } = useTranslation('articles');
+  const { id } = useParams<{id: string}>();
+
+  if (!id) {
+    return (
+      <div className={classNames(cls.articleDetailsPage, {}, [className])}>
+        {t('Статья не найдена')}
+      </div>
+    );
+  }
 
   return (
     <div className={classNames(cls.articleDetailsPage, {}, [className])}>
-      {t('Статья')}
+      <ArticleDetails id={id} />
     </div>
   );
 });
diff --git a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
index 1994350e..613a7490 100644
--- a/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
+++ b/src/pages/ArticlesPage/ui/ArticlesPage/ArticlesPage.tsx
@@ -12,7 +12,7 @@ interface ArticlesPageProps {
 export const ArticlesPage = memo((props: ArticlesPageProps) => {
   const { className } = props;
 
-  const { t } = useTranslation('article');
+  const { t } = useTranslation('articles');
 
   return (
     <div className={classNames(cls.articlesPage, {}, [className])}>
diff --git a/src/shared/ui/Skeleton/index.ts b/src/shared/ui/Skeleton/index.ts
new file mode 100644
index 00000000..1823502b
--- /dev/null
+++ b/src/shared/ui/Skeleton/index.ts
@@ -0,0 +1 @@
+export { Skeleton } from './ui/Skeleton';
diff --git a/src/shared/ui/Skeleton/ui/Skeleton.module.scss b/src/shared/ui/Skeleton/ui/Skeleton.module.scss
new file mode 100644
index 00000000..638c4c8b
--- /dev/null
+++ b/src/shared/ui/Skeleton/ui/Skeleton.module.scss
@@ -0,0 +1,29 @@
+.skeleton {
+  width: 100%;
+  height: 50px;
+  position: relative;
+  box-shadow: 0 2px 10px 0 var(--skeleton-shadow);
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: -150px;
+    top: 0;
+    height: 100%;
+    width: 80%;
+    background: linear-gradient(to right, transparent 0%, var(--skeleton-color) 50%, transparent 100%);
+    animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+}
+
+@keyframes load {
+  from {
+    left: -150px;
+  }
+
+  to {
+    left: 100%;
+  }
+}
diff --git a/src/shared/ui/Skeleton/ui/Skeleton.stories.tsx b/src/shared/ui/Skeleton/ui/Skeleton.stories.tsx
new file mode 100644
index 00000000..d16437d9
--- /dev/null
+++ b/src/shared/ui/Skeleton/ui/Skeleton.stories.tsx
@@ -0,0 +1,43 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
+import { Theme } from 'app/providers/ThemeProvider';
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'shared/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Skeleton>;
+
+const Template: ComponentStory<typeof Skeleton> = (args) => <Skeleton {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {
+  width: '100%',
+  height: 200,
+};
+
+export const Circle = Template.bind({});
+Circle.args = {
+  borderRadius: '50%',
+  width: 100,
+  height: 100,
+};
+
+export const NormalDark = Template.bind({});
+NormalDark.args = {
+  width: '100%',
+  height: 200,
+};
+NormalDark.decorators = [ThemeDecorator(Theme.DARK)];
+
+export const CircleDark = Template.bind({});
+CircleDark.args = {
+  borderRadius: '50%',
+  width: 100,
+  height: 100,
+};
+CircleDark.decorators = [ThemeDecorator(Theme.DARK)];
diff --git a/src/shared/ui/Skeleton/ui/Skeleton.tsx b/src/shared/ui/Skeleton/ui/Skeleton.tsx
new file mode 100644
index 00000000..ee47dc27
--- /dev/null
+++ b/src/shared/ui/Skeleton/ui/Skeleton.tsx
@@ -0,0 +1,36 @@
+import { CSSProperties, memo } from 'react';
+
+import { classNames } from 'shared/lib/classNames';
+
+import cls from './Skeleton.module.scss';
+
+interface SkeletonProps {
+  className?: string;
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: string;
+}
+
+export const Skeleton = memo((props: SkeletonProps) => {
+  const {
+    className,
+    width,
+    height,
+    borderRadius,
+  } = props;
+
+  const styles: CSSProperties = {
+    width,
+    height,
+    borderRadius,
+  };
+
+  return (
+    <div
+      className={classNames(cls.skeleton, {}, [className])}
+      style={styles}
+    />
+  );
+});
+
+Skeleton.displayName = 'Skeleton';