diff --git a/brightspace/index.html b/brightspace/index.html
index 1e24e63..77212ed 100644
--- a/brightspace/index.html
+++ b/brightspace/index.html
@@ -3,9 +3,10 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>EQAO Resources</title>
+<title>Safe Exam Browser Homepage</title>
 <!-- Link to Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+<link rel="stylesheet" href="assets/style.css">  
 <style>
   .centered {
     text-align: center;
@@ -18,7 +19,7 @@
 <div class="container mt-5">
   <div class="row">
     <div class="col-12 centered">
-      <h1>EQAO Resources Homepage</h1>
+      <h1>Safe Exam Browser Homepage</h1>
     </div>
   </div>
 </div>
@@ -28,19 +29,39 @@ <h1>EQAO Resources Homepage</h1>
 <div class="container">
   <div class="row">
     <!-- First Column -->
-    <div class="col-md-4">
+    <div class="col-md-6 offset-md-3">
+      <img src="images/hub.webp" alt="The HUB Logo" class="img-fluid mb-2">
+      <button onclick="window.open('https://hwdsb.elearningontario.ca', '_blank');" class="btn btn-warning btn-block">Open The HUB</button>
+    </div>
+  </div>
+</div>
+
+<!-- Separator -->
+<div class="grid">
+  <hr class="sketch-rule grid__item">
+</div>
+  
+  <div class="container">
+  <div class="row">
+    <!-- First Column -->
+    <div class="col-md-3">
       <img src="images/desmos.webp" alt="Desmos Calculator" class="img-fluid mb-2">
-      <button onclick="window.open('https://desmos.com/calculator', '_blank');" class="btn btn-success btn-block mb-3">Open Desmos Calculator</button>
+      <button onclick="window.open('https://desmos.com/calculator', '_blank');" class="btn btn-success btn-block mb-3">Graphing Calculator</button>
     </div>
     <!-- Second Column -->
-    <div class="col-md-4">
-      <img src="images/polypad.webp" alt="Polypad" class="img-fluid mb-2">
-      <button onclick="window.open('https://polypad.amplify.com/p', '_blank');" class="btn btn-secondary btn-block mb-3">Open Polypad</button>
+    <div class="col-md-3">
+      <img src="images/desmos.webp" alt="The Desmos Logo" class="img-fluid mb-2">
+      <button onclick="window.open('https://desmos.com/scientific', '_blank');" class="btn btn-primary btn-block">Scientific Calculator</button>
     </div>
     <!-- Third Column -->
-    <div class="col-md-4">
-      <img src="images/eqao.webp" alt="EQAO Logo" class="img-fluid mb-2">
-      <button onclick="window.open('https://eqao.vretta.com/#/en/login-student', '_blank');" class="btn btn-primary btn-block">Open EQAO Assessment</button>
+    <div class="col-md-3">
+      <img src="images/polypad.webp" alt="Polypad" class="img-fluid mb-2">
+      <button onclick="window.open('https://polypad.amplify.com/p', '_blank');" class="btn btn-info btn-block mb-3">Polypad</button>
+    </div>
+    <!-- Forth Column -->
+    <div class="col-md-3">
+      <img src="images/translate.webp" alt="Polypad" class="img-fluid mb-2">
+      <button onclick="window.open('https://www.bing.com/translator', '_blank');" class="btn btn-secondary btn-block mb-3">Translator</button>
     </div>
   </div>
 </div>
@@ -63,7 +84,7 @@ <h2>Site Selection Globe</h2>
 <!-- Footer -->
 <div class="container-fluid mt-5">
   <div class="row">
-    <div class="col 12 centered">
+    <div class="col-md-6 offset-md-3">
       <img src="https://www.hwdsb.on.ca/wp-content/themes/hwdsb/images/footer.jpg" alt="Be You, Be Excellent Footer Image" class="img-fluid">
     </div>
   </div>
