diff --git a/package-lock.json b/package-lock.json
index 5bf90bb..18eacb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "document-template-frontend",
 			"version": "0.1.0",
 			"dependencies": {
+				"@react-oauth/google": "^0.12.1",
 				"@reduxjs/toolkit": "^1.9.7",
 				"@testing-library/jest-dom": "^5.17.0",
 				"@testing-library/react": "^13.4.0",
@@ -5357,6 +5358,15 @@
 				"@babel/runtime": "^7.13.10"
 			}
 		},
+		"node_modules/@react-oauth/google": {
+			"version": "0.12.1",
+			"resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+			"integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/@reduxjs/toolkit": {
 			"version": "1.9.7",
 			"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
diff --git a/package.json b/package.json
index ef82ab4..a850de3 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
 	"private": true,
 	"homepage": ".",
 	"dependencies": {
+		"@react-oauth/google": "^0.12.1",
 		"@reduxjs/toolkit": "^1.9.7",
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^13.4.0",
diff --git a/src/components/App/App.js b/src/components/App/App.js
index 4d7033c..3ded214 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -3,6 +3,7 @@ import './App.css';
 import { useEffect } from 'react';
 import { Route, Routes, useNavigate } from 'react-router-dom'; // Импортируйте Outlet для вложенных маршрутов
 import { useDispatch } from 'react-redux';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 import DraftsTemplates from '../../pages/DraftsTemplates';
 import LoginPage from '../../pages/AuthPages/LoginPage';
 import LogupPage from '../../pages/AuthPages/LogupPage';
@@ -40,24 +41,26 @@ function App() {
 	}, []);
 
 	return (
-		<Routes>
-			<Route element={<TemplatesMain />} path="/templates">
-				<Route path=":id" element={<FormPage />} />
-			</Route>
-			<Route element={<FavoriteTemplates />} path="favorite">
-				<Route path=":id" element={<FormPage />} />
-			</Route>
-			<Route element={<DraftsTemplates />} path="drafts">
-				<Route path=":id" element={<FormPage />} />
-			</Route>
-			<Route element={<Landing />} path="/" />
-			<Route element={<LoginPage />} path="/signin" exact />
-			<Route element={<LogupPage />} path="/signup" exact />
-			<Route element={<CheckAccountPage />} path="/check-account" exact />
-			<Route element={<ForgotPwPage />} path="/forgot-password" exact />
-			<Route element={<ChangePassword />} path="/change-password" exact />
-			<Route path="*" element={<NotFound />} />
-		</Routes>
+		<GoogleOAuthProvider clientId="530694045954-brqr228ph8n0ljt1i7qekec9dblhvie2.apps.googleusercontent.com">
+			<Routes>
+				<Route element={<TemplatesMain />} path="/templates">
+					<Route path=":id" element={<FormPage />} />
+				</Route>
+				<Route element={<FavoriteTemplates />} path="favorite">
+					<Route path=":id" element={<FormPage />} />
+				</Route>
+				<Route element={<DraftsTemplates />} path="drafts">
+					<Route path=":id" element={<FormPage />} />
+				</Route>
+				<Route element={<Landing />} path="/" />
+				<Route element={<LoginPage />} path="/signin" exact />
+				<Route element={<LogupPage />} path="/signup" exact />
+				<Route element={<CheckAccountPage />} path="/check-account" exact />
+				<Route element={<ForgotPwPage />} path="/forgot-password" exact />
+				<Route element={<ChangePassword />} path="/change-password" exact />
+				<Route path="*" element={<NotFound />} />
+			</Routes>
+		</GoogleOAuthProvider>
 	);
 }
 
diff --git a/src/pages/AuthPages/LoginPage.jsx b/src/pages/AuthPages/LoginPage.jsx
index de9589c..cd398d7 100644
--- a/src/pages/AuthPages/LoginPage.jsx
+++ b/src/pages/AuthPages/LoginPage.jsx
@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
+import { GoogleLogin } from '@react-oauth/google';
 import Modal from '../../components/Modal/Modal';
 import AuthForm from '../../components/AuthForm/AuthTemplate';
 import InputForm from '../../components/UI/AuthInputForm/InputForm';
@@ -12,8 +13,8 @@ import styles from './index.module.scss';
 import Button from '../../components/UI/AuthButton/Button';
 import { signIn } from '../../store/auth/authSlice';
 import {
-	useLazyLoginQuery,
 	useLazyGetUserDataQuery,
+	useLazyLoginQuery,
 } from '../../store/auth-api/auth.api';
 import { useActions } from '../../hooks/useActions';
 
