diff --git a/src/assets/styles/articles.module.scss b/src/assets/styles/articles.module.scss
index ff9f769..6ab45ae 100644
--- a/src/assets/styles/articles.module.scss
+++ b/src/assets/styles/articles.module.scss
@@ -1,94 +1,166 @@
 .main {
-    width: 100%;
-    height: 100%;
-    padding: 4% 8%;
+  width: 100%;
+  min-height: 100%;
+  padding: 4% 8%;
 }
 
 .wrapper {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  min-height: 100%;
 }
 
 .panel {
-    width: 100%;
-    height: 10%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  margin-bottom: 25px;
+  gap: 15px;
+  div:first-child {
+    flex-grow: 1;
+    input {
+      width: 100%;
+    }
+  }
+}
+
+.listforms {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fff;
+  border-radius: 16px;
+  height: 70%;
+  min-height: 700px;
+  margin-bottom: 50px;
+  width: 100%;
+  &__columns {
     display: flex;
-    justify-content: space-between;
-    align-items: end;
-    padding: 0 5%;
+    justify-content: start;
+    align-items: center;
+    padding: 20px 25px;
+    border-bottom: 1px solid rgb(220, 220, 220);
+    &__item {
+      font-size: 15px;
+      font-family: "Montserrat", sans-serif;
+      font-weight: bold;
+    }
+  }
+  &__forms {
+    min-height: 100%;
+    display: inline;
+    overflow-y: auto;
+    &__item {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      width: 100%;
+      padding: 20px 25px;
+      font-family: "Montserrat", sans-serif;
+      position: relative;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      &:hover {
+        background-color: rgba(240, 240, 240, 0.8);
+      }
+      &__title {
+        text-align: center;
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      &__answers {
+        width: 33.3%;
+        text-align: center;
+      }
+      &__update {
+        width: 33.3%;
+        text-align: center;
+      }
+      i {
+        position: absolute;
+        font-size: 15px;
+        right: 30px;
+        top: calc(50% - 7px);
+        cursor: pointer;
+      }
+      ul {
+        li {
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 
 .listArticles {
-    box-shadow: 0 0 5px 1px rgb(200, 200, 200);
-    border-radius: 5px;
-    margin-top: 5%;
-    height: 70%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fff;
+  border-radius: 16px;
+  height: 70%;
+  min-height: 700px;
+  margin-bottom: 50px;
+  width: 100%;
+  &__columns {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    padding: 20px 25px;
+    border-bottom: 1px solid rgb(220, 220, 220);
+    &__item {
+      width: 33.3%;
+      font-size: 15px;
+      font-family: "Montserrat", sans-serif;
+    }
+  }
+  &__forms {
     width: 100%;
-    &__columns {
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        padding: 0 2%;
-        height: 15%;
-        width: 100%;
-        border-bottom: 1px solid rgb(220, 220, 220);
-        &__item {
-            width: 33.3%;
-            font-size: 15px;
-            // text-align: center;
-            font-family: "Montserrat", sans-serif;
-        }
+    height: 85%;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 7px;
     }
-    &__forms {
-        width: 100%;
-        height: 85%;
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-            width: 7px;
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: rgb(200, 200, 200);
-        }
-        &__item {
-            display: flex;
-            justify-content: start;
-            align-items: center;
-            padding: 0 2%;
-            height: 25%;
-            width: 100%;
-            font-family: "Montserrat", sans-serif;
-            position: relative;
-            &:hover {
-                background-color: rgba(240, 240, 240, 0.8);
-            }
-            &__title {
-                width: 33.3%;
-                // text-align: center;
-                cursor: pointer;
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-            &__date  {
-                width: 33.3%;
-                // text-align: center;
-            }
-            &__author {
-                width: 33.3%;
-                // text-align: center;
-            }
-            i {
-                position: absolute;
-                font-size: 15px;
-                right: 30px;
-                top: calc(50% - 7px);
-                cursor: pointer;
-            }
-            ul {
-                li {
-                    cursor: pointer;
-                }
-            }
-        }
+    &::-webkit-scrollbar-thumb {
+      background-color: rgb(200, 200, 200);
     }
-}
\ No newline at end of file
+    &__item {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      width: 100%;
+      padding: 20px 25px;
+      font-family: "Montserrat", sans-serif;
+      position: relative;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      &:hover {
+        background-color: rgba(240, 240, 240, 0.8);
+      }
+      &__title {
+        width: 33.3%;
+        // text-align: center;
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      &__date {
+        width: 33.3%;
+        // text-align: center;
+      }
+      &__author {
+        width: 33.3%;
+        // text-align: center;
+      }
+      i {
+        position: absolute;
+        font-size: 15px;
+        right: 30px;
+        top: calc(50% - 7px);
+        cursor: pointer;
+      }
+      ul {
+        li {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/viewArticle.module.scss b/src/assets/styles/viewArticle.module.scss
index 1fdc006..b660cee 100644
--- a/src/assets/styles/viewArticle.module.scss
+++ b/src/assets/styles/viewArticle.module.scss
@@ -1,150 +1,150 @@
 .main {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .wrapper {
-    width: 90%;
-    height: 90%;
+  width: 90%;
+  height: 90%;
 }
 
 .header {
+  width: 100%;
+  //   height: 10%;
+  &__wrapper {
     width: 100%;
-    height: 10%;
-    &__wrapper {
-        width: 100%;
-        height: 100%;
-        border: 1px solid rgb(180, 180, 180);
-        border-bottom: none;
-        border-radius: 5px 5px 0 0;
-        padding: 0 5px;
-        &__article {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            &__title {
-                width: 20%;
-                height: 75%;
-                display: flex;
-                border-right: 1px solid rgb(180, 180, 180);
-                justify-content: center;
-                align-items: center;
-                position: relative;
-                &__name {
-                    position: absolute;
-                    top: -20%;
-                    left: 3px;
-                    font-size: 8px;
-                    font-family: "Montserrat", sans-serif;
-                }
-                &__text {
-                    font-size: 15px;
-                    font-family: "Montserrat", sans-serif;
-                }
-            }
-            &__tags {
-                width: 60%;
-                height: 75%;
-                display: flex;
-                justify-content: start;
-                align-items: center;
-                flex-wrap: wrap;
-                padding: 0 5px;
-                position: relative;
-                overflow-y: auto;
-                // &::-webkit-scrollbar {
-                //     width: 10px;
-                // }
-                // &::-webkit-scrollbar-thumb {
-                //     background-color: rgb(200, 200, 200);
-                // }
-                // &::-webkit-scrollbar-button:single-button {
-                    // background-color: #bbbbbb;
-                    // display: block;
-                    // border-style: solid;
-                //     height: 10px;
-                //     width: 16px;
-                // }
-                &__item {
-                    padding: 0 5px;
-                    border-radius: 5px;
-                    border: 1px solid rgb(100, 100, 100);
-                    margin: 1px 3px;
-                    span {
-
-                    }
-                }
-            }
-            &__owner {
-                width: 20%;
-                height: 75%;
-                border-left: 1px solid rgb(180, 180, 180);
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                position: relative;
-                &__name {
-                    position: absolute;
-                    top: -20%;
-                    right: 3px;
-                    font-size: 8px;
-                    font-family: "Montserrat", sans-serif;
-                }
-                &__text {
-                    font-size: 15px;
-                    font-family: "Montserrat", sans-serif;
-                }
-            }
+    height: 100%;
+    background: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: none;
+    border-radius: 5px 5px 0 0;
+    padding: 0 5px;
+    &__article {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      &__title {
+        width: 20%;
+        height: 75%;
+        display: flex;
+        border-right: 1px solid rgb(180, 180, 180);
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        &__name {
+          position: absolute;
+          top: -20%;
+          left: 3px;
+          font-size: 8px;
+          font-family: "Montserrat", sans-serif;
         }
-        &__tags {
-            width: 100%;
-            height: 50%;
-            display: flex;
-            justify-content: start;
-            align-items: center;
-            margin-top: 20px;
-            &__item {
-                padding: 0 5px;
-                border-radius: 5px;
-                border: 1px solid rgb(100, 100, 100);
-                margin: 1px 3px;
-                span {
-
-                }
-            }
+        &__text {
+          font-size: 15px;
+          font-family: "Montserrat", sans-serif;
         }
+      }
+      &__tags {
+        width: 60%;
+        height: 75%;
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 5px;
+        position: relative;
+        overflow-y: auto;
+        // &::-webkit-scrollbar {
+        //     width: 10px;
+        // }
+        // &::-webkit-scrollbar-thumb {
+        //     background-color: rgb(200, 200, 200);
+        // }
+        // &::-webkit-scrollbar-button:single-button {
+        // background-color: #bbbbbb;
+        // display: block;
+        // border-style: solid;
+        //     height: 10px;
+        //     width: 16px;
+        // }
+        &__item {
+          padding: 0 5px;
+          border-radius: 5px;
+          border: 1px solid rgb(100, 100, 100);
+          margin: 1px 3px;
+          span {
+          }
+        }
+      }
+      &__owner {
+        width: 20%;
+        height: 75%;
+        border-left: 1px solid rgb(180, 180, 180);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        &__name {
+          position: absolute;
+          top: -20%;
+          right: 3px;
+          font-size: 8px;
+          font-family: "Montserrat", sans-serif;
+        }
+        &__text {
+          font-size: 15px;
+          font-family: "Montserrat", sans-serif;
+        }
+      }
     }
+    &__tags {
+      width: 100%;
+      height: 50%;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      margin-top: 20px;
+      &__item {
+        padding: 0 5px;
+        border-radius: 5px;
+        border: 1px solid rgb(100, 100, 100);
+        margin: 1px 3px;
+        span {
+        }
+      }
+    }
+  }
 }
 
 .content {
+  width: 100%;
+  height: 90%;
+  &__wrapper {
     width: 100%;
-    height: 90%;
-    &__wrapper {
-        width: 100%;
-        height: 100%;
-        border: 1px solid rgb(180, 180, 180);
-        padding: 5px;
-        // border-radius: 0 0 5px 5px;
-        overflow: auto;
-        &::-webkit-scrollbar {
-            width: 7px;
-        }
-        &::-webkit-scrollbar {
-            height: 7px;
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: rgb(200, 200, 200);
-        }
-        &__article {
-            max-width: 100%;
-            height: 100%;
-        }
+    height: 100%;
+    background: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 5px;
+    border-radius: 0 0 5px 5px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 7px;
     }
+    &::-webkit-scrollbar {
+      height: 7px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: rgb(200, 200, 200);
+    }
+    &__article {
+      max-width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 // .image {
@@ -156,4 +156,4 @@
 //         height: 200px;
 //         aspect-ratio: 1000/700;
 //     }
-// }
\ No newline at end of file
+// }
diff --git a/src/pages/Articles.jsx b/src/pages/Articles.jsx
index a1cf089..d999d73 100644
--- a/src/pages/Articles.jsx
+++ b/src/pages/Articles.jsx
@@ -1,103 +1,138 @@
 import React, { useState, useContext, useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { useNavigate } from 'react-router-dom';
-import classes from "../assets/styles/articles.module.scss"
+import { useNavigate } from "react-router-dom";
+import classes from "../assets/styles/articles.module.scss";
 import MyButton from "../components/MyButton.jsx";
 import MyInput from "../components/MyInput.jsx";
 import { UserData } from "../context";
 import CheckModal from "../components/CheckModal.jsx";
-import { createArticleApi, getListArticlesApi } from "../hooks/api/articleApi.js";
-
+import {
+  createArticleApi,
+  getListArticlesApi,
+} from "../hooks/api/articleApi.js";
 
 const Articles = () => {
-    const navigate = useNavigate();
-    const {user, setUser} = useContext(UserData);
-    const [stateLoading, setStateLoading] = useState(false);
+  const navigate = useNavigate();
+  const { user, setUser } = useContext(UserData);
+  const [stateLoading, setStateLoading] = useState(false);
 
-    const [listArticles, setListArticles] = useState([]);
+  const [listArticles, setListArticles] = useState([]);
 
-    const [cookies, _, __] = useCookies(["user"]);
+  const [cookies, _, __] = useCookies(["user"]);
 
-    useEffect(() => {
-        async function getListArticles() {
-            const response = await getListArticlesApi(cookies.token)
+  useEffect(() => {
+    async function getListArticles() {
+      const response = await getListArticlesApi(cookies.token);
 
-            if (response.status === 200) {
-                setListArticles(response.data)
-            }
-            else if (
-                response.status === 401
-            ) {
-                // navigate("/enter")
-                setUser(false)
-            }
-            else {
-                console.log(response)
-            }
-        }
-
-        getListArticles()
-    }, [])
-
-    async function createArticle() {
-        const response = await createArticleApi(cookies.token)
-
-        if (response.status === 200) {
-            navigate(`/articles/${response.data.id}/edit`)
-        }
-        else if (
-            response.status === 401
-        ) {
-            // navigate("/enter")
-            setUser(false)
-        }
-        else {
-            console.log(response)
-        }
+      if (response.status === 200) {
+        setListArticles(response.data);
+      } else if (response.status === 401) {
+        // navigate("/enter")
+        setUser(false);
+      } else {
+        console.log(response);
+      }
     }
 
-    return (
-        <div className={classes.main}>
-            <div className={classes.wrapper}>
-                <div className={classes.panel}>
-                    <MyInput placeholder={'Поиск...'}/>
-                    <MyButton click={createArticle} class={"main__green"} otherStyle={{width: '200px'}} text={
-                        stateLoading ? <div class="spinner-border text-light" role="status">
-                            <span class="visually-hidden">Загрузка...</span>
-                        </div> : 'Создать'
-                    }/>
-                </div>
-                <div className={classes.listArticles}>
-                    <div className={classes.listArticles__columns}>
-                        <div className={classes.listArticles__columns__item}>Название</div>
-                        <div className={classes.listArticles__columns__item}>Дата публикации</div>
-                        <div className={classes.listArticles__columns__item}>Автор</div>
-                    </div>
-                    <div className={classes.listArticles__forms}>
-                        {listArticles.map(item => <div className={classes.listArticles__forms__item}>
-                            <div className={classes.listArticles__forms__item__title} onClick={() => navigate(`/articles/${item.id}/edit`)}>{item.title}</div>
-                            <div className={classes.listArticles__forms__item__date}>24.06.24</div>
-                            <div className={classes.listArticles__forms__item__author}>kuwsh1n</div>
-                            <i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i>
-                            <ul class="dropdown-menu" aria-labelledby="action">
-                                <li><a class="dropdown-item" onClick={() => navigate(`/articles/${item.id}/`)}>Открыть</a></li>
-                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModaltest`}>Удалить</a></li>
-                            </ul>
+    getListArticles();
+  }, []);
 
-                            <CheckModal 
-                                postfix={'test'}
-                                message={`Вы хотетите удалить статью <Test article>?`} 
-                                action={{
-                                    execute: () => {}, 
-                                    cancel: () => {}
-                                }}
-                            />
-                        </div>)}
-                    </div>
+  async function createArticle() {
+    const response = await createArticleApi(cookies.token);
+
+    if (response.status === 200) {
+      navigate(`/articles/${response.data.id}/edit`);
+    } else if (response.status === 401) {
+      // navigate("/enter")
+      setUser(false);
+    } else {
+      console.log(response);
+    }
+  }
+
+  return (
+    <div className={classes.main}>
+      <div className={classes.wrapper}>
+        <div className={classes.panel}>
+          <MyInput placeholder={"Поиск..."} />
+          <MyButton
+            click={createArticle}
+            class={"main__blue"}
+            otherStyle={{ width: "200px" }}
+            text={
+              stateLoading ? (
+                <div class="spinner-border text-light" role="status">
+                  <span class="visually-hidden">Загрузка...</span>
                 </div>
-            </div>
+              ) : (
+                "Создать"
+              )
+            }
+          />
         </div>
-    )
-}
+        <div className={classes.listArticles}>
+          <div className={classes.listArticles__columns}>
+            <div className={classes.listArticles__columns__item}>Название</div>
+            <div className={classes.listArticles__columns__item}>
+              Дата публикации
+            </div>
+            <div className={classes.listArticles__columns__item}>Автор</div>
+          </div>
+          <div className={classes.listArticles__forms}>
+            {listArticles.map((item) => (
+              <div className={classes.listArticles__forms__item}>
+                <div
+                  className={classes.listArticles__forms__item__title}
+                  onClick={() => navigate(`/articles/${item.id}/edit`)}
+                >
+                  {item.title}
+                </div>
+                <div className={classes.listArticles__forms__item__date}>
+                  24.06.24
+                </div>
+                <div className={classes.listArticles__forms__item__author}>
+                  kuwsh1n
+                </div>
+                <i
+                  class="fa-solid fa-ellipsis-vertical"
+                  id="action"
+                  data-bs-toggle="dropdown"
+                ></i>
+                <ul class="dropdown-menu" aria-labelledby="action">
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      onClick={() => navigate(`/articles/${item.id}/`)}
+                    >
+                      Открыть
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      class="dropdown-item"
+                      data-bs-toggle="modal"
+                      data-bs-target={`#checkModaltest`}
+                    >
+                      Удалить
+                    </a>
+                  </li>
+                </ul>
 
-export default Articles;
\ No newline at end of file
+                <CheckModal
+                  postfix={"test"}
+                  message={`Вы хотетите удалить статью <Test article>?`}
+                  action={{
+                    execute: () => {},
+                    cancel: () => {},
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Articles;