diff --git a/src/WebApps/pfr-app/pfr-app/src/App.css b/src/WebApps/pfr-app/pfr-app/src/App.css
index 4b4bfd1b..149e8cc8 100644
--- a/src/WebApps/pfr-app/pfr-app/src/App.css
+++ b/src/WebApps/pfr-app/pfr-app/src/App.css
@@ -1,3 +1,7 @@
+* {
+margin:0;
+padding:0
+}
 .logo{
   width:180px; 
   height:180px;
diff --git a/src/WebApps/pfr-app/pfr-app/src/App.js b/src/WebApps/pfr-app/pfr-app/src/App.js
index 71a09a93..b53cf1e8 100644
--- a/src/WebApps/pfr-app/pfr-app/src/App.js
+++ b/src/WebApps/pfr-app/pfr-app/src/App.js
@@ -12,6 +12,7 @@ import Trademarks from "./pages/Trademarks";
 import TermsOfUse from "./pages/TermsOfUse";
 import PrivacyStatement from "./pages/PrivacyStatement";
 import SiteMap from "./pages/SiteMap";
+import DetailSpecialist from "./pages/DetailSpecialist";
 
 function App() {
     return (
@@ -34,6 +35,10 @@ function App() {
                         <Specialists/>
                         <Footer/>
                     </Route>
+                    <Route path="/detail-specialist">
+                        <DetailSpecialist/>
+                        <Footer/>
+                    </Route>
                     <Route path="/about">
                         <About/>
                         <Footer/>
diff --git a/src/WebApps/pfr-app/pfr-app/src/Components/Header.jsx b/src/WebApps/pfr-app/pfr-app/src/Components/Header.jsx
index e19e2dca..8662fe38 100644
--- a/src/WebApps/pfr-app/pfr-app/src/Components/Header.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/Components/Header.jsx
@@ -1,10 +1,22 @@
 import {FaBars, FaSearch, FaShoppingCart, FaUserPlus} from 'react-icons/fa'
 import {Link} from "react-router-dom";
 import logo from "../pfr-logo.svg";
+import React from "react";
 
 const Header = () => {
     return (
-        <header className="flex items-center justify-between py-3">
+        <header  className="flex items-center justify-between py-2 px-4 xl:mx-20">
+            <div className="flex flex-col justify-between items-center pt-2">
+                <div className="flex items-left justify-start">
+                    <div>
+                        <img src={logo} className="logo" alt="PF_R Community" style={{height: 60, width: 60}}/>
+                    </div>
+                    <div>
+                        <p className="ml-2 text-2xl text-gray-700 uppercase font-bold">#PF_R Community</p>
+                        <p className="ml-2 text-gray-500 lowercase font-semibold">Community of specialists</p>
+                    </div>
+                </div>
+            </div>
             {/*<div className="menu-btn flex">*/}
             {/*    <div className="mx-4">*/}
             {/*        <FaBars />*/}
@@ -35,17 +47,26 @@ const Header = () => {
             {/*        <li>Support</li>*/}
             {/*    </ul>*/}
             {/*</div>*/}
-            <div>
-                <ul>
-                    <li>
+            <div className="flex-col justify-end items-center">
+                <ul className="flex justify-end items-center mt-2">
+                    <li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-pink-500">
                         <Link to="/"> Home</Link>
                     </li>
-                    <li>
+                    <li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-indigo-500">
                         <Link to="/specialists"> Specialists</Link>
                     </li>
-                    <li>
+                    <li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-green-500">
                         <Link to="/about"> About</Link>
                     </li>
+                    <li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-orange-700">
+                        <Link to="/about"> Community</Link>
+                    </li>
+                    <li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-blue-500">
+                        <Link to="/about"> Login</Link>
+                    </li>
+                    <li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-red-500">
+                        <Link to="/about"> Sign up</Link>
+                    </li>
                 </ul>
             </div>
             {/*<div className="cart flex">*/}
diff --git a/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistItem.jsx b/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistItem.jsx
index 698e5b5b..a02b1b5d 100644
--- a/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistItem.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistItem.jsx
@@ -2,25 +2,117 @@ import React from 'react';
 
 const SpecialistItem = (props) => {
     return (
-            <div className="flex m-2 bg-white shadow-lg rounded-xl flex-none">
-                <div className="certificate__content">
+        <div className="flex items-start space-x-6 p-6  bg-white shadow-lg rounded-xl mt-4">
+            <div className="flex-none w-48 relative">
+                <img width="auto" height="300" src={props.specialist.avatar}
+                     className="flex-none rounded-md bg-slate-100"></img>
+                <div className="text-center m-2">
+                    <path
+                        d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z">
+                    </path>
 
-                    <div className="p-2">
-                        <img width="auto" height="300" src={props.specialist.avatar} className=" rounded-xl"></img>
+                    <button
+                        className="bg-gradient-to-br from-orange-400 to-pink-600 rounded-b-xl p-4 px-6 font-semibold text-white active:to-pink-400">
+                        Book session
+                    </button>
 
-                    </div>
-                    <div className="px-4"><strong>{props.specialist.fio}</strong></div>
-                    <div className="px-4 py-2 pb-6">{props.specialist.specialnost}</div>
+                </div>
+                <div className="mt-4 text-center">
+                    <ul>
+                        <li className="text-3xl text-orange-300">
+                           * * * * *</li>
+                    </ul>
+                    <strong>Rating</strong>
+                    <p>{props.specialist.ratings.sessions} sessions</p>
+                </div>
+
+            </div>
+            <div className="flex-col w-1/3">
+                <div>
+                    <strong className="text-2xl uppercase">{props.specialist.fio}</strong>
+                    {
+                        props.specialist.status == 'online' ?
+                            <p
+                                className="text-green-500 font-bold uppercase">
+                                * {props.specialist.status} *
+
+                            </p>
+                            :
+                            <p
+                                className="text-orange-300 font-bold uppercase">
+                                * {props.specialist.status} *
+
+                            </p>
+                    }
+                    <p className="text-gray-400 mt-2">{props.specialist.intro}</p>
+                </div>
+                <div className="mt-4">
+                    <strong>
+                        Languages
+                    </strong>
+                    <ul className=" pl-4">
+                        <li>Germany: <strong className="text-pink-300">|||</strong></li>
+                        <li>English: <strong className="text-green-400">||||||</strong></li>
+                        <li>Russian: <strong className="text-cyan-600">|||||||||||</strong></li>
+                    </ul>
+                </div>
+               <div className="mt-4">
+                    <strong>Tags</strong>
+
+                    <ul className="flex justify-center items-center my-4">
+                        <li className="px-2 text-blue-900 cursor-pointer"><a href="#">#pf_r</a></li>
+                        <li className="px-2 text-blue-900 cursor-pointer"><a href="#">#hypnosis</a></li>
+                        <li className="px-2 text-blue-900 cursor-pointer"><a href="#">#pf_r_dub</a></li>
+                        <li className="px-2 text-blue-900 cursor-pointer"><a href="#">#pf_r_base</a></li>
+                        <li></li></ul>
+                </div>
+                <div className="mt-4">
+                    <strong>Rates</strong>
+                    <ul className="flex justify-center items-center my-4">
+                        <li className="text-gray-600 px-4">Trial (30 min): <strong>20 USD</strong></li>
+                        <li className="px-4">Hourly Rate from: <strong>30 USD</strong></li>
+                    </ul>
+                </div>
 
-                    {/*<div className="post__btn">*/}
-                    {/*    <button>Удалить</button>*/}
-                    {/*</div>*/}
+                <div className="mt-4">
+                    <button
+                        className="bg-gradient-to-br from-green-400 to-cyan-500 rounded-t-xl p-4 px-6 font-semibold text-white active:to-pink-400">
+                        Send Message
+                    </button>
+                    <button
+                        className="bg-gradient-to-br from-purple-500 to-indigo-500 rounded-t-xl  p-4 px-6 font-semibold text-white active:to-pink-400">
+                        Add Favorite
+                    </button>
+                </div>
+            </div>
+            <div className="flex-col">
+                <ul className="flex justify-center items-center my-4">
+                    <li className="cursor-pointer py-2 px-4 text-cyan-600 font-bold border-b-8 ">
+                        Video
+                    </li>
+                    <li className="cursor-pointer py-2 px-4 text-green-400  border-b-8">Intro</li>
+                    <li className="cursor-pointer py-2 px-4 text-gray-500 border-b-8">Calendar</li>
+                </ul>
 
-                    {/*<strong>{props.specialist.id}</strong>*/}
+                <div className="bg-white p-2 text-center mx-auto border">
+                    <iframe width="600" height="340"  src="https://www.youtube.com/embed/Ks8csGiEUS8"
+                            title="YouTube video player" frameBorder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowFullScreen></iframe>
                 </div>
+            </div>
+            {/*<div className="certificate__content">*/}
+
+            {/*    <div className="p-2">*/}
+            {/*        <img width="auto" height="300" src={props.specialist.avatar} className=" rounded-xl"></img>*/}
+
+            {/*    </div>*/}
+            {/*    <div className="px-4"><strong>{props.specialist.fio}</strong></div>*/}
+            {/*    <div className="px-4 py-2 pb-6">{props.specialist.specialnost}</div>*/}
+            {/*</div>*/}
             {/*<div className="flex m-2 bg-white border-2">*/}
             {/*    <div className="certificate__content">*/}
-            
+
             {/*        <div>*/}
             {/*            <img width="auto" height="200" src="https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60"></img>*/}
             {/*            Практикующий психолог*/}
@@ -33,7 +125,7 @@ const SpecialistItem = (props) => {
             {/*</div>*/}
             {/*<div className="flex m-2 bg-white border-2">*/}
             {/*    <div className="certificate__content">*/}
-            
+
             {/*        <div>*/}
             {/*            <img width="auto" height="200" src="https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60"></img>*/}
             {/*            Практикующий психолог*/}
@@ -46,7 +138,7 @@ const SpecialistItem = (props) => {
             {/*</div>*/}
             {/*<div className="flex m-2 bg-white border-2">*/}
             {/*    <div className="certificate__content">*/}
-            
+
             {/*        <div>*/}
             {/*            <img width="auto" height="200" src="https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60"></img>*/}
             {/*            Практикующий психолог*/}
diff --git a/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistList.jsx b/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistList.jsx
index 79018886..12cf35cf 100644
--- a/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistList.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/Components/SpecialistList.jsx
@@ -4,10 +4,16 @@ import SpecialistItem from "./SpecialistItem";
 const SpecialistList = (props) => {
 
     return (
+
         <>
         <section>
-            <h2 className="text-center">{props.title}</h2>
-            <div className="flex  items-center justify-center bg-white m-4">
+            <div className="flex xl:px-40  xl:pb-20 flex-col justify-center bg-gradient-to-t from-gray-50 bg-gray-100 mb-1">
+                <div className="flex items-center justify-start">
+                    <h2 className="text-left mt-4 uppercase text-lg text-gray-700 font-semibold">{props.title}</h2>
+                    <p className="mt-4 ml-8 lowercase text-sm text-gray-500 font-semibold">{props.countSpecialists} Specialists</p>
+                </div>
+
+                <p className="text-gray-500 font-semibold">Find the best specialist for you: choose from our experienced specialist online and get the best session.</p>
                 {props.specialists.map((specialist) =>
                     <SpecialistItem specialist={specialist} key={specialist.id}/>
                 )}
diff --git a/src/WebApps/pfr-app/pfr-app/src/Data/specialists.js b/src/WebApps/pfr-app/pfr-app/src/Data/specialists.js
index ce186a8a..edb768df 100644
--- a/src/WebApps/pfr-app/pfr-app/src/Data/specialists.js
+++ b/src/WebApps/pfr-app/pfr-app/src/Data/specialists.js
@@ -1,21 +1,89 @@
 export const specialists = [
     {
         id: 1, fio: 'Paul Mart',
+        status: "online",
+        intro:"Do you want quality service from a certified specialist? Let's chat",
+        country:{
+          location : "Russian"
+        },
+        language:{
+            "english": 10,
+            "russian":5
+        },
+        rates:{
+          trial: 10,
+          hour: 25
+        },
+        ratings: {
+            sessions: 2293,
+            value: "5.0"
+        },
         specialnost: 'specialist #PF_R',
         avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=300&q=60'
     },
     {
         id: 2, fio: 'Marina Oi',
+        status: "online",
+        intro:"Certified British TEFL Teacher with over 3 years of experience",
+        country:{
+            location : "Russian"
+        },
+        language:{
+            "english": 10,
+            "russian":5
+        },
+        rates:{
+            trial: 10,
+            hour: 25
+        },
+        ratings: {
+            sessions: 2293,
+            value: "5.0"
+        },
         specialnost: 'specialist #PF_R',
         avatar: 'https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60'
     },
     {
         id: 3, fio: 'Paul Mart',
+        status: "online",
+        intro:"Certified British TEFL Teacher with over 3 years of experience",
+        country:{
+            location : "Russian"
+        },
+        language:{
+            "english": 10,
+            "russian":5
+        },
+        rates:{
+            trial: 10,
+            hour: 25
+        },
+        ratings: {
+            sessions: 23,
+            value: "5.0"
+        },
         specialnost: 'specialist #PF_R',
         avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=300&q=60'
     },
     {
         id: 4, fio: 'Paul Mart',
+        status: "offline",
+        intro:"Certified British TEFL Teacher with over 3 years of experience",
+        country:{
+            location : "Russian"
+        },
+        language:{
+            "english": 10,
+            "russian":5
+        },
+        rates:{
+            trial: 10,
+            hour: 25
+        },
+        ratings: {
+            sessions: 213,
+            value: "5.0"
+        },
         specialnost: 'specialist #PF_R',
         avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=300&q=60'
     }
diff --git a/src/WebApps/pfr-app/pfr-app/src/pages/DetailSpecialist.jsx b/src/WebApps/pfr-app/pfr-app/src/pages/DetailSpecialist.jsx
new file mode 100644
index 00000000..a3394a7d
--- /dev/null
+++ b/src/WebApps/pfr-app/pfr-app/src/pages/DetailSpecialist.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Header from "../Components/Header";
+
+const DetailSpecialist = () => {
+    return (
+        <div >
+            <Header />
+            <div className="flex xl:px-40  xl:pb-20 justify-center bg-gradient-to-t from-gray-50 bg-gray-100 mb-1">
+                <div className="flex  flex-col items-start mt-4 w-2/3">
+                    <div className="flex  items-start space-x-6 p-6  bg-white shadow-lg rounded-xl mt-4">
+                        <iframe width="850" height="340"  src="https://www.youtube.com/embed/TIqJAHfl9SE"
+                                title="YouTube video player" frameBorder="0"
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowFullScreen></iframe>
+                    </div>
+                    <div className="flex  space-x-6 p-6  bg-white shadow-lg rounded-xl mt-4">
+                        Test
+                    </div>
+                    <div className="flex items-start space-x-6 p-6  bg-white shadow-lg rounded-xl mt-4">
+                        <div>
+                            <iframe width="850" height="340"  src="https://www.youtube.com/embed/TIqJAHfl9SE"
+                                    title="YouTube video player" frameBorder="0"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                    allowFullScreen></iframe>
+                        </div>
+                        <div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex   flex-col items-start space-x-6 p-6 ml-4  bg-white shadow-lg rounded-xl mt-4 w-1/3">
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DetailSpecialist;
\ No newline at end of file
diff --git a/src/WebApps/pfr-app/pfr-app/src/pages/Home.jsx b/src/WebApps/pfr-app/pfr-app/src/pages/Home.jsx
index 587f4071..2539365e 100644
--- a/src/WebApps/pfr-app/pfr-app/src/pages/Home.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/pages/Home.jsx
@@ -99,7 +99,7 @@ const Home = () => {
             {/*                            на компьютере Mac или Windows.</p>*/}
             {/*                    </blockquote>*/}
             {/*                    <figcaption*/}
-            {/*                        className="flex items-center space-x-4 p-6 md:px-10 md:py-6 bg-gradient-to-br rounded-b-xl leading-6 font-semibold text-white from-green-400 to-cyan-500">*/}
+            {/*                        className="flex items-center space-x-4 p-6 md:px-10 md:py-6 bg-gradient-to-br from-green-400 to-cyan-500 rounded-b-xl leading-6 font-semibold text-white ">*/}
             
             {/*                        <div className="flex-auto">Скачивайте приложение в магазине приложенией<br/><span*/}
             {/*                            className="text-green-100">*/}
diff --git a/src/WebApps/pfr-app/pfr-app/src/pages/PrivacyStatement.jsx b/src/WebApps/pfr-app/pfr-app/src/pages/PrivacyStatement.jsx
index 6391c8c8..71d99d17 100644
--- a/src/WebApps/pfr-app/pfr-app/src/pages/PrivacyStatement.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/pages/PrivacyStatement.jsx
@@ -3,9 +3,9 @@ import Header from "../Components/Header";
 
 const PrivacyStatement = () => {
     return (
-        <div className="xl:mx-20">
-            <Header/>
-            <div>
+        <div >
+            <Header />
+            <div >
                 <h1> O2 Bionics Privacy Statement</h1>
                 <strong>Last Updated: December 2021 What's new?</strong>
                 <p>
diff --git a/src/WebApps/pfr-app/pfr-app/src/pages/Specialists.jsx b/src/WebApps/pfr-app/pfr-app/src/pages/Specialists.jsx
index de670650..6b4951da 100644
--- a/src/WebApps/pfr-app/pfr-app/src/pages/Specialists.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/pages/Specialists.jsx
@@ -2,14 +2,36 @@ import React from 'react';
 import SpecialistList from "../Components/SpecialistList";
 import specialists from "../Data/specialists";
 import Header from "../Components/Header";
+import SpecialistItem from "../Components/SpecialistItem";
 
 const Specialists = () => {
     return (
-        <div className="xl:mx-20">
-            <Header/>
+        <div >
+            <Header />
+            <div className="flex justify-between items-center xl:mx-40">
+                <ul className="flex justify-center items-center my-4">
+                    <li className="px-2"><button className="bg-gradient-to-br text-white from-yellow-400 to-orange-500 shadow-sm rounded-lg p-2 px-4">also speakers </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-purple-500 to-indigo-500  shadow-sm rounded-lg p-2 px-4">from </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-green-400 to-cyan-500  shadow-sm rounded-lg p-2 px-4">price </button></li>
+                    <li className="px-2"><button className="bg-gradient-to-br text-white from-orange-400 to-pink-600   shadow-sm rounded-lg p-2 px-4">type specialist </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-fuchsia-500 to-purple-600   shadow-sm rounded-lg p-2 px-4">category </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-cyan-400 to-light-blue-500 shadow-sm rounded-lg p-2 px-4">top </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-light-blue-400 to-indigo-500 rounded-lg p-2 px-4">top </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-pink-500 to-rose-500 rounded-lg p-2 px-4">top </button></li>
+                    <li className="px-2"> <button className="bg-gradient-to-br text-white from-yellow-400 to-orange-500 rounded-lg p-2 px-4">top </button></li>
+                </ul>
+
+
+                <form>
+                    <input  className="focus:ring-2 focus:ring-blue-500 focus:outline-none appearance-none w-full text-sm leading-6 text-slate-900 placeholder-slate-400 rounded-md py-2 pl-10 ring-1 ring-slate-200 shadow-sm" type="text" placeholder="Filter specialists..."/>
+                </form>
+            </div>
             <div>
-                <SpecialistList title="Specialists" specialists={specialists}/>
+                <SpecialistList title="Find the best specialist for you" specialists={specialists} countSpecialists={specialists.length+1252}/>
             </div>
+            {/*<div>*/}
+            {/*    <SpecialistItem specialist={specialists[0]}/>*/}
+            {/*</div>*/}
         </div>
     );
 };
diff --git a/src/WebApps/pfr-app/pfr-app/src/pages/TermsOfUse.jsx b/src/WebApps/pfr-app/pfr-app/src/pages/TermsOfUse.jsx
index 15e34125..b119626f 100644
--- a/src/WebApps/pfr-app/pfr-app/src/pages/TermsOfUse.jsx
+++ b/src/WebApps/pfr-app/pfr-app/src/pages/TermsOfUse.jsx
@@ -3,9 +3,9 @@ import Header from "../Components/Header";
 
 const TermsOfUse = () => {
     return (
-        <div className="xl:mx-20">
+        <div >
             <Header/>
-            <div>
+            <div className="xl:mx-20">
                 <h1>Microsoft Terms of Use</h1>
                     <strong>Last Updated: June 24, 2015</strong>