diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..567cb8b
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,26 @@
+import {VscSmiley} from 'react-icons/vsc';
+import { MdAttachFile } from "react-icons/md";
+import { BsMic } from "react-icons/bs";
+
+
+
+function Footer() {
+
+  return (
+      <footer className='w-2/3 h-14 float-left border-x mt-10 items-center justify-between bg-green-600'>
+        
+
+       <div className= 'flex items-center justify-between bg-[#f0eeee] h-14 p-2 ' > 
+
+         <div className='flex justify-between items-center mx-2'>
+         <VscSmiley className='m-5  text-[#978f8f] text-3xl'/>
+         <MdAttachFile className='m-5  text-[#978f8f] text-4xl'/>
+        </div>
+          <input type="text" placeholder='Type a Message' className='w-4/5 p-2 rounded-md focus:border-none' />
+         <BsMic className='m-5  text-[#978f8f] text-4xl'/>
+
+        </div>
+      </footer>
+  )
+}
+export default Footer
\ No newline at end of file
diff --git a/components/MainChat.tsx b/components/MainChat.tsx
new file mode 100644
index 0000000..f5974b7
--- /dev/null
+++ b/components/MainChat.tsx
@@ -0,0 +1,12 @@
+import {Fragment} from 'react'
+import Footer from './Footer'
+import BodyHeader from './utils/BodyHeader'
+
+export default function MainChat() {
+  return (
+    <Fragment>
+      <BodyHeader/>
+      <Footer/>
+    </Fragment>
+  )
+}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index a59758f..a7465c0 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -18,7 +18,7 @@ const blurTxf =() =>{
 
   return (
     <Fragment>
-      <section className='w-1/3 min-h-screen float-left mt-10'>
+      <section className='w-1/3  float-left mt-10 overflow-clip'>
         
        <div  className='fixed z-10 w-1/3  '>
         {/* profile section */}
@@ -35,8 +35,8 @@ const blurTxf =() =>{
 
         {/* search section */}
         <div className= 'flex items-center justify-between bg-[#ffffff]  w-full border'> 
-          <div className='max-h-14 '>
-         <input type="search" onFocus={focusTxf} onBlur={blurTxf} placeholder='Search or start new chat' className='w-96 p-2 m-2 bg-[#f0eeee] rounded-md pl-14' />
+          <div className='max-h-14 w-full m-auto'>
+         <input type="search" onFocus={focusTxf} onBlur={blurTxf} placeholder='Search or start new chat' className='w-[95%] p-2 m-2 bg-[#f0eeee] rounded-md pl-14' />
         { !txF && <AiOutlineSearch className='relative -top-11 left-3  text-3xl  text-[#978f8f]'/>}
          { txF && <VscArrowLeft className='relative -top-11 left-3 text-3xl  text-[#075e54]'/>}
          </div>
diff --git a/components/utils/BodyHeader.tsx b/components/utils/BodyHeader.tsx
new file mode 100644
index 0000000..73a77cf
--- /dev/null
+++ b/components/utils/BodyHeader.tsx
@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import {Fragment, useState} from 'react'
+import {VscEllipsis,VscDeviceCameraVideo} from 'react-icons/vsc';
+import { AiOutlineSearch} from "react-icons/ai";
+import { IoCallOutline } from "react-icons/io5";
+import { RxDividerVertical } from "react-icons/rx";
+
+
+
+function BodyHeader() {
+
+  return (
+    <Fragment>
+      <section className='w-2/3 h-14 float-left border-x mt-10 items-center justify-between bg-green-600'>
+        
+       <div  className='fixed z-10 w-2/3'>
+       <div className= 'flex items-center justify-between bg-[#f0eeee] h-14 p-2 '> 
+         <Image src='/Passport.jpg' alt='profile pic' height={50} width={50} className='rounded-full'/>
+
+         <div className='hidden md:flex justify-between items-center mx-2'>
+         <VscDeviceCameraVideo className='m-5  text-[#978f8f] text-3xl'/>
+         <IoCallOutline className='m-5  text-[#978f8f] text-3xl'/>
+         <RxDividerVertical className='m-5  text-[#978f8f] text-4xl'/>
+         <AiOutlineSearch className='m-5  text-[#978f8f] text-3xl'/>
+         <VscEllipsis className='m-5  text-[#978f8f] text-3xl'/>
+       </div>
+
+        </div>
+
+        </div>
+
+      </section>
+     
+    </Fragment>
+  )
+}
+export default BodyHeader
\ No newline at end of file
diff --git a/components/utils/Main.tsx b/components/utils/Main.tsx
deleted file mode 100644
index 924931d..0000000
--- a/components/utils/Main.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Image from 'next/image'
-import {Fragment, useState} from 'react'
-import { VscAdd,VscEllipsis,VscListFilter,VscArrowLeft} from 'react-icons/vsc';
-import { TbCircleDotted } from "react-icons/tb";
-import { AiOutlineSearch } from "react-icons/ai";
-
-
-
-function Main() {
-
-// const [txF, setTxF] = useState<boolean>(false)
-// const focusTxf =() =>{
-//  setTxF(true) 
-// }
-// const blurTxf =() =>{
-//  setTxF(false) 
-// }
-
-  return (
-    <Fragment>
-      <section className='w-2/3 float-right border-x mt-10'>
-        
-       <div  className='fixed z-10 bg-[#f0eeee] w-full'>
-        {/* profile section */}
-        <div className= 'flex items-center justify-between h-14 p-2 '> 
-         <Image src='/Passport.jpg' alt='profile pic' height={50} width={50} className='rounded-full'/>
-
-         <div className='hidden md:flex justify-between items-center mx-2'>
-         <TbCircleDotted className='m-5  text-[#978f8f] font-bold text-3xl'/>
-         <VscAdd className='m-5  text-[#978f8f] font-bold text-3xl'/>
-         <VscEllipsis className='m-5  text-[#978f8f] font-bold text-3xl'/>
-       </div>
-        
-        </div>
-
-        </div>
-
-      </section>
-     
-    </Fragment>
-  )
-}
-export default Main
\ No newline at end of file
diff --git a/components/utils/chatWrapper.tsx b/components/utils/chatWrapper.tsx
index 3e5b039..c39bc7c 100644
--- a/components/utils/chatWrapper.tsx
+++ b/components/utils/chatWrapper.tsx
@@ -79,7 +79,7 @@ const ChatWrapper:FC<PropsWithChildren> =()=> {
 
     ))
   return (
-    <section className='relative top-28 w-full  border-x overflow-y-scroll  scroll-smooth '>
+    <section className='relative top-28 w-full border-x overflow-y-auto  scroll-smooth '>
       {activeChat}
     </section>
   )
diff --git a/pages/App.tsx b/pages/App.tsx
index f8ecc9b..56466c1 100644
--- a/pages/App.tsx
+++ b/pages/App.tsx
@@ -1,14 +1,14 @@
 import {Fragment}from 'react'
 import Header from '../components/Header'
+import MainChat from '../components/MainChat'
 import Sidebar from '../components/Sidebar'
-import Main from '../components/utils/Main'
 
 export default function App() {
   return (
     <Fragment>
      <Header/>
       <Sidebar/> 
-       <Main/> 
+       <MainChat/> 
     </Fragment>
   )
 }
diff --git a/styles/globals.css b/styles/globals.css
index 195163e..3f0e35b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,9 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer components{ 
-
+  body{
+    @apply font-body
+  }
   .headerLink {
     @apply cursor-pointer mx-5 mt-3  text-[#ffffff] font-bold text-xl  
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 95b7c46..6967194 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,11 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily:{
+        body:["Poppins", "sans-serif"]
+      }
+    },
   },
   plugins: [],
 }