diff --git a/index.html b/index.html
index 83cb1d9..ab05ad3 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel="stylesheet" href="./resources/css/styles.css">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Web development</title>
+  <title>Web Development</title>
 </head>
 <body>
-   <h2>My name here</h2>
-<ul>
-  <li>
-    <a href="week-1/intro.html">Week 1 -ludo</a>
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="./resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
+  <div class="container">
+<ul  class="d-flex align-items-center justify-content-between flex-wrap gap-3 mt-4">
+  <li class="list-group-item">
+    <a href="week-1/intro.html">
+      <button type="button" class="btn btn-outline-primary">Week 1</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-2/ludo.html">week 2</a>
+  <li class="list-group-item">
+    <a href="week-2/ludo.html">
+      <button type="button" class="btn btn-outline-primary">Week 2</button>
+    </a>
   </li>
-
-  <li>
-    <a href="week-3/form.html">week 3</a>
+  <li class="list-group-item">
+    <a href="week-3/form.html">
+      <button type="button" class="btn btn-outline-primary">Week 3</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-4/index.html">week 4</a>
+  <li class="list-group-item">
+    <a href="week-4/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 4</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-5/index.html">week 5</a>
+  <li class="list-group-item">
+    <a href="week-5/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 5</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-6/index.html">week 6</a>
+  <li class="list-group-item">
+    <a href="week-6/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 6</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-7/index.html">week 7</a>
+  <li class="list-group-item">
+    <a href="week-7/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 7</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-8/index.html">week 8</a>
+  <li class="list-group-item">
+    <a href="week-8/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 8</button>
+    </a>
   </li>
 
-  <li>
-    <a href="week-9/index.html">week 9</a>
+  <li class="list-group-item">
+    <a href="week-9/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 9</button>
+    </a>
   </li>
-  <li></li>
-    <a href="week-10/index.html">week 10</a>
+  <li class="list-group-item">
+    <a href="week-10/index.html">
+      <button type="button" class="btn btn-outline-primary">Week 10</button>
+    </a>
   </li>
 
 </ul>
+</div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/resources/css/styles.css b/resources/css/styles.css
new file mode 100644
index 0000000..7159778
--- /dev/null
+++ b/resources/css/styles.css
@@ -0,0 +1,7 @@
+body{
+    margin: 0;
+    padding: 0;
+}
+a{
+  text-decoration: none;
+}
diff --git a/resources/images/infiniti-dev_logo.png b/resources/images/infiniti-dev_logo.png
new file mode 100644
index 0000000..fd3cdb7
Binary files /dev/null and b/resources/images/infiniti-dev_logo.png differ
diff --git a/week-1/intro.html b/week-1/intro.html
index 9369ecd..8396397 100644
--- a/week-1/intro.html
+++ b/week-1/intro.html
@@ -2,14 +2,11 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">  
   <title>Document</title>
-
   <link rel="stylesheet" href="style.css">
-
-
-
-<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
 </head>
 
 
@@ -22,8 +19,18 @@
       font-family: "Patrick Hand", cursive;
     }
   </style>
-
-<h1>Hello worls</h1>
+<header class="d-flex align-items-center border-primary bg-primary">
+  <div class="logo-wrapper ms-3">
+    <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+  </div>
+  <div class="d-flex align-items-center justify-content-center w-100">
+   <h2 class="text-white">LIVE SECTION</h2>
+  </div>
+</header>
+<div class="d-flex justify-content-center align-items-center my-4">
+ <h4 class="text-dark">Introduction to HTML and CSS</h4> 
+</div>
+<h1>Hello world</h1>
 
 <div class="a">
   sdsds
