diff --git a/assets/images/Star.svg b/assets/images/Star.svg
new file mode 100644
index 0000000..f28129b
--- /dev/null
+++ b/assets/images/Star.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.275 11.9188L11.425 13.9188C11.8312 14.175 12.3312 13.7938 12.2125 13.325L11.3 9.73752C11.2753 9.63807 11.2792 9.53369 11.3113 9.43638C11.3434 9.33907 11.4023 9.2528 11.4812 9.18752L14.3062 6.83127C14.675 6.52502 14.4875 5.90627 14.0062 5.87502L10.3187 5.63752C10.2181 5.63166 10.1214 5.59663 10.0404 5.53669C9.95935 5.47675 9.89754 5.39451 9.8625 5.30002L8.4875 1.83752C8.4511 1.73745 8.38479 1.65102 8.29758 1.58994C8.21037 1.52886 8.10647 1.49609 8 1.49609C7.89352 1.49609 7.78963 1.52886 7.70241 1.58994C7.6152 1.65102 7.54889 1.73745 7.5125 1.83752L6.1375 5.30002C6.10245 5.39451 6.04064 5.47675 5.95962 5.53669C5.87859 5.59663 5.78186 5.63166 5.68125 5.63752L1.99375 5.87502C1.5125 5.90627 1.325 6.52502 1.69375 6.83127L4.51875 9.18752C4.59771 9.2528 4.65661 9.33907 4.68868 9.43638C4.72075 9.53369 4.72467 9.63807 4.7 9.73752L3.85625 13.0625C3.7125 13.625 4.3125 14.0813 4.79375 13.775L7.725 11.9188C7.8072 11.8665 7.90259 11.8387 8 11.8387C8.09741 11.8387 8.1928 11.8665 8.275 11.9188Z" fill="#FA8232"/>
+</svg>
diff --git a/assets/images/mobileImage.webp b/assets/images/mobileImage.webp
new file mode 100644
index 0000000..3c49da1
Binary files /dev/null and b/assets/images/mobileImage.webp differ
diff --git a/assets/images/mobileImage2.webp b/assets/images/mobileImage2.webp
new file mode 100644
index 0000000..40cdb21
Binary files /dev/null and b/assets/images/mobileImage2.webp differ
diff --git a/src/aboutUa.html b/src/aboutUs.html
similarity index 98%
rename from src/aboutUa.html
rename to src/aboutUs.html
index f84f88e..e3302f9 100644
--- a/src/aboutUa.html
+++ b/src/aboutUs.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ar">
+<html lang="ar" dir="ltr">
 
 <head>
     <meta charset="UTF-8">
@@ -21,7 +21,7 @@
 
     <!-- Start Content -->
         <section class="container mx-auto flex md:flex-row flex-col md:items-center justify-center gap-20 m-20 ltr:pl-5 ltr:md:pl-0 rtl:pr-5 rtl:md:pr-0 ">
-            <div class="mt-32">
+            <div class="sm:mt-32 ml-5 sm:ml-0">
                 <p class="flex items-center justify-center text-[#FFFFFF] text-sm font-semibold uppercase bg-[#2DA5F3] w-[124px] h-[36px]">who we are</p>
                 <h1 class="text-[#191C1F] md:text-[40px] text-2xl leading-[48px] font-semibold md:w-[536px] mt-3">Kinbo - largest electronics retail shop in the world.</h1>
                 <p class="md:w-[536px] text-[#475156] text-base mt-6">Pellentesque ultrices, dui vel hendrerit iaculis, ipsum velit vestibulum risus, ac tincidunt diam lectus id magna. Praesent maximus lobortis neque sit amet rhoncus. Nullam tempus lectus a dui aliquet, non ultricies nibh elementum. Nulla ac nulla dolor. </p>
@@ -45,7 +45,7 @@ <h1 class="text-[#191C1F] md:text-[40px] text-2xl leading-[48px] font-semibold m
                 </ul>
             </div>
             <div>
-                <img src="../assets/images/aboutUsImg.webp" class="mt-[72px]" alt="About Us">
+                <img src="../assets/images/aboutUsImg.webp" class="sm:mt-[72px]" alt="About Us">
             </div>
         </section>
     <!-- End Content -->
diff --git a/src/blog.html b/src/blog.html
index eb72e94..30d90ec 100644
--- a/src/blog.html
+++ b/src/blog.html
@@ -58,9 +58,9 @@
         <div class="container mx-auto mt-6">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <!-- Card 1 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -74,17 +74,17 @@
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 2 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -98,17 +98,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 3 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -122,17 +122,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 4 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -146,17 +146,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 5 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -170,17 +170,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 6 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -194,17 +194,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 7 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -218,17 +218,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 8 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -242,17 +242,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 9 -->
-                <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                    <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                    <div class="flex items-center gap-2 mt-6">
+                <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                    <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                    <div class="flex items-center gap-2 sm:mt-6 mt-2">
                         <ul class="flex items-center gap-[2px]">
                             <img src="../assets/images/UserCircle.svg" alt="User Circle">
                             <li class="text-[#475156]">Cameron</li>
@@ -266,17 +266,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                             <li class="text-[#475156]">738</li>
                         </ul>
                     </div>
-                    <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                    <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                    <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                    <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                    <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                    <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                         <p class="font-bold">Read More</p>
                         <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                     </a>
                 </div>
                 <!-- Card 10 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -290,17 +290,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 11 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -314,17 +314,17 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
                     </div>
                 <!-- Card 12 -->
