diff --git a/src/report.rs b/src/report.rs
index 40053cf..d00ba19 100644
--- a/src/report.rs
+++ b/src/report.rs
@@ -77,7 +77,7 @@ pub async fn get_report(
         }
     };
 
-    // render report
+    // render report to html.
     let mut context = Context::new();
     context.insert("grade", &report_query.grade);
     context.insert("date", &Local::now().format("%Y-%m-%d").to_string());
@@ -88,12 +88,15 @@ pub async fn get_report(
             return (
                 StatusCode::BAD_REQUEST,
                 Json(json!({
-                    "error": format!("Unknown error creating event: {}", err)
+                    "error": format!("Unknown error creating event: {:?}", err)
                 })),
             )
                 .into_response()
         }
     };
 
-    todo!()
+    // render html to pdf
+
+    println!("{}", report);
+    (StatusCode::OK, "").into_response()
 }
diff --git a/templates/report.html b/templates/report.html
index 1621fe6..7150f83 100644
--- a/templates/report.html
+++ b/templates/report.html
@@ -3,29 +3,57 @@
   <head>
     <title>Student Point Report Grade {{ grade }}</title>
     <style>
+      /* color theme */
+      :root {
+        --primary-color: #9aedf4;
+        --secondary-color: #f2f2f2;
+        --text-color: #333;
+      }
       /* zebra striping */
       tr:nth-child(even) {
-        background-color: #f2f2f2;
+        background-color: var(--secondary-color);
       }
       /* table styling */
       table {
         border-collapse: collapse;
         width: 100%;
+        margin: 20px 0;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        font-family: Arial, sans-serif;
+        color: var(--text-color);
       }
       th, td {
         text-align: left;
-        padding: 8px;
+        padding: 12px;
         border: 1px solid #ddd;
       }
       th {
-        background-color: #4CAF50;
+        background-color: var(--primary-color);
         color: white;
+        font-weight: normal;
+      }
+      /* header styling */
+      header {
+        background-color: var(--primary-color);
+        color: white;
+        padding: 30px 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-family: Arial, sans-serif;
+      }
+      h1 {
+        margin: 0;
+        font-size: 32px;
+        font-weight: normal;
       }
     </style>
   </head>
   <body>
-    <h1>Student Point Report Grade {{ grade }}</h1>
-    <p>Date: {{ date }}</p>
+    <header>
+      <h1>Student Point Report Grade {{ grade }}</h1>
+      <p style="margin: 0;">{{ date }}</p>
+    </header>
     <table>
       <thead>
         <tr>
@@ -36,7 +64,7 @@
       <tbody>
         {% for user in users %}
         <tr>
-          <td>{{ user.name }}</td>
+          <td>{{ user.username }}</td>
           <td>{{ user.points }}</td>
         </tr>
         {% endfor %}
