diff --git a/app/livres/page.tsx b/app/livres/page.tsx
new file mode 100644
index 00000000..461c3271
--- /dev/null
+++ b/app/livres/page.tsx
@@ -0,0 +1,23 @@
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { redirect } from "next/navigation";
+import { ResponsiveIframe } from "@/app/components/responsive-iframe";
+
+export default async function LivresPage() {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    redirect("/signin");
+  }
+
+  return (
+    <main className="w-full h-screen bg-black">
+      <div className="w-full h-full px-4 pt-12 pb-4">
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_LIVRE_URL || ''}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        />
+      </div>
+    </main>
+  );
+} 
\ No newline at end of file
diff --git a/components/announcement/announcement-form.tsx b/components/announcement/announcement-form.tsx
index 04738bf0..dd6a9bc6 100644
--- a/components/announcement/announcement-form.tsx
+++ b/components/announcement/announcement-form.tsx
@@ -213,7 +213,7 @@ export function AnnouncementForm({ userRole }: AnnouncementFormProps) {
                 <FormItem>
                   <FormLabel className="text-gray-700">Target Audience</FormLabel>
                   <FormControl>
-                    <div className="p-3 border border-gray-200 rounded-md bg-gray-50">
+                    <div className="p-3 border border-gray-200 rounded-md bg-white">
                       <p className="text-sm text-gray-500 mb-2">Select which roles can see this announcement:</p>
                       <div className="flex flex-wrap gap-2">
                         {availableRoles.map(role => (
@@ -222,8 +222,8 @@ export function AnnouncementForm({ userRole }: AnnouncementFormProps) {
                             variant={selectedRoles.includes(role.id) ? "default" : "outline"}
                             className={`cursor-pointer px-3 py-1 ${
                               selectedRoles.includes(role.id) 
-                                ? "bg-blue-600 hover:bg-blue-700" 
-                                : "hover:bg-gray-100"
+                                ? "bg-blue-600 hover:bg-blue-700 text-white" 
+                                : "bg-white hover:bg-gray-100 text-gray-700 border-gray-300"
                             }`}
                             onClick={() => handleRoleToggle(role.id)}
                           >
diff --git a/components/announcement/announcements-list.tsx b/components/announcement/announcements-list.tsx
index 220eafbd..2b2f77c1 100644
--- a/components/announcement/announcements-list.tsx
+++ b/components/announcement/announcements-list.tsx
@@ -123,7 +123,11 @@ export function AnnouncementsList({ userRole }: AnnouncementsListProps) {
         : role.charAt(0).toUpperCase() + role.slice(1);
       
       return (
-        <Badge key={role} variant="outline" className="mr-1">
+        <Badge 
+          key={role} 
+          variant="outline" 
+          className="mr-1 bg-white text-gray-700 border-gray-300"
+        >
           {roleName}
         </Badge>
       );
@@ -182,6 +186,7 @@ export function AnnouncementsList({ userRole }: AnnouncementsListProps) {
                           variant="outline"
                           size="sm"
                           onClick={() => handleViewAnnouncement(announcement)}
+                          className="bg-white text-gray-700 border-gray-300"
                         >
                           <Eye className="h-4 w-4" />
                           <span className="sr-only">View</span>
@@ -190,6 +195,7 @@ export function AnnouncementsList({ userRole }: AnnouncementsListProps) {
                           variant="outline"
                           size="sm"
                           onClick={() => handleDeleteClick(announcement)}
+                          className="bg-white text-gray-700 border-gray-300"
                         >
                           <Trash2 className="h-4 w-4" />
                           <span className="sr-only">Delete</span>
diff --git a/components/announcement/announcements-page.tsx b/components/announcement/announcements-page.tsx
index bb98c2d3..bc28cb00 100644
--- a/components/announcement/announcements-page.tsx
+++ b/components/announcement/announcements-page.tsx
@@ -35,16 +35,16 @@ export function AnnouncementsPage({ userRole = [] }: AnnouncementsPageProps) {
       
       <Tabs defaultValue="list">
         <div className="flex justify-between items-center mb-8">
-          <TabsList className="bg-black/20 border-0">
+          <TabsList className="bg-gray-200 border-0">
             <TabsTrigger 
               value="list"
-              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-400"
+              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-700"
             >
               All Announcements
             </TabsTrigger>
             <TabsTrigger 
               value="create"
-              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-400"
+              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-700"
             >
               Create Announcement
             </TabsTrigger>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index cb09e5ff..f9b5d159 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -21,6 +21,7 @@ import {
   ChevronLeft,
   ChevronRight,
   BookOpen,
+  Book,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -158,6 +159,12 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
       href: "/agilite",
       iframe: process.env.NEXT_PUBLIC_IFRAME_AGILITY_URL,
     },
+    {
+      title: "Livres",
+      icon: Book,
+      href: "/livres",
+      iframe: process.env.NEXT_PUBLIC_IFRAME_LIVRE_URL,
+    },
   ];
 
   // Role-specific menu items