-                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] w-[424px] h-[572px] p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
-                        <img src="../assets/images/blog.webp" alt="blog" class="w-[360px] h-[248px]">
-                        <div class="flex items-center gap-2 mt-6">
+                    <div class=" bg-[#FFFFFF] border border-[#E4E7E9] sm:w-[424px] w-[350px] sm:h-[572px] h-auto mx-auto p-8 rounded-[4px]" style="box-shadow: 0px 8px 24px 0px #0000000A;">
+                        <img src="../assets/images/blog.webp" alt="blog" class="sm:w-[360px] w-[350px] h-[248px]">
+                        <div class="flex items-center gap-2 sm:mt-6 mt-2">
                             <ul class="flex items-center gap-[2px]">
                                 <img src="../assets/images/UserCircle.svg" alt="User Circle">
                                 <li class="text-[#475156]">Cameron</li>
@@ -338,9 +338,9 @@ <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam l
                                 <li class="text-[#475156]">738</li>
                             </ul>
                         </div>
-                        <h1 class="text-[#191C1F] text-lg font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
-                        <p class="text-[#77878F] text-lg mt-3">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
-                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] w-[168px] h-[48px] text-[#FA8232] mt-6">
+                        <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mt-2">Curabitur pulvinar aliquam lectus, non blandit erat mattis vitae.</h1>
+                        <p class="text-[#77878F] sm:text-lg text-sm sm:mt-3 mt-1">Mauris scelerisque odio id rutrum volutpat. Pellentesque urna odio, vulputate at tortor vitae, hendrerit blandit lorem.</p>
+                        <a href="#" class="flex items-center justify-center gap-2 rounded-[2px] bg-white border border-[#FA8232] sm:w-[168px] w-[120px] h-[48px] text-[#FA8232] mt-6">
                             <p class="font-bold">Read More</p>
                             <img src="../assets/images/oArrowRight.svg" alt="Arrow Right" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
                         </a>
diff --git a/src/blogDetails.html b/src/blogDetails.html
index da0dbc1..e31ac5b 100644
--- a/src/blogDetails.html
+++ b/src/blogDetails.html
@@ -36,7 +36,7 @@
 
     <!-- Start Blog Details -->
         <div class="container mx-auto">
-            <img src="../assets/images/blogDetails.webp" alt="Blog Details" class="w-[1320px] h-[740px] mt-[72px] mb-12 object-cover">
+            <img src="../assets/images/blogDetails.webp" alt="Blog Details" class="sm:w-[1320px] w-full sm:h-[740px] h-full mt-[72px] mb-12 object-cover">
             <div class="flex items-center gap-4 mt-6 mb-4">
                 <ul class="flex items-center gap-[2px]">
                     <img src="../assets/images/Stack.svg" alt="Stack">
@@ -55,8 +55,8 @@
                     <li class="text-[#475156]">738</li>
                 </ul>
             </div>
-            <h1 class="md:w-[872px] text-[#191C1F] text-[32px] font-semibold mb-6">How artist collective Meow Wolf’s website complements their immersive venues</h1>
-            <div class="flex items-center gap-96 mb-[32px]">
+            <h1 class="md:w-[872px] text-[#191C1F] md:text-[32px] text-lg font-semibold mb-6 px-2 sm:px-0 leading-[40px]">How artist collective Meow Wolf’s website complements their immersive venues</h1>
+            <div class="flex md:flex-row flex-col md:items-center md:gap-96 gap-5 mb-[32px] px-2 sm:px-0">
                 <div class="flex items-center gap-3">
                     <img src="../assets/images/Images.webp" alt="Blog Image" class="w-[40px] h-[40px]">
                     <p class="text-[#191C1F] text-base font-medium">Cameron Williamson</p>
@@ -70,22 +70,22 @@ <h1 class="md:w-[872px] text-[#191C1F] text-[32px] font-semibold mb-6">How artis
                     <img src="../assets/images/copyLink.svg" alt="Link" class="w-[40px] h-[40px] cursor-pointer">
                 </div>
             </div>
-            <p class="text-[#475156] mb-[32px]">Sed a laoreet erat, in vehicula erat. Vivamus a viverra ipsum, ut interdum tellus. Donec quis ex quis metus sodales facilisis ut nec ex. Ut commodo lacus vel odio venenatis, sit amet lacinia lacus cursus. Ut sodales laoreet dapibus. Sed aliquam nisl odio, sed blandit erat placerat sed. Mauris eleifend, magna in convallis congue, orci est fermentum leo, at tincidunt massa ligula semper dolor. Nunc tristique enim in risus tristique rutrum eget ac eros.</p>
+            <p class="text-[#475156] mb-[32px] px-2 sm:px-0">Sed a laoreet erat, in vehicula erat. Vivamus a viverra ipsum, ut interdum tellus. Donec quis ex quis metus sodales facilisis ut nec ex. Ut commodo lacus vel odio venenatis, sit amet lacinia lacus cursus. Ut sodales laoreet dapibus. Sed aliquam nisl odio, sed blandit erat placerat sed. Mauris eleifend, magna in convallis congue, orci est fermentum leo, at tincidunt massa ligula semper dolor. Nunc tristique enim in risus tristique rutrum eget ac eros.</p>
         </div>
-        <div class="w-full h-[164px] bg-[#FFF3EB] ltr:border-l-4 rtl:border-r-4 border-[#FA8232] pl-[40px] pt-[40px]">
-            <div class="container mx-auto flex items-center gap-6">
-                <img src="../assets/images/quotes.svg" class="transform rtl:scale-x-[-1] ltr:scale-x-100" alt="Quotes">
-                <p class="w-[712px] text-[#191C1F]">Vintage meets vogue is the only way to describe this serif typeface. Neue World encompasses the mode high-fashion aesthetic of the 1960s with a commercial take.</p>    
+        <div class="w-full h-[164px] bg-[#FFF3EB] ltr:border-l-4 rtl:border-r-4 border-[#FA8232] md:pl-[40px] pt-[40px]">
+            <div class="container mx-auto flex items-center md:gap-6">
+                <img src="../assets/images/quotes.svg" class="w--14 h-14 transform rtl:scale-x-[-1] ltr:scale-x-100" alt="Quotes">
+                <p class="md:w-[712px] text-[#191C1F] px-4">Vintage meets vogue is the only way to describe this serif typeface. Neue World encompasses the mode high-fashion aesthetic of the 1960s with a commercial take.</p>    
             </div>
         </div>
         <div class="container mx-auto">
-            <p class="text-[#475156] text-base w-[872px] mt-[32px] mb-4">Mauris fermentum faucibus risus a efficitur. Morbi sit amet arcu turpis. Ut nisl velit, mattis at augue vel, molestie egestas justo. Aliquam elementum nibh neque, eu ornare nunc feugiat sed. Aliquam erat volutpat. Praesent vitae orci blandit, semper felis ac, interdum lacus.</p>
-            <p class="text-[#475156] text-base w-[872px] mt-[32px] mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nunc urna, id lobortis elit dapibus et. Etiam ultricies leo justo, nec vehicula augue auctor et. Sed finibus volutpat dui. Nunc vitae urna dictum tellus luctus tincidunt quis feugiat dolor. Aliquam malesuada tristique urna, quis ornare diam venenatis quis. Nunc ligula lectus, posuere sit amet ultrices ut, porttitor efficitur mauris. Aliquam bibendum vitae turpis sed molestie. Donec massa lorem, semper vel pellentesque ut, ultrices in enim. Sed fringilla, mi porttitor sodales vehicula, felis enim gravida nisi, at mollis ante leo et ligula. Quisque non aliquam eros, in aliquet tellus. Mauris ullamcorper quam erat, vehicula rhoncus velit interdum eget.</p>
-            <div class="flex items-center gap-6 mb-[32px]">
+            <p class="text-[#475156] text-base md:w-[872px] px-2 sm:px-0 mt-[32px] mb-4">Mauris fermentum faucibus risus a efficitur. Morbi sit amet arcu turpis. Ut nisl velit, mattis at augue vel, molestie egestas justo. Aliquam elementum nibh neque, eu ornare nunc feugiat sed. Aliquam erat volutpat. Praesent vitae orci blandit, semper felis ac, interdum lacus.</p>
+            <p class="text-[#475156] text-base md:w-[872px] px-2 sm:px-0 mt-[32px] mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nunc urna, id lobortis elit dapibus et. Etiam ultricies leo justo, nec vehicula augue auctor et. Sed finibus volutpat dui. Nunc vitae urna dictum tellus luctus tincidunt quis feugiat dolor. Aliquam malesuada tristique urna, quis ornare diam venenatis quis. Nunc ligula lectus, posuere sit amet ultrices ut, porttitor efficitur mauris. Aliquam bibendum vitae turpis sed molestie. Donec massa lorem, semper vel pellentesque ut, ultrices in enim. Sed fringilla, mi porttitor sodales vehicula, felis enim gravida nisi, at mollis ante leo et ligula. Quisque non aliquam eros, in aliquet tellus. Mauris ullamcorper quam erat, vehicula rhoncus velit interdum eget.</p>
+            <div class="flex md:flex-row flex-col items-center gap-6 mb-[32px]">
                 <img src="../assets/images/blog1.webp" class="w-[424px] h-[424px]" alt="Blog Image">
                 <img src="../assets/images/blog2.webp" class="w-[424px] h-[424px]" alt="Blog Image">
             </div>
-            <p class="text-[#475156] text-base mb-[72px]">Proin pulvinar quam at aliquet sagittis. Quisque laoreet luctus bibendum. Aenean in dignissim orci. Suspendisse at augue eget neque dictum vestibulum eu ac orci. Integer imperdiet lectus nec urna mollis euismod. Proin et risus nulla. Cras at diam in risus feugiat accumsan. Nulla sit amet blandit mi, a convallis mauris. Quisque lacus dolor, cursus ac quam ac, tempus ultrices sem. Ut porttitor.</p>
+            <p class="text-[#475156] text-base mb-[72px] px-2 sm:px-0">Proin pulvinar quam at aliquet sagittis. Quisque laoreet luctus bibendum. Aenean in dignissim orci. Suspendisse at augue eget neque dictum vestibulum eu ac orci. Integer imperdiet lectus nec urna mollis euismod. Proin et risus nulla. Cras at diam in risus feugiat accumsan. Nulla sit amet blandit mi, a convallis mauris. Quisque lacus dolor, cursus ac quam ac, tempus ultrices sem. Ut porttitor.</p>
         </div>
     <!-- End Blog Details -->
 
diff --git a/src/customerSupport.html b/src/customerSupport.html
index 38c00c5..12e2a4e 100644
--- a/src/customerSupport.html
+++ b/src/customerSupport.html
@@ -36,12 +36,12 @@
                 <span class="bg-[#EFD33D] uppercase p-3 rounded-[2px] font-semibold">Help Center</span>
             <h1 class="text-3xl font-semibold mt-5">How we can help you!</h1>
             <div class="relative">
-                <input type="text" placeholder="Enter your question or keyword" class="md:w-[536px] w-full h-[72px] mt-6 px-14 py-2 border border-[#E4E7E9] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232]">
+                <input type="text" placeholder="Enter your question" class="md:w-[536px] w-full h-[72px] mt-6 px-14 py-2 border border-[#E4E7E9] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232]">
                 <div class="absolute inset-y-16 ltr:left-4 rtl:right-4 flex items-center">
                     <img src="../assets/images/MagnifyingGlass.svg" alt="Search">
                 </div>
-                <div class="absolute inset-y-[60px] md:ltr:left-[420px] ltr:left-[260px] rtl:right-[420px] flex items-center">
-                    <a href="#" class="text-white bg-[#FA8232] uppercase w-[108px] h-[48px] flex items-center justify-center rounded-[2px]">Search</a>
+                <div class="absolute inset-y-[60px] md:ltr:left-[420px] ltr:left-[240px] md:rtl:right-[420px] rtl:right-[240px] flex items-center">
+                    <a href="#" class="text-white bg-[#FA8232] uppercase md:w-[108px] w-[80px] h-[48px] flex items-center justify-center rounded-[2px]">Search</a>
                 </div>
                 </div>
             </div>
@@ -54,46 +54,39 @@ <h1 class="text-3xl font-semibold mt-5">How we can help you!</h1>
         <section class="container mx-auto my-[72px] md:p-0 p-5">
             <h1 class="text-[#191C1F] md:text-[32px] text-lg font-semibold flex justify-center">What can we assist you with today?</h1>
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mt-[40px] px-5 md:px-0">
-                <!-- Team Member 1 -->
-                <div class="border border-[#FA8232] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FA8232] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="track">
                     <img src="../assets/images/Truck.svg" alt="Truck">
                     <p class="text-[#191C1F] text-base font-medium">Track Order</p>
                 </div>
         
-                <!-- Team Member 2 -->
-                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="reset">
                     <img src="../assets/images/LockOpen.svg" alt="Reset Password">
                     <p class="text-[#191C1F] text-base font-medium">Reset Password</p>
                 </div>
         
-                <!-- Team Member 3 -->
-                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="payment">
                     <img src="../assets/images/oCreditCard.svg" alt="Credit Card">
                     <p class="text-[#191C1F] text-base font-medium">Payment Option</p>
                 </div>
         
-                <!-- Team Member 4 -->
-                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="user">
                     <img src="../assets/images/User.svg" alt="User">
                     <p class="text-[#191C1F] text-base font-medium">User & Account</p>
                 </div>
         
-                <!-- Team Member 5 -->
-                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="wishlist">
                     <img src="../assets/images/Stack.svg" alt="Wishlist">
                     <p class="text-[#191C1F] text-base font-medium">Wishlist</p>
                 </div>
         
-                <!-- Team Member 6 -->
-                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="shipping">
                     <img src="../assets/images/Notepad.svg" alt="Notepad">
                     <p class="text-[#191C1F] text-base font-medium">Shipping & Billing</p>
                 </div>
         
-                <!-- Team Member 7 -->
-                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer">
+                <div class="border border-[#FFE7D6] rounded-[3px] flex items-center p-6 gap-4 cursor-pointer item" data-item="cart">
                     <img src="../assets/images/oCreditCard.svg" alt="Credit Card">
-                    <p class="text-[#191C1F] text-base font-medium">Shoping Cart</p>
+                    <p class="text-[#191C1F] text-base font-medium">Shopping Cart</p>
                 </div>
             </div>
         </section>
@@ -103,7 +96,7 @@ <h1 class="text-[#191C1F] md:text-[32px] text-lg font-semibold flex justify-cent
     <!-- Popular Topics -->
         <section class="container mx-auto my-[72px]">
             <h1 class="text-[#191C1F] text-[32px] font-semibold flex justify-center">Popular Topics</h1>
-            <div class="flex md:flex-row flex-col items-center justify-center md:gap-44 mt-[40px] gap-10 px-5 md:px-0">
+            <div class="flex md:flex-row flex-col md:items-center justify-center md:gap-44 mt-[40px] gap-10 px-10 md:px-0">
                 <ul class="list-disc">
                     <li class="text-[#191C1F] text-base mb-4">How do I return my item?</li>
                     <li class="text-[#FA8232] text-base mb-4">What is Clicons Returns Policy?</li>
@@ -129,26 +122,26 @@ <h1 class="text-[#191C1F] text-[32px] font-semibold flex justify-center">Popular
                 <span class="uppercase text-white bg-[#2DA5F3] w-[121px] h-[36px] rounded-[2px] flex items-center justify-center">Contact Us</span>
                 <p class="text-[#191C1F] md:text-[32px] text-lg font-semibold text-center mt-4 mb-[40px] leading-[40px]">Don’t find your answer. <br> Contact with us</p>
                 <div class="flex md:flex-row flex-col gap-10">
-                    <!-- Card1 -->
-                    <div class="md:w-[536px] h-[256px] bg-white flex gap-6">
+
+                    <div class="md:w-[536px] h-[256px] bg-white flex gap-6 mx-1 sm:mx-0">
                         <img src="../assets/images/phoneIcon.svg" class="w-24 h-24 mt-8 ltr:ml-8 rtl:mr-8" alt="Phone">
                         <div class="mt-8">
                             <h1 class="text-[#191C1F] font-semibold text-lg">Call us now</h1>
                             <p class="text-[#5F6C72] font-normal text-sm mt-2 mb-4">we are available online from 9:00 AM to 5:00 PM <br> (GMT95:45) Talk with use now</p>
-                            <span class="text-[#191C1F] text-2xl">+1-202-555-0126</span>
+                            <span class="text-[#191C1F] sm:text-2xl text-lg">+1-202-555-0126</span>
                             <a href="#" class="uppercase text-white rounded-[2px] bg-[#2DA5F3] w-[152px] h-[48px] flex items-center justify-center mt-6 gap-2">
                                 call now
                                 <img src="../assets/images/ArrowRight.svg" alt="Arrow Right">
                             </a>
                         </div>
                     </div>
-                    <!-- Card 2 -->
-                    <div class="md:w-[536px] h-[256px] bg-white flex gap-6">
+
+                    <div class="md:w-[536px] h-[256px] bg-white flex gap-6 mx-1 sm:mx-0">
                         <img src="../assets/images/megIcon.svg" class="w-24 h-24 mt-8 ltr:ml-8 rtl:mr-8" alt="Message">
                         <div class="mt-8">
                             <h1 class="text-[#191C1F] font-semibold text-lg">Chat with us</h1>
                             <p class="text-[#5F6C72] font-normal text-sm mt-2 mb-4">we are available online from 9:00 AM to 5:00 PM <br> (GMT95:45) Talk with use now</p>
-                            <span class="text-[#191C1F] text-2xl">Support@clicon.com</span>
+                            <span class="text-[#191C1F] sm:text-2xl text-lg">Support@clicon.com</span>
                             <a href="#" class="uppercase text-white rounded-[2px] bg-[#2DB224] w-[168px] h-[48px] flex items-center justify-center mt-6 gap-2">
                                 Contact Us
                                 <img src="../assets/images/ArrowRight.svg" alt="Arrow Right">
@@ -163,5 +156,21 @@ <h1 class="text-[#191C1F] font-semibold text-lg">Chat with us</h1>
     <!-- Start Footer -->
         <div id="footer"></div>
     <!-- End Footer -->
+
+    <script>
+        const items = document.querySelectorAll('.item');
+    
+        items.forEach(item => {
+            item.addEventListener('click', () => {
+                items.forEach(i => {
+                    i.classList.remove('border-[#FA8232]');
+                    i.classList.add('border-[#FFE7D6]');
+                });
+    
+                item.classList.remove('border-[#FFE7D6]');
+                item.classList.add('border-[#FA8232]');
+            });
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/faqs.html b/src/faqs.html
index 8b298bd..49c2f51 100644
--- a/src/faqs.html
+++ b/src/faqs.html
@@ -42,7 +42,7 @@
     <!-- Start Content -->
         <div class="container flex lg:flex-row flex-col justify-around mx-auto mt-[72px]">
             <div class="p-5 md:p-0">
-                <h1 class="text-[#191C1F] text-[32px] font-semibold mb-[40px]">Frequently Asked Questions </h1>
+                <h1 class="text-[#191C1F] sm:text-[32px] text-2xl font-semibold mb-[40px]">Frequently Asked Questions </h1>
                 <div id="accordion-collapse relative">
                     <!-- Accordion 1 -->
                     <h2 id="accordion-collapse-heading-1" class="mb-5">
@@ -127,15 +127,15 @@ <h2 id="accordion-collapse-heading-5" class="mb-5">
 
                 </div>
             </div>
-            <div class="w-[424px] h-[456px] bg-[#FBF4CE] p-[32px] mx-auto mb-5 md:mb-0">
-                <h1 class="text-[#191C1F] text-lg font-medium mb-3">Don’t find your answer, Ask for support.</h1>
-                <p class="text-[#475156] font-normal text-sm">Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie accumsan dui, non iaculis primis in faucibu raesent eget sem purus.</p>
+            <div class="sm:w-[424px] sm:h-[456px] h-auto bg-[#FBF4CE] sm:p-[32px] p-5 sm:mx-auto m-5 mb-5 md:mb-0">
+                <h1 class="text-[#191C1F] sm:text-lg text-sm font-medium mb-3">Don’t find your answer, Ask for support.</h1>
+                <p class="text-[#475156] font-normal sm:text-sm text-[10px]">Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie accumsan dui, non iaculis primis in faucibu raesent eget sem purus.</p>
                 <input type="email" placeholder="Email Address" class="w-full px-3 py-2 h-[44px] border border-[#F7E99E] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232] mt-4">
                 <input type="text" placeholder="Subject" class="w-full px-3 py-2 h-[44px] border border-[#F7E99E] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232] mt-3">
                 <textarea name="text" placeholder="Message (Optional)" class="w-full px-3 py-2 h-[88px] border border-[#F7E99E] rounded-md focus:outline-none focus:ring-2 focus:ring-[#FA8232] mt-3"></textarea>
                 <button class="w-[191px] bg-[#FA8232] flex items-center justify-center gap-2 text-white py-2 rounded-[2px] h-[48px] font-bold text-sm mt-4">
                     Send message
-                    <img src="../assets/images/ArrowRight.svg" alt="">
+                    <img src="../assets/images/ArrowRight.svg" class="transform rtl:scale-x-[-1] ltr:scale-x-100" alt="Right Arrow">
                 </button>
             </div>
         </div>
diff --git a/src/forgetPass.html b/src/forgetPass.html
index c66be2f..e004634 100644
--- a/src/forgetPass.html
+++ b/src/forgetPass.html
@@ -20,7 +20,7 @@
     <hr>
 
     <!-- Start Form -->
-        <div class="w-full max-w-[424px] bg-white rounded-lg p-8 mt-24 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">   
+        <div class="w-full max-w-[424px] bg-white rounded-lg p-8 sm:mt-24 mt-10 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">   
             <div id="signInForm" class="h-[370px]">
                 <form action="#" class="space-y-4">
                 <div class="flex flex-col items-center justify-center">
diff --git a/src/js/script.js b/src/js/script.js
index 0e796e6..4ab8c05 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -1,13 +1,28 @@
-// Load Navbar
+  // Load Navbar
 document.addEventListener("DOMContentLoaded", function() {
     fetch('offer&nav.html')
         .then(response => response.text())
         .then(data => {
             document.getElementById('navbar').innerHTML = data;
+            initializeSidebar();
         })
         .catch(error => console.log('Error loading the navbar:', error));
 });
 
+function initializeSidebar() {
+    const sidebarToggle = document.getElementById("sidebarToggle");
+    const closeSidebar = document.getElementById("closeSidebar");
+    const sidebar = document.getElementById("sidebar");
+
+    sidebarToggle.addEventListener("click", function () {
+        sidebar.classList.toggle("-translate-x-full");
+    });
+
+    closeSidebar.addEventListener("click", function () {
+        sidebar.classList.add("-translate-x-full");
+    });
+}
+
 // Load Footer
 document.addEventListener("DOMContentLoaded", function() {
     fetch('footer.html')
diff --git a/src/login.html b/src/login.html
index eceabf5..9345f8b 100644
--- a/src/login.html
+++ b/src/login.html
@@ -34,7 +34,7 @@
     <!-- End Location -->
 
     <!-- Start Form -->
-        <div class="w-full max-w-md bg-white rounded-lg p-8 mt-24 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">
+        <div class="w-full max-w-md bg-white rounded-lg p-8 sm:mt-24 mt-10 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">
             <!-- Tab Navigation -->
             <div class="flex border-b mb-4">
                 <button id="signInTab" class="w-1/2 text-center py-2 border-[#FA8232] border-b-2 text-[#191C1F] font-semibold text-[20px]" onclick="showSignIn()">Sign In</button>
diff --git a/src/offer&nav.html b/src/offer&nav.html
index 18ebccc..8913e28 100644
--- a/src/offer&nav.html
+++ b/src/offer&nav.html
@@ -152,106 +152,115 @@ <h2 class=" text-[#a4a4a4] text-sm font-norma text-start">cart</h2>
       </div>
 
       <!--  blue-bar -->
+<button id="sidebarToggle" class="absolute top-4 left-4 z-50 p-2  text-white rounded-lg md:hidden">
+  <i class="fa-solid fa-bars text-2xl"></i>
+</button>
+
+<div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-white text-black transform -translate-x-full transition-transform duration-300 ease-in-out md:hidden z-50">
+  <button id="closeSidebar" class="absolute top-4 ltr:right-4 rtl:left-0 text-2xl">&times;</button>
+  <ul class="p-4">
+    <li class="py-2 border-b border-gray-200">التوريدات والجملة</li>
+    <li class="py-2 border-b border-gray-200">كل المنتجات</li>
+    <li class="py-2 border-b border-gray-200">مواد لاسقه</li>
+    <li class="py-2 border-b border-gray-200">التوريدات والجملة</li>
+    <li class="py-2 border-b border-gray-200">التوريدات والجملة</li>
+    <li class="py-2 border-b border-gray-200">التوريدات والجملة</li>
+    <li class="py-2 border-b border-gray-200">التوريدات والجملة</li>
+    <li class="py-2 border-b border-gray-200">معطر</li>
+    <li class="py-2 border-b border-gray-200">مواد لاسقه</li>
+    <li class="py-2 border-b border-gray-200">كل المنتجات</li>
+  </ul>
+</div>
 
-      <div class="px-[150px] w-full bg-[#017cc5] flex justify-center items-center">
-        <ul x-data="{isOpen = false}" class="flex flex-row p-1 justify-between w-full">
+<div class="hidden md:flex px-40 w-full bg-[#017cc5] justify-center items-center">
+  <ul class="flex flex-row p-1 justify-between w-full">
+    <li class="flex justify-end items-center ">
+      <div class="w-3.5 h-5 text-[#333333] text-sm ">
+        <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+      </div>
+      <span class=" text-[#f2f2f7] text-sm"
+      aria-label="التوريدات والجملة">كل المنتجات
+  </span>
+    </li>
 
-          <li x-show="isOpen" @click="isOpen=!isOpen" :class="z-15" class="flex justify-end items-center">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">التوريدات والجملة
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">كل المنتجات
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">مواد لاسفه
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">التوريدات والجملة
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">التوريدات والجملة
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">التوريدات والجملة
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">التوريدات والجملة
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">معطر
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة">مواد لاسقه
-              </span>
-          </li>
-
-          <li class="flex justify-end items-center ">
-            <div class="w-3.5 h-5 text-[#333333] text-sm ">
-              <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
-            </div>
-            <span class=" text-[#f2f2f7] text-sm"
-                  aria-label="التوريدات والجملة"> كل المنتجات
-              </span>
-          </li>
+        <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">مواد لاسفه
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">التوريدات والجملة
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">التوريدات والجملة
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">التوريدات والجملة
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">التوريدات والجملة
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">معطر
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة">مواد لاسقه
+          </span>
+      </li>
+
+      <li class="flex justify-end items-center ">
+        <div class="w-3.5 h-5 text-[#333333] text-sm ">
+          <i class="fa-solid fa-angle-down text-white text-xs  font-thin transform"></i>
+        </div>
+        <span class=" text-[#f2f2f7] text-sm"
+              aria-label="التوريدات والجملة"> كل المنتجات
+          </span>
+    </li>
 
-        </ul>
+  </ul>
 
-      </div>
+</div>
 
 
     </nav>
-
+  
 </body>
 </html>
\ No newline at end of file
diff --git a/src/orderDetails.html b/src/orderDetails.html
index 026a9af..116459a 100644
--- a/src/orderDetails.html
+++ b/src/orderDetails.html
@@ -91,10 +91,38 @@
                             <h2 class="text-[#191C1F] flex items-center gap-2 font-medium text-sm uppercase">
                                 <img src="../assets/images/ArrowLeftB.svg" alt="Arrow">
                                 Order Details</h2>
-                            <a href="#" class="flex items-center gap-2 text-[#FA8232] text-sm font-semibold">
-                                Leave a Rating
-                                <img src="../assets/images/OPlus.svg" alt="Plus">
-                            </a>
+                                <a href="#" id="ratingTrigger" class="flex items-center gap-2 text-[#FA8232] text-sm font-semibold">
+                                    Leave a Rating
+                                    <img src="../assets/images/OPlus.svg" alt="Plus">
+                                </a>
+
+                                <div id="ratingModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 hidden">
+                                    <div class="bg-white rounded-lg p-6 w-96 relative w-[472px] h-[420px]">
+                                        <i id="closeModal" class="fa-solid fa-x cursor-pointer absolute top-4 right-4 text-gray-500 text-xl"></i>
+                                        <h2 class="font-medium text-[#191C1F] mb-2 uppercase">Billing address</h2>
+                                        <hr>
+                                
+                                        <p class="mt-2 text-sm font-normal text-[#191C1F]">Rating</p>
+                                        <div class="mt-2">
+                                            <select class="w-full h-10 bg-white border border-gray-300 text-sm rounded px-2 py-1">
+                                                <option class="text-[#475156]" selected>&#11088;&#11088;&#11088;&#11088;&#11088; 5 Star Rating</option>
+                                                <option class="text-[#475156]">&#11088;&#11088;&#11088;&#11088;&#9734; 4 Star Rating</option>
+                                                <option class="text-[#475156]">&#11088;&#11088;&#11088;&#9734;&#9734; 3 Star Rating</option>
+                                                <option class="text-[#475156]">&#11088;&#11088;&#9734;&#9734;&#9734; 2 Star Rating</option>
+                                                <option class="text-[#475156]">&#11088;&#9734;&#9734;&#9734;&#9734; 1 Star Rating</option>
+                                            </select>
+                                            
+                                        </div>
+                                
+                                        <p class="mt-4 text-sm font-normal text-[#191C1F]">Feedback</p>
+                                        <textarea placeholder="Write down your feedback about our product & services" class="w-full h-[152px] mt-2 p-3 border border-gray-300 rounded text-sm text-gray-500"></textarea>
+                                
+                                        <div class="mt-4">
+                                            <button class="w-[205px] h-[56px] px-4 py-2 bg-[#FA8232] text-white font-medium rounded">Publish Review</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                
                         </div>
                         <div class="w-[936px] h-[104px] bg-[#FDFAE7] border border-[#F7E99E] m-6">
                             <div class="pl-6 py-6 flex items-center justify-between">
@@ -208,6 +236,65 @@ <h1 class="pt-6 pl-[32px] text-[#191C1F] font-medium text-lg">Order Activity</h1
                                 </li>
                             </ul>
                         </div>
+                        <hr>
+                        
+                        <div>
+                            <h1 class="pt-6 pl-[32px] text-[#191C1F] font-medium text-lg">Product <span class="text-[#5F6C72]"> (02) </span></h1>
+                            <div class="overflow-x-auto pt-[20px]">
+                                <table class="w-full table-auto">
+                                <thead>
+                                    <tr class="bg-gray-200">
+                                    <th class="text-left p-3 text-[#475156] text-sm font-medium">PRODUCTS</th>
+                                    <th class="text-left p-3 text-[#475156] text-sm font-medium">PRICE</th>
+                                    <th class="text-left p-3 text-[#475156] text-sm font-medium">QUANTITY</th>
+                                    <th class="text-left p-3 text-[#475156] text-sm font-medium">SUB-TOTAL</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr class="border-b">
+                                    <td class="p-3 flex gap-2">
+                                        <img src="../assets/images/mobileImage.webp" alt="Mobile">
+                                        <div>
+                                        <span class="text-[#2DA5F3] font-semibold">SMARTPHONE</span><br>
+                                        <p class="text-[#191C1F] w-[306px]">Google Pixel 6 Pro - 5G Android Phone - Unlocked Smartphone with Advanced Pixel C...</p>
+                                        </div>
+                                    </td>
+                                    <td class="p-3 text-[#475156]">$899</td>
+                                    <td class="p-3 text-[#475156]">x1</td>
+                                    <td class="p-3 text-[#191C1F] font-medium">$899</td>
+                                    </tr>
+                                    <tr class="border-b">
+                                    <td class="p-3 flex gap-2">
+                                        <img src="../assets/images/mobileImage2.webp" alt="Mobile">
+                                        <div>
+                                            <span class="text-[#2DA5F3] font-semibold">ACCESSORIES</span><br>
+                                            <p class="text-[#191C1F] w-[306px]">Tech21 Evo Clear for Google Pixel 6 Pro - Crystal Clear Phone Case with 12ft Multi-Dr...</p>    
+                                        </div>
+                                    </td>
+                                    <td class="p-3 text-[#475156]">$39</td>
+                                    <td class="p-3 text-[#475156]">x1</td>
+                                    <td class="p-3 text-[#191C1F] font-medium">$39</td>
+                                    </tr>
+                                </tbody>
+                                </table>
+                            </div>
+                        
+                            <div class="flex gap-8 mt-8 mb-[32px]">
+                            <!-- Shipping Address -->
+                            <div class="ml-12">
+                                <h2 class="font-medium text-[#191C1F] mb-6 text-lg">Shipping Address</h2>
+                                <p class="text-[#191C1F] text-base font-medium">Kevin Gilbert</p>
+                                <p class="w-[280px] text-[#5F6C72] mb-3">East Tejturi Bazar, Word No. 04, Road No. 13/x, House no. 1320/C, Flat No. 5D, Dhaka - 1200, Bangladesh</p>
+                                <p class="text-[#191C1F] mb-3">Phone Number: <span class="text-[#5F6C72]">+1-202-555-0118</span></p>
+                                <p class="text-[#191C1F]">Email: <span class="text-[#5F6C72]"> kevin.gilbert@gmail.com</span></p>
+                            </div>
+                        
+                            <div >
+                                <h2 class="font-medium text-[#191C1F] mb-6">Order Notes</h2>
+                                <p class="text-[#5F6C72] w-[280px]"> Donec ac vehicula turpis. Aenean sagittis est eu arcu ornare, eget venenatis purus lobortis. Aliquam erat volutpat. Aliquam magna odio. </p>
+                            </div>
+                            </div>
+                        </div>
 
                     </div>
                 </div>
@@ -218,5 +305,27 @@ <h1 class="pt-6 pl-[32px] text-[#191C1F] font-medium text-lg">Order Activity</h1
     <!-- Start Footer -->
         <div id="footer"></div>
     <!-- End Footer --> 
+
+    <script>
+        const ratingTrigger = document.getElementById('ratingTrigger');
+        const ratingModal = document.getElementById('ratingModal');
+        const closeModal = document.getElementById('closeModal');
+
+        ratingTrigger.addEventListener('click', (e) => {
+            e.preventDefault(); 
+            ratingModal.classList.remove('hidden');
+        });
+
+        closeModal.addEventListener('click', () => {
+            ratingModal.classList.add('hidden'); 
+        });
+
+        window.addEventListener('click', (e) => {
+            if (e.target === ratingModal) {
+                ratingModal.classList.add('hidden');
+            }
+        });
+
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/resetPass.html b/src/resetPass.html
index 8bb1166..6e3ee2f 100644
--- a/src/resetPass.html
+++ b/src/resetPass.html
@@ -20,7 +20,7 @@
     <hr>
 
     <!-- Start Form -->
-        <div class="w-full max-w-[424px] bg-white rounded-lg p-8 mt-24 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">   
+        <div class="w-full max-w-[424px] bg-white rounded-lg p-8 sm:mt-24 mt-10 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">   
             <div id="signInForm" class="h-[350px]">
                 <form action="#" class="space-y-4">
                 <div class="flex flex-col items-center justify-center">
diff --git a/src/signUp.html b/src/signUp.html
index 8bee4d5..f06f857 100644
--- a/src/signUp.html
+++ b/src/signUp.html
@@ -34,7 +34,7 @@
     <!-- End Location -->
 
     <!-- Start Form -->
-        <div class="w-full max-w-md bg-white rounded-lg p-8 mt-24 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">
+        <div class="w-full max-w-md bg-white rounded-lg p-8 sm:mt-24 mt-10 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">
             <!-- Tab Navigation -->
             <div class="flex border-b mb-4">
                 <button id="signInTab" class="w-1/2 text-center py-2 text-[#191C1F] font-semibold text-[20px]" onclick="showSignIn()">Sign In</button>
diff --git a/src/verification.html b/src/verification.html
index 6e695a3..15c03f5 100644
--- a/src/verification.html
+++ b/src/verification.html
@@ -20,7 +20,7 @@
     <hr>
 
     <!-- Start Form -->
-        <div class="w-full max-w-[424px] bg-white rounded-lg p-8 mt-24 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">   
+        <div class="w-full max-w-[424px] bg-white rounded-lg p-8 sm:mt-24 mt-10 mb-24 mx-auto" style="box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);">   
             <div id="signInForm" class="h-auto">
                 <form action="#" class="space-y-4">
                 <div class="flex flex-col items-center justify-center">

PRODUCTS	PRICE	QUANTITY	SUB-TOTAL
+ + + SMARTPHONE + Google Pixel 6 Pro - 5G Android Phone - Unlocked Smartphone with Advanced Pixel C... + +	$899	x1	$899
+ + + ACCESSORIES + Tech21 Evo Clear for Google Pixel 6 Pro - Crystal Clear Phone Case with 12ft Multi-Dr... + +	$39	x1	$39