diff --git a/images/bg.png b/images/bg.png
new file mode 100644
index 0000000..8e77474
Binary files /dev/null and b/images/bg.png differ
diff --git a/index.html b/index.html
index 5339511..296db6e 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,18 @@
       crossorigin="anonymous"
     />
     <title>Library Website</title>
+    <style>
+      .section {
+        background-image: url("images/bg.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        object-fit: contain;
+      }
+    </style>
   </head>
   <body>
     <header>
-      <nav class="navbar navbar-expand-lg bg-light">
+      <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
         <div class="container-fluid">
           <a class="navbar-brand" href="./index.html">Library Website</a>
           <button
@@ -52,12 +60,35 @@
         </div>
       </nav>
     </header>
-    <div class="container">
-      <div class="row">
-        <div class="col-12">
-          <h2>Welcome to The Online Library!</h2>
-        </div>
+    <!--------------------- section ---------------------------->
+
+    <div
+      class="section position-relative overflow-hidden p-3 p-md-5 text-center text-light"
+    >
+      <div class="col-md-5 p-lg-5 mx-auto my-5">
+        <h1 class="display-4 fw-normal font-white">
+          Welcome to the online Library!
+        </h1>
+        <form class="d-flex" role="search">
+          <input
+            class="form-control me-2"
+            type="search"
+            placeholder="Search"
+            aria-label="Search"
+          />
+          <button type="submit" class="btn btn-secondary">
+            <img
+              src="https://cdn-icons-png.flaticon.com/512/149/149852.png"
+              alt=""
+              style="width: 20px"
+            />
+          </button>
+        </form>
       </div>
+      <div class="product-device shadow-sm d-none d-md-block"></div>
+      <div
+        class="product-device product-device-2 shadow-sm d-none d-md-block"
+      ></div>
     </div>
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
