diff --git a/index.html b/index.html
index f1da625..a393726 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#00509d"/>
+
+    <!-- Add icon to browser title bar -->
+    <link rel="icon" type="image/x-icon" href="assets/background/jawadphoto.avif">
+    
     <title>Mozamel Jawad | Portfolio</title>
+    
     <!-- box icons -->
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
     <!-- custom css -->
@@ -20,6 +25,7 @@
       <nav class="navbar">
         <a href="#home" class="active">Home</a>
         <a href="#portfolio">Portfolio</a>
+        <a href="#services">Services</a>
         <a href="#about">About</a>
         <a href="#contact">Contact</a>
       </nav>
@@ -196,6 +202,38 @@ <h4>Techlife Summit</h4>
       </div>
     </section>
 
+
+    <!-- Services section  -->
+
+    <section class="services" id="services">
+      <h2 class="heading">Our <span>Services</span> </h2>
+
+      <div class="services-container">
+
+        <div class="services-box">
+          <i class="bx bx-code-alt"></i>
+          <h3>Full-stack Development</h3>
+          <p>I offer comprehensive full-stack development services, combining front-end and back-end technologies to deliver seamless and feature-rich web applications that meet your business requirements.</p>
+          <a href="#services" class="btn">Read More</a>
+        </div>
+
+        <div class="services-box">
+          <i class='bx bx-minus-front' ></i>
+          <h3>Front-end Development</h3>
+          <p>With a focus on front-end development, I specialize in creating visually captivating and interactive user interfaces that enhance user engagement and provide a superior browsing experience.</p>
+          <a href="#services" class="btn">Read More</a>
+        </div>
+
+        <div class="services-box">
+          <i class='bx bx-data' ></i>
+          <h3>Database Development</h3>
+          <p>As a skilled database developer, I excel in designing and optimizing databases for efficient data storage, retrieval, and management, ensuring superior application performance and scalability.</p>
+          <a href="#services" class="btn">Read More</a>
+        </div>
+
+      </div>
+    </section>
+    
       <!-- about section design -->
       <section class="about" id="about">
         <div class="about-content">
@@ -213,6 +251,7 @@ <h3>Full-stack Web Developer!</h3>
             <button type="button" class="skill-btn">React</button>
             <button type="button" class="skill-btn">Redux</button>
             <button type="button" class="skill-btn">Figma</button>
+            <button type="button" class="skill-btn">Php</button>
             <button type="button" class="skill-btn">Ruby</button>
             <button type="button" class="skill-btn">Rails</button>
             <button type="button" class="skill-btn">Rspec</button>
@@ -226,8 +265,8 @@ <h3>Full-stack Web Developer!</h3>
           </div>
         </div>
       </section>
-    
-    <!-- contact section design -->
+
+    <!-- contact section  -->
     <section class="contact" id="contact">
       <h2 class="heading">Contact <span>Me!</span> </h2>
       <form action="https://formspree.io/f/meqwyeoe" method="POST">
@@ -240,7 +279,6 @@ <h2 class="heading">Contact <span>Me!</span> </h2>
       </form>
     </section>
   
-
     <!-- footer design -->
     <footer class="footer">
       <div class="footer-text">
diff --git a/style.css b/style.css
index 5855004..18dd887 100644
--- a/style.css
+++ b/style.css
@@ -12,10 +12,10 @@
 }
 
 :root {
-  --bg-color: #00509d;
-  --seocond-bg-color: #00296b;
+  --bg-color: #003f88;
+  --seocond-bg-color: #00509d;
   --text-color: #fff;
-  --main-color: #0ef;
+  --main-color: #0ee;
 }
 
 html {
@@ -150,6 +150,10 @@ section {
   font-size: 2.6rem;
 }
 
+.services-box h3 {
+  font-size: 2.6rem;
+}
+
 .home-content h3:nth-of-type(2) {
   margin-bottom: 2rem;
 }
@@ -197,11 +201,16 @@ span {
   justify-content: center;
   align-items: center;
   gap: 2rem;
-  background: var(--bg-color);
+  background: var(--seocond-bg-color);
   padding: 2rem 20%;
   text-align: center;
 }
 
+.services-box i {
+  font-size: 7rem;
+  color: var(--main-color);
+}
+
 .about-content a i {
   font-size: 2.5rem;
   color: var(--seocond-bg-color);
@@ -396,11 +405,45 @@ span {
   cursor: pointer;
 }
 
+/* services Section */
+
+.services h2 {
+  margin-bottom: 5rem;
+}
+
+.services-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.services-container .services-box {
+  flex: 1 1 30rem;
+  background: var(--seocond-bg-color);
+  padding: 3rem 2rem 4rem;
+  border-radius: 2rem;
+  text-align: center;
+  border: 0.2rem solid var(--bg-color);
+  transition: 0.5s ease;
+}
+
+.services-container .services-box:hover {
+  border-color: var(--main-color);
+  transform: scale(1.02);
+}
+
+.services-box p {
+  font-size: 1.6rem;
+  margin: 1rem 0 3rem;
+}
+
 /* Contact Section */
 
-.contact {
+/* .contact {
   background-color: var(--seocond-bg-color);
-}
+} */
 
 .contact h2 {
   margin-bottom: 3rem;
@@ -425,7 +468,7 @@ span {
   padding: 1.5rem;
   font-size: 1.6rem;
   color: var(--text-color);
-  background: var(--bg-color);
+  background: var(--seocond-bg-color);
   border-radius: 0.8rem;
   margin: 0.7rem 0;
 }
@@ -447,7 +490,7 @@ span {
   align-items: center;
   flex-wrap: wrap;
   padding: 2rem 9%;
-  background: var(--bg-color);
+  background: var(--seocond-bg-color);
 }
 
 .footer-text p {