diff --git a/Annotations/Role based annotation/RoleBasedAnnotation/src/Authentication.jsx b/Annotations/Role based annotation/RoleBasedAnnotation/src/Authentication.jsx
index c04f3c0..504660d 100644
--- a/Annotations/Role based annotation/RoleBasedAnnotation/src/Authentication.jsx	
+++ b/Annotations/Role based annotation/RoleBasedAnnotation/src/Authentication.jsx	
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import "./index.css"; // Make sure this CSS file exists and is correctly styled
+import "./PdfViewer.css"; // Make sure this CSS file exists and is correctly styled
 
 const hostURL = "https://localhost:44310/api/Authentication";
 
diff --git a/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.css b/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.css
index fec4af4..4a5bd94 100644
--- a/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.css	
+++ b/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.css	
@@ -1,3 +1,12 @@
+   @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
+   @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+   @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+   @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+   @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+   @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+   @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+   @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+   
 /* Base */
 body {
   margin: 0;
diff --git a/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.jsx b/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.jsx
index eb31ed4..0ee76de 100644
--- a/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.jsx	
+++ b/Annotations/Role based annotation/RoleBasedAnnotation/src/PdfViewer.jsx	
@@ -364,7 +364,7 @@ const PdfViewer = () => {
           ref={pdfViewerRef}
           id="container"
           documentPath={window.location.origin + "/Annotations.pdf"}
-          resourceUrl="https://cdn.syncfusion.com/ej2/30.2.7/dist/ej2-pdfviewer-lib"
+          resourceUrl="https://cdn.syncfusion.com/ej2/31.2.7/dist/ej2-pdfviewer-lib"
           style={{ height: '640px' }}
           documentLoad={handleDocumentLoad}
           annotationAdd={onAnnotationAdd}
diff --git a/Annotations/Role based annotation/RoleBasedAnnotation/src/index.css b/Annotations/Role based annotation/RoleBasedAnnotation/src/index.css
deleted file mode 100644
index 717bb1d..0000000
--- a/Annotations/Role based annotation/RoleBasedAnnotation/src/index.css	
+++ /dev/null
@@ -1,10 +0,0 @@
-   @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
-   @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-   @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
-   @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
-   @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-   @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-   @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-   @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
-
-   
\ No newline at end of file
diff --git a/Annotations/Role based annotation/RoleBasedAnnotation/src/index.jsx b/Annotations/Role based annotation/RoleBasedAnnotation/src/index.jsx
index 8411c75..27894f2 100644
--- a/Annotations/Role based annotation/RoleBasedAnnotation/src/index.jsx	
+++ b/Annotations/Role based annotation/RoleBasedAnnotation/src/index.jsx	
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './PdfViewer.css';
 import { registerLicense } from '@syncfusion/ej2-base';
 import PdfViewer from './PdfViewer';