@@ -147,6 +148,16 @@ export default function LoginPage() {
 						<Link to={{ pathname: '/signup' }} className={styles.largeLink}>
 							Регистрация
 						</Link>
+						<div className={styles.googleWrapper}>
+							<GoogleLogin
+								onSuccess={(credentialResponse) => {
+									console.log(credentialResponse);
+								}}
+								onError={() => {
+									console.log('Login Failed');
+								}}
+							/>
+						</div>
 					</form>
 				</AuthForm>
 			</Modal>
diff --git a/src/pages/AuthPages/index.module.scss b/src/pages/AuthPages/index.module.scss
index 1b84891..3bc76a9 100644
--- a/src/pages/AuthPages/index.module.scss
+++ b/src/pages/AuthPages/index.module.scss
@@ -2,140 +2,149 @@ $color-link: rgba(4, 21, 175, 1);
 $color-link-l: rgba(0, 25, 255, 1);
 
 @keyframes preloader-spin {
-	0% {
-		transform: rotate(0deg);
-	}
+  0% {
+    transform: rotate(0deg);
+  }
 
-	100% {
-		transform: rotate(360deg);
-	}
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .back {
-	font-size: 24px;
-	line-height: 29px;
-	color: $color-link;
-	position: absolute;
-	top: 32px;
-	left: 32px;
-	text-decoration: none;
+  font-size: 24px;
+  line-height: 29px;
+  color: $color-link;
+  position: absolute;
+  top: 32px;
+  left: 32px;
+  text-decoration: none;
 }
 
 .form {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
 }
 
 .title {
-	font-size: 35px;
-	font-weight: 500;
-	line-height: 39px;
+  font-size: 35px;
+  font-weight: 500;
+  line-height: 39px;
 }
 
 .checkboxContainer {
-	margin: 0;
-	display: flex;
-	align-items: center;
+  margin: 0;
+  display: flex;
+  align-items: center;
 }
 
 .checkbox {
-	width: 24px;
-	height: 24px;
-	border: 1px solid black;
-	border-radius: 4px;
-	margin-right: 9px;
-	background-color: inherit;
-	padding: 0;
-	cursor: pointer;
-	text-align: center;
-	&Checked {
-		background-color: rgba(0, 0, 0, 1);
-	}
+  width: 24px;
+  height: 24px;
+  border: 1px solid black;
+  border-radius: 4px;
+  margin-right: 9px;
+  background-color: inherit;
+  padding: 0;
+  cursor: pointer;
+  text-align: center;
+
+  &Checked {
+    background-color: rgba(0, 0, 0, 1);
+  }
 }
 
 .link {
-	color: $color-link;
-	font-size: 14px;
-	line-height: 19px;
-	text-decoration: none;
-	margin-left: auto;
+  color: $color-link;
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration: none;
+  margin-left: auto;
 }
+
 .password {
-	margin: 0;
-	font-size: 14px;
+  margin: 0;
+  font-size: 14px;
 }
 
 .largeLink {
-	border-radius: 24px;
-	text-align: center;
-	padding: 14px;
-	border: 1px solid #a48dd3;
-	color: #550fda;
-	font-size: 24px;
-	line-height: 28px;
-	overflow: hidden;
-	font-family: 'SF-Pro', 'Inter', sans-serif;
-	font-size: 24px;
-	line-height: 28px;
-	text-decoration: none;
-	text-align: center;
-	margin: 14px 0 18px 0;
+  border-radius: 24px;
+  text-align: center;
+  padding: 14px;
+  border: 1px solid #a48dd3;
+  color: #550fda;
+  font-size: 24px;
+  line-height: 28px;
+  overflow: hidden;
+  font-family: 'SF-Pro', 'Inter', sans-serif;
+  font-size: 24px;
+  line-height: 28px;
+  text-decoration: none;
+  text-align: center;
+  margin: 14px 0 18px 0;
 }
 
 .orPar {
-	margin: 0;
-	font-size: 16px;
-	line-height: 19.36px;
-	text-align: center;
-	margin-top: 8px;
-	position: relative;
+  margin: 0;
+  font-size: 16px;
+  line-height: 19.36px;
+  text-align: center;
+  margin-top: 8px;
+  position: relative;
 }
 
 .orPar span {
-	position: relative;
-	background-color: white;
-	padding: 0 8px;
-	z-index: 2;
+  position: relative;
+  background-color: white;
+  padding: 0 8px;
+  z-index: 2;
 }
 
 .orPar:after {
-	content: '';
-	width: 100%;
-	border-bottom: 1px solid rgba(234, 234, 234, 1);
-	position: absolute;
-	left: 0;
-	top: 50%;
-	z-index: 1;
+  content: '';
+  width: 100%;
+  border-bottom: 1px solid rgba(234, 234, 234, 1);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 1;
 }
 
 .parCheck {
-	width: 507px;
-	margin: 0 0 12px 0;
-	font-size: 20px;
-	line-height: 24px;
-	&:last-of-type {
-		margin: 0;
-	}
-	& span {
-		color: $color-link-l;
-	}
+  width: 507px;
+  margin: 0 0 12px 0;
+  font-size: 20px;
+  line-height: 24px;
+
+  &:last-of-type {
+    margin: 0;
+  }
+
+  & span {
+    color: $color-link-l;
+  }
 }
 
 .parForget {
-	margin: 12px 0 28px 0;
-	font-size: 16px;
-	line-height: 19px;
-	width: 449px;
+  margin: 12px 0 28px 0;
+  font-size: 16px;
+  line-height: 19px;
+  width: 449px;
 }
 
 .preloader {
-	width: 35px;
-	height: 28px;
-	background-image: url('../../images/preloader.svg');
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center;
-	animation: preloader-spin 1.5s linear infinite;
+  width: 35px;
+  height: 28px;
+  background-image: url('../../images/preloader.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  animation: preloader-spin 1.5s linear infinite;
+}
+
+.googleWrapper {
+  display: flex;
+  justify-content: center;
 }