diff --git a/src/pages/tenant/Notifications.tsx b/src/pages/tenant/Notifications.tsx
index 6981071..c88c78e 100644
--- a/src/pages/tenant/Notifications.tsx
+++ b/src/pages/tenant/Notifications.tsx
@@ -7,7 +7,7 @@ import {
 } from "@/store/notificationSlice";
 import {
   Bell,
-  Search,
+  // Search,
   Check,
   Trash2,
   CheckCircle2,
@@ -19,7 +19,7 @@ import {
   GraduationCap,
   GitGraph,
   Building2,
-  ExternalLink,
+  // ExternalLink,
   Clock,
 } from "lucide-react";
 import { formatDistanceToNow, isToday, isYesterday } from "date-fns";
@@ -32,6 +32,7 @@ import type {
 } from "@/types/notification";
 import { Layout } from "@/components/layout/Layout";
 import { Button } from "@/components/ui/button";
+import { PrimaryButton } from "@/components/shared/PrimaryButton";
 import { notificationService } from "@/services/notification-service";
 import { showToast } from "@/utils/toast";
 
@@ -175,9 +176,9 @@ export const Notifications = () => {
     // }
 
     if (notification.action_url) {
-      const targetUrl = notification.action_url.startsWith('/tenant') 
-        ? notification.action_url 
-        : `/tenant${notification.action_url.startsWith('/') ? '' : '/'}${notification.action_url}`;
+      const targetUrl = notification.action_url.startsWith("/tenant")
+        ? notification.action_url
+        : `/tenant${notification.action_url.startsWith("/") ? "" : "/"}${notification.action_url}`;
       navigate(targetUrl);
     }
   };
@@ -245,7 +246,7 @@ export const Notifications = () => {
           </div>
 
           <div className="flex items-center gap-3 pb-2 md:pb-0">
-            <div className="relative group">
+            {/* <div className="relative group">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
               <input
                 type="text"
@@ -254,7 +255,7 @@ export const Notifications = () => {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
-            </div>
+            </div> */}
             {unread_count > 0 && (
               <Button
                 variant="ghost"
@@ -305,22 +306,21 @@ export const Notifications = () => {
                 <div
                   key={notification.id}
                   className={cn(
-                    "group relative overflow-hidden bg-white border rounded-xl transition-all duration-200 hover:shadow-md",
+                    "group relative bg-white border rounded-lg p-3 flex transition-all duration-200 hover:shadow-sm",
                     !notification.is_read
-                      ? "border-blue-100 shadow-[0_2px_8px_rgba(59,130,246,0.05)]"
-                      : "border-gray-100 shadow-sm",
+                      ? "border-gray-300"
+                      : "border-gray-200",
                   )}
                 >
-                  {/* Unread indicator bar */}
                   {!notification.is_read && (
-                    <div className="absolute left-0 top-0 bottom-0 w-1 bg-blue-500" />
+                    <div className="absolute left-[-4px] top-7 w-2 h-2 rounded-full bg-blue-500" />
                   )}
 
-                  <div className="p-4 md:p-5 flex gap-4">
+                  <div className="flex w-full gap-4">
                     {/* Icon */}
                     <div
                       className={cn(
-                        "flex-shrink-0 w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center border",
+                        "flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center border",
                         getTypeColors(notification.notification_type),
                       )}
                     >
@@ -371,12 +371,11 @@ export const Notifications = () => {
                       {/* Actions */}
                       <div className="mt-4 pt-4 border-t border-gray-50 flex items-center justify-between">
                         <div className="flex items-center gap-3">
-                          <Button
-                            size="sm"
-                            className="bg-[#112868] hover:bg-[#0a1b4d] text-white"
+                          <PrimaryButton
+                            size="small"
                             onClick={() => handleAction(notification)}
                           >
-                            <ExternalLink className="w-3.5 h-3.5 mr-2" />
+                            {/* <ExternalLink className="w-3.5 h-3.5 mr-2" /> */}
                             {notification.category === "training"
                               ? "View Assignment"
                               : notification.category === "capa"
@@ -384,7 +383,7 @@ export const Notifications = () => {
                                 : notification.category === "workflow"
                                   ? "View Task"
                                   : "View Details"}
-                          </Button>
+                          </PrimaryButton>
                           {!notification.is_read && (
                             <button
                               onClick={() => handleMarkRead(notification.id)}