diff --git a/frontend/src/components/Notification.vue b/frontend/src/components/Notification.vue
new file mode 100644
index 0000000..5202d2a
--- /dev/null
+++ b/frontend/src/components/Notification.vue
@@ -0,0 +1,87 @@
+<template>
+    <div v-if="visible" class="notification-container">
+      <div class="notification" :class="type">
+        <p>{{ message }}</p>
+        <button @click="closeNotification">Ок</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "Notification",
+    props: {
+      message: {
+        type: String,
+        required: true,
+      },
+      type: {
+        type: String,
+        default: "info",
+      },
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      closeNotification() {
+        this.$emit("close");
+      },
+    },
+  };
+  </script>
+  
+  
+  <style scoped>
+  .notification-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+  }
+  
+  .notification {
+    background-color: #f9f9f9;
+    padding: 20px 30px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    max-width: 90%;
+    width: 400px;
+    font-family: Arial, sans-serif;
+    color: #5d001e;
+    font-size: 25px; 
+  }
+  
+  .notification.success {
+    border: 2px solid #e3afbc;
+  }
+  
+  .notification.error {
+    border: 2px solid #5d001e;
+  }
+  
+  .notification button {
+    margin-top: 20px;
+    padding: 12px 25px;
+    background-color: #5d001e;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+  
+  .notification button:hover {
+    background-color: #e3afbc;
+    color: #5d001e;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/components/SortArrow.vue b/frontend/src/components/SortArrow.vue
new file mode 100644
index 0000000..66cbe5d
--- /dev/null
+++ b/frontend/src/components/SortArrow.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="sort-arrow">
+      <!-- Стрелка вверх -->
+      <div 
+        class="triangle-up" 
+        :class="{ active: sortDirection === 1, inactive: sortDirection === 0 }" 
+      ></div>
+      
+      <!-- Стрелка вниз -->
+      <div 
+        class="triangle-down" 
+        :class="{ active: sortDirection === -1, inactive: sortDirection === 0 }" 
+      ></div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'SortArrow',
+    props: {
+      sortDirection: {
+        type: Number,
+        required: true
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .sort-arrow {
+    display: inline-flex;
+    flex-direction: column; /* Стрелки будут располагаться одна над другой */
+    align-items: center;
+    justify-content: center;
+    gap: 5px; /* Расстояние между стрелками */
+    position: absolute; /* Расположение стрелок относительно родительского элемента */
+    margin-left: 10px; /* Отступ от текста */
+    top: 50%; /* Выравнивание по вертикали на середину текста */
+    transform: translateY(-50%); /* Центрирование по вертикали */
+    z-index: 10; /* Убедитесь, что стрелки будут наверху */
+  }
+  
+  /* Стрелка вверх */
+  .triangle-up {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 6px solid #e3afbc; /* Розовая стрелка вверх */
+  }
+  
+  /* Стрелка вниз */
+  .triangle-down {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 6px solid #e3afbc; /* Розовая стрелка вниз */
+  }
+  
+  .triangle-up.active {
+    border-bottom-color: #5d001e;
+  }
+  .triangle-down.active {
+    border-top-color: #5d001e;
+  }
+  .triangle-up.inactive {
+    border-bottom-color: #e3afbc;
+  }
+  .triangle-down.inactive {
+    border-top-color: #e3afbc;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 40b78ed..c2a9302 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Login from '../views/Login.vue';
+import Register from '../views/Register.vue';
 import ClientMain from '../views/client/Main.vue';
 import AdminMain from '../views/admin/Main.vue';
 import ClientCredit from '../views/client/Credit.vue';
@@ -12,6 +13,7 @@ import ClientLoanApplication from '../views/client/LoanApplication.vue';
 const routes = [
   // { path: '/', redirect: '/login' },
   { path: '/login', component: Login, meta: { hideNavBar: true } },
+  { path: '/register', component: Register, meta: { hideNavBar: true } },
   { path: '/client/main', component: ClientMain },
   { path: '/admin/main', component: AdminMain },
   { path: '/client/credit', component: ClientCredit },
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index c667d9e..c18deb7 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="form-container">
+    <div class="header">
+      <img src="../../public/favicon.png" class="logo" />
+      <h1 class="title">SCAM-BANK</h1>
+    </div>
     <form @submit.prevent="submitForm">
       <div class="form-group">
         <label for="email">Email:</label>
@@ -11,22 +15,39 @@
       </div>
       <Button text="Войти" />
     </form>
+    <div class="link-to-register">
+      Еще нет аккаунта? 
+      <router-link to="/register">Зарегистрируйтесь</router-link>
+    </div>
+
+    <Notification
+      ref="notification"
+      :message="notificationMessage"
+      :type="notificationType"
+      :visible="notificationVisible"
+      @close="onNotificationClose"
+    />
   </div>
 </template>
 
 <script>
 import Button from '../components/Button.vue';
 import axios from 'axios';
+import Notification from '../components/Notification.vue';
 
 export default {
   name: 'Login',
   components: {
-    Button
+    Button,
+    Notification
   },
   data() {
     return {
       email: '',
-      password: ''
+      password: '',
+      notificationMessage: '',
+      notificationType: 'info',
+      notificationVisible: false,
     };
   },
   methods: {
@@ -36,24 +57,33 @@ export default {
           email: this.email,
           password: this.password
         });
-        
+
         if (response.data.token) {
-          localStorage.setItem('authToken', true);
+          localStorage.setItem('authToken', response.data.token);
           localStorage.setItem('userId', response.data.userId);
           localStorage.setItem('userType', response.data.userType);
+
           this.$router.push(`/${response.data.userType}/main`);
         }
-      } 
-      catch (error) {
+      } catch (error) {
         if (error.response && error.response.status === 401) {
-          alert('Неверный email или пароль'); 
-        } 
-        else {
-          alert('Произошла ошибка. Пожалуйста, попробуйте позже.');
+          this.showNotification('Неверный email или пароль', 'error');
+        } else {
+          this.showNotification('Произошла ошибка. Пожалуйста, попробуйте позже.', 'error');
           console.log(error);
         }
       }
-    }
+    },
+
+    showNotification(message, type) {
+      this.notificationMessage = message;
+      this.notificationType = type;
+      this.notificationVisible = true;
+    },
+
+    onNotificationClose() {
+      this.notificationVisible = false;
+    },
   }
 };
 </script>
@@ -70,11 +100,29 @@ body, html {
 
 .form-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.logo {
+  width: 60px;
+  height: auto;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: bold;
+}
+
 form {
   display: flex;
   flex-direction: column;
@@ -100,4 +148,18 @@ input {
   border: 1px solid #ccc;
   border-radius: 4px;
 }
+
+.link-to-register {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.link-to-register a {
+  color: #9A1750;
+  text-decoration: none;
+}
+
+.link-to-register a:hover {
+  text-decoration: underline;
+}
 </style>
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
new file mode 100644
index 0000000..485ee81
--- /dev/null
+++ b/frontend/src/views/Register.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="form-container">
+    <div class="header">
+      <img src="../../public/favicon.png" class="logo" />
+      <h1 class="title">SCAM-BANK</h1>
+    </div>
+    <form @submit.prevent="submitForm">
+      <div class="form-group">
+        <label for="name">Имя:</label>
+        <input type="text" v-model="name" required />
+      </div>
+      <div class="form-group">
+        <label for="surname">Фамилия:</label>
+        <input type="text" v-model="surname" required />
+      </div>
+      <div class="form-group">
+        <label for="email">Email:</label>
+        <input type="email" v-model="email" required />
+      </div>
+      <div class="form-group">
+        <label for="password">Пароль:</label>
+        <input type="password" v-model="password" required />
+      </div>
+      <div class="form-group">
+        <label for="confirmPassword">Подтвердите пароль:</label>
+        <input type="password" v-model="confirmPassword" required />
+      </div>
+      <Button text="Зарегистрироваться" />
+    </form>
+    <div class="link-to-login">
+      Уже есть аккаунт? 
+      <router-link to="/login">Войдите</router-link>
+    </div>
+
+    <Notification
+      ref="notification"
+      :message="notificationMessage"
+      :type="notificationType"
+      :visible="notificationVisible"
+      @close="onNotificationClose"
+    />
+  </div>
+</template>
+
+<script>
+import Button from '../components/Button.vue';
+import axios from 'axios';
+import Notification from '../components/Notification.vue';
+
+export default {
+  name: 'Register',
+  components: {
+    Button,
+    Notification,
+  },
+  data() {
+    return {
+      name: '',
+      surname: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      notificationMessage: '',
+      notificationType: 'info', 
+      notificationVisible: false,
+    };
+  },
+  methods: {
+    async submitForm() {
+      if (this.password !== this.confirmPassword) {
+        this.showNotification('Пароли не совпадают', 'error');
+        return;
+      }
+
+      try {
+        const response = await axios.post('http://127.0.0.1:5000/register', {
+          name: this.name,
+          surname: this.surname,
+          email: this.email,
+          password: this.password,
+        });
+
+        if (response.status === 200) {
+          this.showNotification('Регистрация успешна! Теперь вы можете войти.', 'success');
+        }
+      } catch (error) {
+        if (error.response && error.response.status === 401) {
+          this.showNotification('Пользователь с таким email уже существует.', 'error');
+        } else {
+          this.showNotification('Произошла ошибка. Пожалуйста, попробуйте позже.', 'error');
+          console.log(error);
+        }
+      }
+    },
+
+    showNotification(message, type) {
+      this.notificationMessage = message;
+      this.notificationType = type;
+      this.notificationVisible = true;
+    },
+
+    onNotificationClose() {
+      this.notificationVisible = false;
+      if (this.notificationType === 'success') {
+        this.$router.push('/login'); 
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.logo {
+  width: 60px;
+  height: auto;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: bold;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  max-width: 40%;
+  width: 100%;
+  padding: 2%;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+  margin-bottom: 2%;
+}
+
+label {
+  margin-bottom: 1%;
+}
+
+input {
+  width: 100%;
+  padding: 1%;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.link-to-login {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.link-to-login a {
+  color: #9A1750;
+  text-decoration: none;
+}
+
+.link-to-login a:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend/src/views/client/Request.vue b/frontend/src/views/client/Request.vue
index 822e010..ad930d3 100644
--- a/frontend/src/views/client/Request.vue
+++ b/frontend/src/views/client/Request.vue
@@ -3,15 +3,86 @@
     <h1>Заявки</h1>
     <p>Здесь можно посмотреть заявки.</p>
 
-    <table>
+    <table class="extended-table">
       <thead>
         <tr>
-          <th>Название кредита</th>
-          <th>Дата заявки</th>
-          <th>Статус</th>
-          <th>Сумма</th>
-          <th>Ставка</th>
-          <th>Срок</th>
+          <th>
+            <label>Название кредита</label>
+            <div class="filter-options">
+              <input type="checkbox" v-model="filters.loan_name.option1" /> Молодежный кредит
+              <input type="checkbox" v-model="filters.loan_name.option2" /> Ипотека
+              <input type="checkbox" v-model="filters.loan_name.option3" /> Кредит наличными
+              <input type="checkbox" v-model="filters.loan_name.option4" /> Автокредит
+              <input type="checkbox" v-model="filters.loan_name.option5" /> Рефинансирование
+              <input type="checkbox" v-model="filters.loan_name.option6" /> Кредитная карта
+            </div>
+          </th>
+          <th>
+            <label>Дата заявки</label>
+            <div class="filter-options">
+              <input type="date" v-model="filters.date_from" />
+              <span>—</span>
+              <input type="date" v-model="filters.date_to" />
+            </div>
+          </th>
+          <th>
+            <label>Статус</label>
+            <div class="filter-options">
+              <input type="checkbox" v-model="filters.status.status1" /> Статус 1
+              <input type="checkbox" v-model="filters.status.status2" /> Статус 2
+              <input type="checkbox" v-model="filters.status.status3" /> Статус 3
+            </div>
+          </th>
+          <th>
+            <label>Сумма</label>
+            <div class="filter-options">
+              <input type="number" v-model="filters.amount_from" placeholder="от" />
+              <span>—</span>
+              <input type="number" v-model="filters.amount_to" placeholder="до" />
+            </div>
+          </th>
+          <th>
+            <label>Ставка</label>
+            <div class="filter-options">
+              <input type="number" v-model="filters.rate_from" placeholder="от" />
+              <span>—</span>
+              <input type="number" v-model="filters.rate_to" placeholder="до" />
+            </div>
+          </th>
+          <th>
+            <label>Срок</label>
+            <div class="filter-options">
+              <input type="number" v-model="filters.term_from" placeholder="от" />
+              <span>—</span>
+              <input type="number" v-model="filters.term_to" placeholder="до" />
+            </div>
+          </th>
+        </tr>
+        <tr>
+          <th @click="sortRequests('loan_name')">
+            Название кредита
+            <SortArrow :sortDirection="sortDirection.loan_name" />
+          </th>
+          <th @click="sortRequests('request_time')">
+            Дата заявки
+            <SortArrow :sortDirection="sortDirection.request_time" />
+          </th>
+          <th @click="sortRequests('status')">
+            Статус
+            <SortArrow :sortDirection="sortDirection.status" />
+          </th>
+          <th @click="sortRequests('amount')">
+            Сумма
+            <SortArrow :sortDirection="sortDirection.amount" />
+          </th>
+          <th @click="sortRequests('interest_rate')">
+            Ставка
+            <SortArrow :sortDirection="sortDirection.interest_rate" />
+          </th>
+          <th @click="sortRequests('expiration_time')">
+            Срок
+            <SortArrow :sortDirection="sortDirection.expiration_time" />
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -25,31 +96,119 @@
         </tr>
       </tbody>
     </table>
+    <button @click="applyFilters" class="filter-button">Применить фильтры</button>
   </div>
 </template>
 
 <script>
 import axios from 'axios';
+import SortArrow from '../../components/SortArrow.vue';
 
 export default {
   name: 'ClientRequest',
+  components: {
+    SortArrow
+  },
   data() {
     return {
-      requests: []
+      requests: [],
+      sortDirection: {
+        loan_name: 0, 
+        request_time: 0,
+        status: 0,
+        amount: 0,
+        interest_rate: 0,
+        expiration_time: 0
+      },
+      filters: {
+        loan_name: {
+          option1: false,
+          option2: false,
+          option3: false,
+          option4: false,
+          option5: false,
+          option6: false,
+        },
+        date_from: '',
+        date_to: '',
+        status: {
+          status1: false,
+          status2: false,
+          status3: false,
+        },
+        amount_from: '',
+        amount_to: '',
+        rate_from: '',
+        rate_to: '',
+        term_from: '',
+        term_to: ''
+      },
+      sortField: 'loan_name'
     };
   },
   created() {
-    this.fetchRequests();
+    this.getRequests();
   },
   methods: {
+    async getRequests() {
+      const userId = localStorage.getItem('userId');
+      try {
+        const response = await axios.get('http://127.0.0.1:5000/credit_request', {
+          params: {
+            client_id: userId,
+          }
+        });
+        this.requests = response.data; 
+      } catch (error) {
+        console.error('Ошибка при получении заявок:', error); 
+      }
+    },
+    async applyFilters() {
+      const userId = localStorage.getItem('userId');
+      const name = "Автокредит"
+      try {
+        const response = await axios.get('http://127.0.0.1:5000/filter_credit_request', {
+          params: {
+            client_id: userId,
+            loan_name: name
+          }
+        });
+        this.requests = response.data;
+      } catch (error) {
+        console.error('Ошибка при применении фильтров:', error);
+      }
+    },
     async fetchRequests() {
       const userId = localStorage.getItem('userId');
+      const sortDirection = this.sortDirection;
+      const sortField = this.sortField;
       try {
-        const response = await axios.get(`http://127.0.0.1:5000/credit_request?client_id=${userId}`);
+        const response = await axios.get('http://127.0.0.1:5000/sort_credit_request', {
+          params: {
+            client_id: userId, 
+            sort_field: sortField, 
+            sort_direction: sortDirection[sortField]
+          }
+        });
         this.requests = response.data;
       } catch (error) {
-        console.error('Ошибка при получении заявок:', error);
+        console.error('Ошибка при получении заявок:', error); 
+      }
+    },
+    sortRequests(field) {
+      const previousSortDirection = this.sortDirection[field];
+      if (this.sortField === field) {
+        this.sortDirection[field] = previousSortDirection === 1 ? -1 : 1;
+      } else {
+        this.sortField = field;
+        this.sortDirection[field] = 1;
       }
+      Object.keys(this.sortDirection).forEach(key => {
+        if (key !== field) {
+          this.sortDirection[key] = 0;
+        }
+      });
+      this.fetchRequests();
     },
     formatDate(date) {
       const options = {
@@ -68,7 +227,7 @@ export default {
 
 <style scoped>
 .client-request {
-  max-width: 800px;
+  max-width: 1200px;
   margin: auto;
   padding: 20px;
   border: 1px solid #ccc;
@@ -76,24 +235,59 @@ export default {
   background-color: #f9f9f9;
 }
 
-h1, p {
+h1 {
   text-align: center;
   margin-bottom: 20px;
 }
 
-table {
+table.extended-table {
   width: 100%;
   border-collapse: collapse;
+  margin-top: 20px;
 }
 
 th, td {
   border: 1px solid #ccc;
-  padding: 10px;
+  padding: 15px;
   text-align: left;
 }
 
 th {
   background-color: #f2f2f2;
+  cursor: pointer;
+}
+
+th label {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+th .filter-options {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+}
+
+th .filter-options input {
+  margin-bottom: 5px;
+}
+
+th .filter-options span {
+  margin: 0 5px;
+}
+
+.filter-button {
+  padding: 15px 25px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+.filter-button:hover {
+  background-color: #45a049;
 }
 
 tr:nth-child(even) {
@@ -103,4 +297,8 @@ tr:nth-child(even) {
 tr:hover {
   background-color: #e2e2e2;
 }
+
+span {
+  padding: 0 5px;
+}
 </style>