diff --git a/week-1/style.css b/week-1/style.css
index e77b32d..2f26725 100644
--- a/week-1/style.css
+++ b/week-1/style.css
@@ -1,7 +1,7 @@
-h2 {
+/* h2 {
 color: red;
 border: 2px solid black;
-}
+} */
 
 
 
diff --git a/week-10/index.html b/week-10/index.html
index 522219e..c714d92 100644
--- a/week-10/index.html
+++ b/week-10/index.html
@@ -1,11 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>JavaScript Recursive Functions</title>
 </head>
 <body>
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
   <ul>
 <li>
   <a href="recursive.html">Recursive Functions</a>
diff --git a/week-2/ludo.html b/week-2/ludo.html
index 512f1c4..f7c930e 100644
--- a/week-2/ludo.html
+++ b/week-2/ludo.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Ludo</title>
@@ -42,9 +43,16 @@
   </style>
 </head>
 <body>
-  
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
 
-<div class="ludo">
+<div class="ludo my-4">
   <div class="row">
     <div class="box red border"></div>
     <div class="box red border"></div>
diff --git a/week-3/form.html b/week-3/form.html
index df4e11f..d14a4bb 100644
--- a/week-3/form.html
+++ b/week-3/form.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Open bank account</title>
@@ -19,7 +20,14 @@
       min-width: 200px;
     }
   </style>
-
+<header class="d-flex align-items-center border-primary bg-primary">
+  <div class="logo-wrapper ms-3">
+    <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+  </div>
+  <div class="d-flex align-items-center justify-content-center w-100">
+   <h2 class="text-white">LIVE SECTION</h2>
+  </div>
+</header>
   <form >
     <label for="name">enter your name</label>
     <input name="myname" type="text" placeholder="Enter your name" required id="name">
diff --git a/week-4/index.html b/week-4/index.html
index 93c8f98..a59ec67 100644
--- a/week-4/index.html
+++ b/week-4/index.html
@@ -1,11 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Layouts</title>
 </head>
 <body>
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
   <h2>
     1. Introduction to HTML Layouts
   </h2>
diff --git a/week-5/index.html b/week-5/index.html
index 4671a4d..697a272 100644
--- a/week-5/index.html
+++ b/week-5/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Psudo classes and responsive designs</title>
@@ -59,7 +60,14 @@
 
 
 </style>
-
+<header class="d-flex align-items-center border-primary bg-primary">
+  <div class="logo-wrapper ms-3">
+    <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+  </div>
+  <div class="d-flex align-items-center justify-content-center w-100">
+   <h2 class="text-white">LIVE SECTION</h2>
+  </div>
+</header>
   <div class="box" tabindex="2">
      Hello
 
diff --git a/week-6/index.html b/week-6/index.html
index a074c88..d92342e 100644
--- a/week-6/index.html
+++ b/week-6/index.html
@@ -1,12 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Javascript</title>
 </head>
 <body>
-
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
   <h1>Week 6</h1>
 
   <p>
diff --git a/week-7/index.html b/week-7/index.html
index e43a95c..b03e913 100644
--- a/week-7/index.html
+++ b/week-7/index.html
@@ -1,12 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Javacript variables</title>
 </head>
 
 <body>
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
   <script>
     // Variables are containers for storing data values.
     // In this example, x, y, and z are variables.
diff --git a/week-8/index.html b/week-8/index.html
index 045115c..546f72d 100644
--- a/week-8/index.html
+++ b/week-8/index.html
@@ -1,10 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Conditions and operators</title>
 </head>
+<body>
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
 <pre>
   <h2>
     Javacript conditions and operators
diff --git a/week-9/index.html b/week-9/index.html
index 2db7a84..b6594f5 100644
--- a/week-9/index.html
+++ b/week-9/index.html
@@ -1,12 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Week 9</title>
 </head>
 <body>
-
+  <header class="d-flex align-items-center border-primary bg-primary">
+    <div class="logo-wrapper ms-3">
+      <img src="../resources/images/infiniti-dev_logo.png" alt="logo" width="130px" height="100px">
+    </div>
+    <div class="d-flex align-items-center justify-content-center w-100">
+     <h2 class="text-white">LIVE SECTION</h2>
+    </div>
+  </header>
    <ul>
     <li>
       <a href="recape.html">Recape of previous classes</a>
