diff --git a/contakt.html b/contakt.html
index e7da25d..58e6a71 100644
--- a/contakt.html
+++ b/contakt.html
@@ -15,9 +15,9 @@
     <link rel="stylesheet" href="css/footer.css" />
     <link rel="stylesheet" href="css/contact-me.css" />
     <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-  />
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
   </head>
   <body>
     <!-- Main Navigation Bar -->
@@ -47,67 +47,71 @@ <h2 class="section-title">
     <!-- Contact Section -->
     <section class="contact-section">
       <div class="contact-info">
-          <h2>Get In Touch And Feel Free To <span>Contact Us</span></h2>
-          <p>
-              Cumque reprehenderit maxime non nulla officia! Ante euismod dolore. Ea tellus scelerisque scelerisque animin et faucibus non ut. Natus nisi, enim iaculis tempor fusce!
-          </p>
+        <h2>Get In Touch And Feel Free To <span>Contact Us</span></h2>
+        <p>
+          Feel free to reach out to us for any inquiries or assistance you may
+          need. Our team is dedicated to providing you with top-notch service
+          and answering all your questions. Whether you’re looking for more
+          information about our services, need support, or simply want to give
+          feedback, we’re here to help. Get in touch with us today!
+        </p>
+      </div>
 
-          <div class="contact-cards">
-              <div class="card">
-                  <div class="icon">
-                      <i class="fas fa-map-marker-alt"></i>
-                  </div>
-                  <div class="info">
-                      <h3>Office Location</h3>
-                      <p>13th Rock Street, San Francisco</p>
-                  </div>
-              </div>
-              <div class="card">
-                  <div class="icon">
-                      <i class="fas fa-phone"></i>
-                  </div>
-                  <div class="info">
-                      <h3>Phone Number</h3>
-                      <p>+235-569-559-66, +985-365-226-447</p>
-                  </div>
-              </div>
-              <div class="card">
-                  <div class="icon">
-                      <i class="fas fa-envelope"></i>
-                  </div>
-                  <div class="info">
-                      <h3>Mail Address</h3>
-                      <p>support@example.com</p>
-                  </div>
-              </div>
+      <div class="contact-container">
+        <div class="contact-cards">
+          <div class="card">
+            <div class="icon">
+              <i class="fas fa-map-marker-alt"></i>
+            </div>
+            <div class="info">
+              <h3>Office Location</h3>
+              <p>13th Rock Street, San Francisco</p>
+            </div>
           </div>
-      </div>
+          <div class="card">
+            <div class="icon">
+              <i class="fas fa-phone"></i>
+            </div>
+            <div class="info">
+              <h3>Phone Number</h3>
+              <p>+235-569-559-66, +985-365-226-447</p>
+            </div>
+          </div>
+          <div class="card">
+            <div class="icon">
+              <i class="fas fa-envelope"></i>
+            </div>
+            <div class="info">
+              <h3>Mail Address</h3>
+              <p>support@example.com</p>
+            </div>
+          </div>
+        </div>
 
-      <div class="contact-form">
-          <h2>Contact Us</h2>
+        <div class="contact-form">
           <form action="#" method="POST">
-              <input type="text" placeholder="Your Name" required>
-              <input type="email" placeholder="Your Email" required>
-              <input type="text" placeholder="Your Subject">
-              <textarea placeholder="Your Message (optional)" rows="5"></textarea>
-              <button type="submit">Submit Message</button>
+            <input type="text" placeholder="Your Name" required />
+            <input type="email" placeholder="Your Email" required />
+            <input type="text" placeholder="Your Subject" />
+            <textarea placeholder="Your Message (optional)" rows="5"></textarea>
+            <button type="submit">Submit Message</button>
           </form>
+        </div>
       </div>
-  </section>
+    </section>
 
-  
-<!-- Footer Section -->
-<footer class="footer">
-    <div class="logo-container">
-      <div class="logo">
-        <img src="./img/logo3.png" alt="logo" />
-        <h2 class="section-title">
-          Guezel <span class="highlight">Webdesign</span>
-        </h2>
+    <!-- Footer Section -->
+    <footer class="footer">
+      <div class="logo-container">
+        <div class="logo">
+          <img src="./img/logo3.png" alt="logo" />
+          <h2 class="section-title">
+            Guezel <span class="highlight">Webdesign</span>
+          </h2>
+        </div>
       </div>
-    </div>
 
-    <div class="footer-content">
+      <div class="footer-content">
         <!-- About Company Section -->
         <div class="footer-section">
           <h3>About Us</h3>
@@ -143,11 +147,30 @@ <h3>Our Portfolio</h3>
       <!-- Social Media and Copyright -->
       <div class="footer-bottom">
         <div class="social-media">
