diff --git a/public/favicon.ico b/public/favicon.ico
index 4570eb8..01a7490 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/components/admin/AnnouncementDetail.tsx b/src/components/admin/AnnouncementDetail.tsx
index da77222..a9df6b2 100644
--- a/src/components/admin/AnnouncementDetail.tsx
+++ b/src/components/admin/AnnouncementDetail.tsx
@@ -7,6 +7,9 @@ import { MdModeEditOutline } from "react-icons/md";
 import { createMarkup } from "../common/TextEditor";
 import Modal from "../common/Modal";
 import ProgressIndicator from "../common/ProgressIndicator";
+import "react-quill/dist/quill.bubble.css";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
 
 interface AnnouncementDetailProps {
   announcement: Announcement;
@@ -68,7 +71,7 @@ const AnnouncementDetail: React.FC<AnnouncementDetailProps> = ({
           />
         </div>
       </div>
-      <div dangerouslySetInnerHTML={createMarkup(description)} />
+      <ReactQuill value={description} readOnly={true} theme="bubble" />
     </div>
   );
 };
diff --git a/src/components/auth/AuthImage.tsx b/src/components/auth/AuthImage.tsx
index d9227ea..b7a3cc1 100644
--- a/src/components/auth/AuthImage.tsx
+++ b/src/components/auth/AuthImage.tsx
@@ -20,7 +20,7 @@ const AuthImage = () => {
           Start making your dreams come true
         </h1>
         <p className="text-white max-w-[439px] mt-5">
-          Create an account and join africa's digital revolution.
+          Create an account and join Africa's digital revolution.
         </p>
       </div>
 
diff --git a/src/components/common/TextEditor.tsx b/src/components/common/TextEditor.tsx
index 4c81780..c87ec2b 100644
--- a/src/components/common/TextEditor.tsx
+++ b/src/components/common/TextEditor.tsx
@@ -1,6 +1,5 @@
 import "react-quill/dist/quill.snow.css";
 import dynamic from "next/dynamic";
-import "react-quill/dist/quill.snow.css";
 import DOMPurify from "dompurify";
 
 export const createMarkup = (html: string) => {
diff --git a/src/components/contest/OverViewContests.tsx b/src/components/contest/OverViewContests.tsx
index eb9991e..9218233 100644
--- a/src/components/contest/OverViewContests.tsx
+++ b/src/components/contest/OverViewContests.tsx
@@ -38,7 +38,7 @@ const OverViewContests: React.FC = () => {
     },
     {
       icon: BsArrowRepeat,
-      title: "current Contest",
+      title: "Current Contest",
       number: status?.value.currentContests,
     },
   ];
diff --git a/src/components/layout/NavBar.tsx b/src/components/layout/NavBar.tsx
index 7afb893..012b098 100644
--- a/src/components/layout/NavBar.tsx
+++ b/src/components/layout/NavBar.tsx
@@ -40,6 +40,11 @@ const NavBar: React.FC = () => {
         to: "/resources",
         current: false,
       },
+      {
+        name: "Announcements",
+        to: "/announcements",
+        current: false,
+      },
     ],
     admin: [
       {
@@ -54,7 +59,7 @@ const NavBar: React.FC = () => {
       },
       {
         name: "Announcements",
-        to: "/admin/announcements",
+        to: "/announcements",
         current: false,
       },
       {
@@ -188,16 +193,16 @@ const NavBar: React.FC = () => {
       <section
         className={classNames(
           hideNav ? "hidden" : "flex",
-          "px-4 py-2 border-b-2 items-center"
+          "px-4 py-2 border-b items-center"
         )}
       >
         {isAuthenticated ? (
-          <div className="w-28 lg:w-52">
+          <div>
             <Image src="/A2SV-Logo.svg" width={105} height={30} alt="logo" />
           </div>
         ) : (
           <Link className="z-30" href="/">
-            <div className="w-28 lg:w-52">
+            <div>
               <Image src="/A2SV-Logo.svg" width={105} height={30} alt="logo" />
             </div>
           </Link>
@@ -222,8 +227,8 @@ const NavBar: React.FC = () => {
                     key={index}
                     href={to}
                     className={classNames(
-                      current ? "text-blue-700" : "text-primary-text",
-                      "text-sm md:text-base"
+                      current ? "text-primary" : "text-primary-text",
+                      "text-sm md:text-base font-medium"
                     )}
                   >
                     {name}
@@ -260,7 +265,7 @@ const NavBar: React.FC = () => {
               <div className="flex items-center gap-x-2">
                 {hasUnreadNotification ? (
                   <Link href={"/notifications"}>
-                    <MdNotificationAdd className="text-red-500 text-2xl hover:text-red-300-500" />
+                    <MdNotificationAdd className="text-primary text-2xl hover:text-blue-600" />
                   </Link>
                 ) : (
                   <Link href={"/notifications"}>
diff --git a/src/components/profile/ProfileCard.tsx b/src/components/profile/ProfileCard.tsx
index 43496f1..00d89e7 100644
--- a/src/components/profile/ProfileCard.tsx
+++ b/src/components/profile/ProfileCard.tsx
@@ -36,7 +36,7 @@ const ProfileCard = () => {
     <div className="w-96  mx-2 rounded-lg overflow-hidden bg-white shadow-md p-8">
       {applicant.profilePicture ? (
         <Image
-          className="w-full rounded-lg aspect-square object-center"
+          className="w-full rounded-lg aspect-square object-center object-contain"
           src={applicant.profilePicture}
           alt="profile-picture"
           width={317}
diff --git a/src/components/resources/Resource.tsx b/src/components/resources/Resource.tsx
index d68de09..28e86cd 100644
--- a/src/components/resources/Resource.tsx
+++ b/src/components/resources/Resource.tsx
@@ -13,6 +13,9 @@ import { createMarkup } from "../common/TextEditor";
 import EditResources from "./EditResource";
 import { FiDelete, FiEdit, FiTrash, FiTrash2 } from "react-icons/fi";
 import { MdDelete, MdEdit } from "react-icons/md";
+import "react-quill/dist/quill.bubble.css";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
 
 interface ResourceProps {
   selectedChapter: number;
@@ -110,7 +113,12 @@ const Resource: React.FC<ResourceProps> = ({
         {chapter ? (
           <div className="flex-col items-center justify-center w-full">
             <h1 className="text-2xl font-bold mb-4">{chapter.title}</h1>
-            <div dangerouslySetInnerHTML={createMarkup(chapter.content)} />
+            {/* <div dangerouslySetInnerHTML={createMarkup(chapter.content)} /> */}
+            <ReactQuill
+              value={chapter.content}
+              readOnly={true}
+              theme="bubble"
+            />
           </div>
         ) : (
           <div>
diff --git a/src/middleware.ts b/src/middleware.ts
index eaa3114..ad493cc 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -3,7 +3,7 @@ import { NextRequest } from "next/server";
 import { useSelector } from "react-redux";
 import { RootState } from "./store";
 import { useAppSelector } from "./store/hooks";
-const baseUrl = "https://t-web-project.vercel.app";
+const baseUrl = "http://localhost:3000";
 
 export default function middleware(req: NextRequest) {
   let verify = req.cookies.get("token");
@@ -12,7 +12,7 @@ export default function middleware(req: NextRequest) {
 
   if (
     !verify &&
-    (url.includes("/admin/announcements") ||
+    (url.includes("/announcements") ||
       url.includes("/admin/waitlist") ||
       url.includes("/admin/groups") ||
       url.includes("/journey") ||
diff --git a/src/pages/admin/announcements.tsx b/src/pages/announcements.tsx
similarity index 92%
rename from src/pages/admin/announcements.tsx
rename to src/pages/announcements.tsx
index 9d02985..17db96e 100644
--- a/src/pages/admin/announcements.tsx
+++ b/src/pages/announcements.tsx
@@ -7,6 +7,7 @@ import Error from "<@>/components/common/Error";
 import Modal from "<@>/components/common/Modal";
 import { useGetAnnouncementsQuery } from "<@>/store/announcement/announcement-api";
 import { Announcement } from "<@>/types/admin/Announcement";
+import { getCookie } from "<@>/utils/cookie";
 import Head from "next/head";
 import React, { useState } from "react";
 import { AiOutlinePlus } from "react-icons/ai";
@@ -73,14 +74,16 @@ const index: React.FC = () => {
         <div className="flex justify-between w-full">
           <p className="opacity-60 text-lg">Announcements</p>
 
-          <Button
-            onClick={() => {
-              setCreateAnnouncement(true);
-              setShowModal(true);
-            }}
-            startIcon={<AiOutlinePlus />}
-            label="New Announcement"
-          />
+          {getCookie("role") === "HeadOfEducation" && (
+            <Button
+              onClick={() => {
+                setCreateAnnouncement(true);
+                setShowModal(true);
+              }}
+              startIcon={<AiOutlinePlus />}
+              label="New Announcement"
+            />
+          )}
         </div>
 
         <div className="w-full grid grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-8 p-4">
diff --git a/src/pages/notifications/index.tsx b/src/pages/notifications/index.tsx
index fcb7114..7e292c0 100644
--- a/src/pages/notifications/index.tsx
+++ b/src/pages/notifications/index.tsx
@@ -58,99 +58,97 @@ const Notifications = () => {
   // notifications card popup
 
   return (
-    <section className="w-3/4 lg:w-1/2 mx-auto mt-5 mb-10">
-      <div className="flex justify-between">
-        <h1 className="text-3xl font-bold text-gray-800 mb-10">
-          Notifications
-        </h1>
-        {hasUnreadNotification && (
-          <button
-            className="bg-primary hover:bg-blue-400 text-white font-bold py-2 px-4 h-10 rounded"
-            onClick={handleReadAllClick}
-          >
-            Read All
-          </button>
-        )}
-      </div>
-
-      {isLoading ? (
-        <div className="flex flex-col gap-y-4">
-          {Array(4)
-            .fill(4)
-            .map((_item, index) => (
-              <div
-                className="bg-white rounded-lg shadow-lg p-6 animate-pulse"
-                key={index}
-              >
-                <h2 className="text-xl font-semibold mb-2 bg-gray-300 h-6 w-3/4 lg:w-1/2 rounded"></h2>
-                <p className="text-gray-700 mb-4 bg-gray-300 h-4 w-3/4 rounded"></p>
-                <div className="flex items-center text-gray-600">
-                  <div className="bg-gray-300 h-4 w-4 rounded-full mr-2"></div>
-                  <span className="bg-gray-300 h-4 w-16 rounded"></span>
-                </div>
-              </div>
-            ))}
+    <div className="bg-zinc-50">
+      <section className="w-3/4 lg:w-1/2 mx-auto mt-5 mb-10">
+        <div className="flex justify-between">
+          <h1 className="text-3xl font-bold text-gray-800 mb-10">
+            Notifications
+          </h1>
+          {hasUnreadNotification && (
+            <button
+              className="bg-primary hover:bg-blue-400 text-white font-bold py-2 px-4 h-10 rounded"
+              onClick={handleReadAllClick}
+            >
+              Read All
+            </button>
+          )}
         </div>
-      ) : (
-        <div className="flex flex-col gap-y-4">
-          {notifications && notifications.length != 0 ? (
-            notifications.map(
-              ({ title, content, dateCreated, isRead }, index) => (
-                <button
+
+        {isLoading ? (
+          <div className="flex flex-col gap-y-4">
+            {Array(4)
+              .fill(4)
+              .map((_item, index) => (
+                <div
+                  className="bg-white rounded-lg shadow-lg p-6 animate-pulse"
                   key={index}
-                  onClick={() =>
-                    setCurrNotification({
-                      title,
-                      content,
-                      dateCreated,
-                      isRead,
-                    })
-                  }
                 >
-                  <div
+                  <h2 className="text-xl font-semibold mb-2 bg-gray-300 h-6 w-3/4 lg:w-1/2 rounded"></h2>
+                  <p className="text-gray-700 mb-4 bg-gray-300 h-4 w-3/4 rounded"></p>
+                  <div className="flex items-center text-gray-600">
+                    <div className="bg-gray-300 h-4 w-4 rounded-full mr-2"></div>
+                    <span className="bg-gray-300 h-4 w-16 rounded"></span>
+                  </div>
+                </div>
+              ))}
+          </div>
+        ) : (
+          <div className="flex flex-col divide-y p-4 rounded-xl">
+            {notifications && notifications.length != 0 ? (
+              notifications.map(
+                ({ title, content, dateCreated, isRead }, index) => (
+                  <button
                     key={index}
-                    className={
-                      isRead
-                        ? "bg-white rounded-lg shadow-lg p-6 hover:scale-100"
-                        : "bg-white rounded-lg shadow-lg p-6 hover:scale-100 border border-red-400 "
+                    onClick={() =>
+                      setCurrNotification({
+                        title,
+                        content,
+                        dateCreated,
+                        isRead,
+                      })
                     }
                   >
-                    <h2 className="text-xl font-semibold mb-2 text-start">
-                      {title}
-                    </h2>
+                    <div
+                      key={index}
+                      className={isRead ? "bg-white p-6" : "bg-blue-50 p-6 "}
+                    >
+                      <h2 className="text-xl font-semibold mb-2 text-start">
+                        {title}
+                      </h2>
 
-                    <p className="text-primary text-start my-5">Details</p>
-                    {/* <p className="text-gray-700 mb-4">{content}</p> */}
-                    <div className="flex items-center text-gray-600">
-                      <FaRegCalendarAlt className="mr-2" />
-                      <span>{getDate(dateCreated)}</span>
+                      <p className="text-primary text-start my-5">Details</p>
+                      {/* <p className="text-gray-700 mb-4">{content}</p> */}
+                      <div className="flex items-center text-gray-600">
+                        <FaRegCalendarAlt className="mr-2" />
+                        <span>{getDate(dateCreated)}</span>
+                      </div>
                     </div>
-                  </div>
-                </button>
+                  </button>
+                )
               )
-            )
-          ) : (
-            <p className="text-gray-600 text-start">
-              You don't have any notifications.
-            </p>
-          )}
-        </div>
-      )}
-      {currNotification && (
-        <Modal
-          onClose={() => {
-            setCurrNotification(null);
-          }}
-          children={
-            <NotificationsCard
-              title={currNotification.title}
-              content={currNotification.content}
-              date={getDate(currNotification.dateCreated)}
-            />
-          }
-        />
-      )}
-    </section>
+            ) : (
+              <p className="text-gray-600 text-start">
+                You don't have any notifications.
+              </p>
+            )}
+          </div>
+        )}
+        {currNotification && (
+          <Modal
+            onClose={() => {
+              setCurrNotification(null);
+            }}
+            children={
+              <NotificationsCard
+                title={currNotification.title}
+                content={currNotification.content}
+                date={getDate(currNotification.dateCreated)}
+              />
+            }
+          />
+        )}
+      </section>
+    </div>
   );
 };