diff --git a/app/(pages)/patient/components/Headbar/index.tsx b/app/(pages)/patient/components/Headbar/index.tsx
index 4e805f3e..4e41f321 100644
--- a/app/(pages)/patient/components/Headbar/index.tsx
+++ b/app/(pages)/patient/components/Headbar/index.tsx
@@ -7,6 +7,7 @@ import { getPatientData, getUpcomingAppointments } from "@lib/patient";
 import { Patient, bookedAppointments } from "@/types";
 import Link from "next/link";
 import getBaseUrl from "@utils/getBaseUrl";
+import { CgMenuRightAlt } from "react-icons/cg";
 
 export default async function Headbar() {
   const patient: Patient = await getPatientData();
@@ -38,7 +39,7 @@ export default async function Headbar() {
           radius="full"
           variant="shadow"
           size="sm"
-          className=" font-bold"
+          className="hidden md:flex"
           href={`${serverUrl}/patient/appointments`}
         >
           <GoPlus size={20} />
@@ -46,17 +47,21 @@ export default async function Headbar() {
 
         <Notifications upcomingAppointments={upcomingAppointments} />
 
-        <Divider orientation="vertical" className="h-8 bg-gray-500" />
+        <Divider
+          orientation="vertical"
+          className="hidden md:flex h-8 bg-gray-500"
+        />
 
         <User
           name={patient.firstname}
           avatarProps={{
             src: patient.profile,
           }}
+          className="hidden md:flex"
           description={
             <Link
               href={`${serverUrl}/patient/settings`}
-              className="text-xs text-danger"
+              className="hidden md:flex text-xs text-danger"
             >{`@${patient.username}`}</Link>
           }
         />
@@ -66,6 +71,9 @@ export default async function Headbar() {
             <CiLogin size={25} />
           </Button>
         </form>
+        <Button size="sm" type="submit" isIconOnly className="bg-transparent">
+          <CgMenuRightAlt size={23} className="flex md:hidden" />
+        </Button>
       </div>
     </div>
   );
diff --git a/app/(pages)/patient/components/Notifications/index.tsx b/app/(pages)/patient/components/Notifications/index.tsx
index 2a48873c..e7f557b0 100644
--- a/app/(pages)/patient/components/Notifications/index.tsx
+++ b/app/(pages)/patient/components/Notifications/index.tsx
@@ -31,8 +31,12 @@ export default function Notifications({
       offset={10}
     >
       <PopoverTrigger>
-        <Button isIconOnly size="sm" className="">
-          <CiBellOn size={25} />
+        <Button
+          isIconOnly
+          size="sm"
+          className="rounded-full bg-transparent md:bg-default"
+        >
+          <CiBellOn size={25} className="" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="max-w-xs">
diff --git a/app/(pages)/patient/layout.tsx b/app/(pages)/patient/layout.tsx
index 4039ed8c..9ad8f99a 100644
--- a/app/(pages)/patient/layout.tsx
+++ b/app/(pages)/patient/layout.tsx
@@ -12,7 +12,7 @@ export default function PatientLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <main className="h-[100vh] flex">
+    <main className="h-screen flex">
       <Sidebar />
       <section className="flex flex-col w-full">
         <Headbar />