-          <a href="https://github.com/Orhanguezel" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i></a>
-          <a href="https://codepen.io/Orhan-G-zel" target="_blank" rel="noopener noreferrer"><i class="fab fa-codepen"></i></a>
-          <a href="https://www.instagram.com/kazatlet?igsh=eWkyaWNydWhteG1t" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
-          <a href="https://www.linkedin.com/in/orhan-g%C3%BCzel-53b47b11a/" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
-
+          <a
+            href="https://github.com/Orhanguezel"
+            target="_blank"
+            rel="noopener noreferrer"
+            ><i class="fab fa-github"></i
+          ></a>
+          <a
+            href="https://codepen.io/Orhan-G-zel"
+            target="_blank"
+            rel="noopener noreferrer"
+            ><i class="fab fa-codepen"></i
+          ></a>
+          <a
+            href="https://www.instagram.com/kazatlet?igsh=eWkyaWNydWhteG1t"
+            target="_blank"
+            rel="noopener noreferrer"
+            ><i class="fab fa-instagram"></i
+          ></a>
+          <a
+            href="https://www.linkedin.com/in/orhan-g%C3%BCzel-53b47b11a/"
+            target="_blank"
+            rel="noopener noreferrer"
+            ><i class="fab fa-linkedin"></i
+          ></a>
         </div>
         <p class="copyright">
           Copyright © 2024 Guezel Webdesign. Powered by OG
diff --git a/css/contact-me.css b/css/contact-me.css
index 307813f..72bbcc1 100644
--- a/css/contact-me.css
+++ b/css/contact-me.css
@@ -1,7 +1,136 @@
-.contact{
-    padding: 50px 20px;
-    background: radial-gradient(circle at center, rgb(13, 31, 45, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%);
+
+.contact-section {
+    background-color: var(--black-color);
+
+}
+
+.contact-info {
     text-align: center;
-    height: 350px;
-    border: 1px solid red;
-}
\ No newline at end of file
+    color: var(--highlight-color);
+    font-size: var(--h1-font-size);
+    margin: 20px 0;
+    padding: 20px;
+}
+
+.contact-info h2 {
+    color: var(--text-color);
+}
+
+
+
+.contact-container{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    max-width: 1200px;
+    min-width: 350px;
+    margin: 0 auto;
+    padding: 20px;
+    gap: 40px;
+}
+
+.contact-cards {
+    flex:1 1 400px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: space-between;
+    min-height: 600px;
+    margin: 0 auto;
+    background-color:var(--secondary-color);
+    border: 0.5px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+
+}
+
+.contact-cards .card {
+    flex: 1 1 350px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px;
+    margin: 20px 10px;
+    background-color: #000C14;
+    border: 0.5px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+}
+
+.card .icon i{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+    font-size: 1.5em;
+    color: var(--highlight-color);
+    width: 60px;
+    height: 60px;
+    border: 1px solid var(--highlight-color);
+    border-radius: 50%;
+}
+
+.card .info h3 {
+    font-size: var(--h3-font-size);
+    margin-bottom: 20px;
+    color: var(--text-color);
+}
+
+
+.contact-form {
+    flex:1 1 400px;
+    min-height: 600px;
+    background-color:var(--secondary-color);
+    border: 0.5px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 20px;
+    margin: 0 auto;
+}
+
+.contact-form form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.contact-form input,
+.contact-form textarea {
+    padding: 15px;
+    font-size: 1.1em;
+    border-radius: 8px;
+    border: 2px solid var(--highlight-color);
+    background-color: #1b2838;
+    color: var(--text-color);
+}
+
+.contact-form input::placeholder,
+.contact-form textarea::placeholder {
+    color: var(--highlight-color);
+}
+
+button {
+    padding: 15px;
+    font-size: 1.1em;
+    border-radius: 8px;
+    border: none;
+    width: 120px;
+}
+
+/* Responsive for smaller screens */
+@media (max-width: 840px) {
+    .contact-container {
+        flex-direction: column;
+    }
+
+    .contact-info,
+    .contact-form {
+        width: 100%;
+        min-height: auto;
+    }
+
+    .contact-cards {
+        width: 100%;
+    }
+
+    .contact-cards .card {
+        align-items: center;
+    }
+}
diff --git a/css/global.css b/css/global.css
index 654fc87..be0805d 100644
--- a/css/global.css
+++ b/css/global.css
@@ -20,6 +20,14 @@ h1, h2 {
     color: var(--highlight-color);
 }
 
+h1 {
+    font-size: var(--h1-font-size);
+}
+
+h2 {
+    font-size: var(--h2-font-size);
+}
+
 p {
     font-family: var(--font-family2);
     font-size: var(--p-font-size);
@@ -46,3 +54,7 @@ button:hover, .btn:hover, .explore-btn:hover {
     box-shadow: 2px 2px 10px rgba(252, 247, 247, 0.8);
     transform: scale(1.05); 
 }
+
+span{
+    color: var(--highlight-color);
+}
\ No newline at end of file
diff --git a/css/root.css b/css/root.css
index 11c3c5f..1187c2c 100644
--- a/css/root.css
+++ b/css/root.css
@@ -1,6 +1,7 @@
 :root {
     --primary-color: #19d6e3;
     --secondary-color: #0d1f2d;
+    --black-color:#000000;
     --text-color: white;
     --highlight-color: #19d6e3;
 
