diff --git a/css/style.css b/css/style.css
index 098ea9c..fbd6bb9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -8,16 +8,6 @@
   background-color: #ec672a !important;
     color: #fff;
 }
-/* .cryto-ideas-cards{
-  background-color: white;
-} */
-/* .dark-mode .cryto-ideas-cards{
-  background-color: #212121;
-  color: white;
-} */
-/* .dark-mode .benefits-containers{
-  background-color: #212121;
-} */
 .active-category{
   background-color: white !important;
   border: 1px solid black !important;
@@ -58,6 +48,7 @@ header{
 }
 .stndrd-btn{
   background-color: #ec672a !important;
+  color: white !important;
 }
 .reports-card-txt-container{
   height: 150px !important;
@@ -73,3 +64,7 @@ header{
   border: none !important;
   outline:  none !important;
 }
+.price-container{
+  border-color: #ec672a !important;
+
+}
diff --git a/index.html b/index.html
index b36652a..6a4481c 100644
--- a/index.html
+++ b/index.html
@@ -794,7 +794,7 @@ <h2 class="text-2xl font-bold md:text-3xl md:leading-tight dark:text-white">Disc
 
           
           <div class="space-x-4">
-            <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+            <a class="inline-flex theme-color gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
             href="#">BlackRabbit.com</a>
             <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
               <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
@@ -820,7 +820,7 @@ <h2 class="text-2xl font-bold md:text-3xl md:leading-tight dark:text-white">Disc
           </div>
         </div>
 
-        <div class="flex justify-between items-center">
+        <!-- <div class="flex justify-between items-center">
             <div class="space-x-4 text-sm ms-4">
               
                 <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
@@ -830,7 +830,7 @@ <h2 class="text-2xl font-bold md:text-3xl md:leading-tight dark:text-white">Disc
                 <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                   href="#">Status</a>
               </div>
-        </div>
+        </div> -->
         <!-- End Col -->
       </div>
     </div>
diff --git a/js/article.html b/js/article.html
index 8f206ce..150a66c 100644
--- a/js/article.html
+++ b/js/article.html
@@ -17,15 +17,15 @@
 <header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-3 sm:py-0 dark:bg-slate-900">
   <nav class="relative max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global">
     <div class="flex items-center justify-between">
-      <a class="flex-none text-xl font-semibold dark:text-white" href="/index.html" aria-label="Brand">Black Rabbit</a>
-      <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:hidden block hs-dark-mode group flex items-center text-gray-600 hover:text-blue-600 font-medium dark:text-gray-400 dark:hover:text-gray-500" data-hs-theme-click-value="dark">
+      <a class="flex-none text-xl font-semibold theme-color" href="/" aria-label="Brand">Black Rabbit</a>
+      <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:hidden block hs-dark-mode group flex items-center text-gray-600  font-medium dark:text-gray-400" data-hs-theme-click-value="dark">
         <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
       </button>
-      <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:block hidden hs-dark-mode group flex items-center text-gray-600 hover:text-blue-600 font-medium dark:text-gray-400 dark:hover:text-gray-500" data-hs-theme-click-value="light">
+      <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:block hidden hs-dark-mode group flex items-center text-gray-600  font-medium dark:text-gray-400" data-hs-theme-click-value="light">
         <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 8a2 2 0 1 0 4 4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
       </button>
       <div class="sm:hidden">
-        <button type="button" class="hs-collapse-toggle w-9 h-9 flex justify-center items-center text-sm font-semibold rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
+        <button type="button" class="hs-collapse-toggle w-9 h-9 flex justify-center items-center text-sm font-semibold rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-white" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
           <svg class="hs-collapse-open:hidden flex-shrink-0 w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
             <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
           </svg>
@@ -47,11 +47,11 @@
     </div>
     <div class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
       <div class="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> 
-      <a class="flex items-center gap-x-2 mr-4 font-semibold text-gray-500 hover:text-blue-600 sm:border-s sm:border-gray-300 sm:my-6 sm:ps-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500" href="#">
+      <a class="flex items-center gap-x-2 mr-4 font-semibold text-gray-500 hover:text-orange-600 sm:border-s sm:border-gray-300 sm:my-6 sm:ps-6 dark:border-gray-700 dark:text-gray-400 dark:hover:theme-color" href="#">
         <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
         Log in
       </a>
-      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
+      <button type="button" class="py-2 px-3 stndrd-btn inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-red-600 text-white  disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1">
         Join Now
       </button>
     </div>
@@ -143,14 +143,14 @@
                 </div>
     
                 <!-- Button Group -->
-                <div>
+                <!-- <div>
                   <button type="button" class="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                     <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                       <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
                     </svg>
                     Tweet
                   </button>
-                </div>
+                </div> -->
                 <!-- End Button Group -->
               </div>
             </div>
@@ -161,7 +161,7 @@
         <!-- Content -->
         <div class="space-y-5 md:space-y-8">
           <div class="space-y-3">
-            <h2 class="text-2xl font-bold md:text-3xl dark:text-white">Announcing a free plan for small teams</h2>
+            <h2 class="text-2xl font-bold md:text-3xl dark:text-white theme-color">Announcing a free plan for small teams</h2>
     
             <p class="text-lg text-gray dark:text-gray">At preline, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow.</p>
           </div>
@@ -170,14 +170,14 @@ <h2 class="text-2xl font-bold md:text-3xl dark:text-white">Announcing a free pla
     
           <figure>
             <img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
-            <figcaption class="mt-3 text-sm text-center text-gray-500">
+            <!-- <figcaption class="mt-3 text-sm text-center text-gray-500">
               A woman sitting at a table.
-            </figcaption>
+            </figcaption> -->
           </figure>
     
           <p class="text-lg text-gray dark:text-gray">As we've grown, we've seen how Preline has helped companies such as Spotify, Microsoft, Airbnb, Facebook, and Intercom bring their designers closer together to create amazing things. We've also learned that when the culture of sharing is brought in earlier, the better teams adapt and communicate with one another.</p>
     
-          <p class="text-lg text-gray dark:text-gray">That's why we are excited to share that we now have a <a class="text-blue-600 decoration-2 hover:underline font-medium" href="#">free version of Preline</a>, which will allow individual designers, startups and other small teams a chance to create a culture of openness early on.</p>
+          <p class="text-lg text-gray dark:text-gray">That's why we are excited to share that we now have a <a class="theme-color decoration-2 hover:underline font-medium" href="#">free version of Preline</a>, which will allow individual designers, startups and other small teams a chance to create a culture of openness early on.</p>
     
           <blockquote class="text-center p-4 sm:px-7">
             <p class="text-xl font-medium text-gray md:text-2xl md:leading-normal xl:text-2xl xl:leading-normal dark:text-gray">
@@ -202,8 +202,8 @@ <h3 class="text-2xl font-semibold dark:text-white">Bringing the culture of shari
           </div>
     
           <ul class="list-disc list-outside space-y-5 ps-5 text-lg text-gray dark:text-gray">
-            <li class="ps-2">Preline allows us to collaborate in real time and is a really great way for leadership on the team to stay up-to-date with what everybody is working on," <a class="text-blue-600 decoration-2 hover:underline font-medium" href="#">said</a> Stewart Scott-Curran, Intercom's Director of Brand Design.</li>
-            <li class="ps-2">Preline opened a new way of sharing. It's a persistent way for everyone to see and absorb each other's work," said David Scott, Creative Director at <a class="text-blue-600 decoration-2 hover:underline font-medium" href="#">Eventbrite</a>.</li>
+            <li class="ps-2">Preline allows us to collaborate in real time and is a really great way for leadership on the team to stay up-to-date with what everybody is working on," <a class="theme-color decoration-2 hover:underline font-medium" href="#">said</a> Stewart Scott-Curran, Intercom's Director of Brand Design.</li>
+            <li class="ps-2">Preline opened a new way of sharing. It's a persistent way for everyone to see and absorb each other's work," said David Scott, Creative Director at <a class="theme-color decoration-2 hover:underline font-medium" href="#">Eventbrite</a>.</li>
           </ul>
     
           <p class="text-lg text-gray dark:text-gray">Small teams and individual designers need a space where they can watch the design process unfold, both for themselves and for the people they work with – no matter if it's a fellow designer, product manager, developer or client. Preline allows you to invite more people into the process, creating a central place for conversation around design. As those teams grow, transparency and collaboration becomes integrated in how they communicate and work together.</p>
@@ -232,73 +232,50 @@ <h3 class="text-2xl font-semibold dark:text-white">Bringing the culture of shari
 <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
   <!-- Title -->
   <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
-    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
-    <p class="mt-1 text-gray-600 dark:text-gray-400">Whatever your status, our offers evolve according to your needs.</p>
+    <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white theme-color">Pricing</h2>
+    <p class="mt-1 text-gray dark:text-white">Whatever your status, our offers evolve according to your needs.</p>
   </div>
   <!-- End Title -->
 
-  <!-- Switch -->
-  <div class="flex justify-center items-center">
-    <label class="min-w-[3.5rem] text-sm text-gray-500 me-3 dark:text-gray-400">Monthly</label>
-
-    <input type="checkbox" id="hs-basic-with-description" class="relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600
-
-    before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-white before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-white" checked>
-
-    <label class="relative min-w-[3.5rem] text-sm text-gray-500 ms-3 dark:text-gray-400">
-      Annual
-      <span class="absolute -top-10 start-auto -end-28">
-        <span class="flex items-center">
-          <svg class="w-14 h-8 -me-6" width="45" height="25" viewBox="0 0 45 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M43.2951 3.47877C43.8357 3.59191 44.3656 3.24541 44.4788 2.70484C44.5919 2.16427 44.2454 1.63433 43.7049 1.52119L43.2951 3.47877ZM4.63031 24.4936C4.90293 24.9739 5.51329 25.1423 5.99361 24.8697L13.8208 20.4272C14.3011 20.1546 14.4695 19.5443 14.1969 19.0639C13.9242 18.5836 13.3139 18.4152 12.8336 18.6879L5.87608 22.6367L1.92723 15.6792C1.65462 15.1989 1.04426 15.0305 0.563943 15.3031C0.0836291 15.5757 -0.0847477 16.1861 0.187863 16.6664L4.63031 24.4936ZM43.7049 1.52119C32.7389 -0.77401 23.9595 0.99522 17.3905 5.28788C10.8356 9.57127 6.58742 16.2977 4.53601 23.7341L6.46399 24.2659C8.41258 17.2023 12.4144 10.9287 18.4845 6.96211C24.5405 3.00476 32.7611 1.27399 43.2951 3.47877L43.7049 1.52119Z" fill="currentColor" class="fill-gray-300 dark:fill-gray-700"/>
-          </svg>
-          <span class="mt-3 inline-block whitespace-nowrap text-[11px] leading-5 font-semibold tracking-wide uppercase bg-blue-600 text-white rounded-full py-1 px-2.5">Save up to 10%</span>
-        </span>
-      </span>
-    </label>
-  </div>
-  <!-- End Switch -->
-
   <!-- Grid -->
   <div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
     <!-- Card -->
-    <div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
+    <div class="flex flex-col border border-orange-200 price-container text-center rounded-xl p-8 dark:border-orange-700 ">
       <h4 class="font-medium text-lg text-gray dark:text-gray">Free</h4>
       <span class="mt-7 font-bold text-5xl text-gray dark:text-gray">Free</span>
       <p class="mt-2 text-sm text-gray-500">Forever free</p>
-
       <ul class="mt-7 space-y-2.5 text-sm">
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             1 user
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Plan features
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Product support
           </span>
         </li>
       </ul>
 
-      <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
-        Sign up
+      <a class="mt-5 py-3 px-4 inline-flex justify-center stndrd-btn items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
+        Sign up2
       </a>
     </div>
     <!-- End Card -->
 
     <!-- Card -->
-    <div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-700">
-      <p class="mb-3"><span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-lg text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-600 dark:text-white">Most popular</span></p>
+    <div class="flex flex-col border-2 border-blue-600 price-container text-center shadow-xl rounded-xl p-8 dark:border-blue-700">
+      <p class="mb-3"><span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-lg text-xs uppercase font-semibold bg-blue-100 text-white stndrd-btn dark:bg-blue-600 dark:text-white">Most popular</span></p>
       <h4 class="font-medium text-lg text-gray dark:text-gray">Startup</h4>
       <span class="mt-5 font-bold text-5xl text-gray dark:text-gray">
         <span class="font-bold text-2xl -me-2">$</span>
@@ -308,35 +285,35 @@ <h4 class="font-medium text-lg text-gray dark:text-gray">Startup</h4>
 
       <ul class="mt-7 space-y-2.5 text-sm">
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             2 users
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Plan features
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Product support
           </span>
         </li>
       </ul>
 
-      <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="https://github.com/htmlstreamofficial/preline/tree/main/examples/html">
+      <a class="mt-5 py-3 px-4 inline-flex justify-center items-center stndrd-btn gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="https://github.com/htmlstreamofficial/preline/tree/main/examples/html">
         Sign up
       </a>
     </div>
     <!-- End Card -->
 
     <!-- Card -->
-    <div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
+    <div class="flex flex-col border border-gray-200 price-container text-center rounded-xl p-8 dark:border-gray-700">
       <h4 class="font-medium text-lg text-gray dark:text-gray">Team</h4>
       <span class="mt-5 font-bold text-5xl text-gray dark:text-gray">
         <span class="font-bold text-2xl -me-2">$</span>
@@ -346,35 +323,35 @@ <h4 class="font-medium text-lg text-gray dark:text-gray">Team</h4>
 
       <ul class="mt-7 space-y-2.5 text-sm">
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             5 users
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Plan features
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Product support
           </span>
         </li>
       </ul>
 
-      <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
+      <a class="mt-5 py-3 px-4 inline-flex justify-center stndrd-btn items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
         Sign up
       </a>
     </div>
     <!-- End Card -->
 
     <!-- Card -->
-    <div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
+    <div class="flex flex-col border border-gray-200 price-container text-center rounded-xl p-8 dark:border-gray-700">
       <h4 class="font-medium text-lg text-gray dark:text-gray">Enterprise</h4>
       <span class="mt-5 font-bold text-5xl text-gray dark:text-gray">
         <span class="font-bold text-2xl -me-2">$</span>
@@ -384,28 +361,28 @@ <h4 class="font-medium text-lg text-gray dark:text-gray">Enterprise</h4>
 
       <ul class="mt-7 space-y-2.5 text-sm">
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             10 users
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Plan features
           </span>
         </li>
 
         <li class="flex space-x-2">
-          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="flex-shrink-0 mt-0.5 h-4 w-4 theme-color dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="text-gray dark:text-gray-400">
             Product support
           </span>
         </li>
       </ul>
 
-      <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
+      <a class="mt-5 py-3 px-4 inline-flex justify-center stndrd-btn items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
         Sign up
       </a>
     </div>
@@ -414,56 +391,56 @@ <h4 class="font-medium text-lg text-gray dark:text-gray">Enterprise</h4>
   <!-- End Grid -->
 
 </div>
-  <footer class="w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
+<footer class="w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
  
-    <div class="pt-5 mt-5 border-t border-gray-200 dark:border-gray-700">
-      <div class="sm:flex sm:justify-between sm:items-center">
-        <div class="flex items-center gap-x-3">
-          <!-- End Language Dropdown -->
+  <div class="pt-5 mt-5 border-t border-gray-200 dark:border-gray-700">
+    <div class="sm:flex sm:justify-between sm:items-center">
+      <div class="flex items-center gap-x-3">
+        <!-- End Language Dropdown -->
 
-          
-          <div class="space-x-4">
-            <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray dark:text-gray-400 dark:hover:text-gray dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-            href="#">BlackRabbit.com</a>
-            <a class="inline-block text-gray-500 hover:text-gray dark:hover:text-gray" href="#">
-              <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                fill="currentColor" viewBox="0 0 16 16">
-                <path
-                  d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
-              </svg>
-            </a>
-            <a class="inline-block text-gray-500 hover:text-gray dark:hover:text-gray" href="#">
-              <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                fill="currentColor" viewBox="0 0 16 16">
-                <path
-                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-              </svg>
-            </a>
-            <a class="inline-block text-gray-500 hover:text-gray dark:hover:text-gray" href="#">
-              <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                fill="currentColor" viewBox="0 0 16 16">
-                <path
-                  d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
-              </svg>
-            </a>
-          </div>
+        
+        <div class="space-x-4">
+          <a class="inline-flex theme-color gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+          href="#">BlackRabbit.com</a>
+          <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
+            <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+              fill="currentColor" viewBox="0 0 16 16">
+              <path
+                d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
+            </svg>
+          </a>
+          <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
+            <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+              fill="currentColor" viewBox="0 0 16 16">
+              <path
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+          </a>
+          <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
+            <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+              fill="currentColor" viewBox="0 0 16 16">
+              <path
+                d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
+            </svg>
+          </a>
         </div>
-
-        <div class="flex justify-between items-center">
-            <div class="space-x-4 text-sm ms-4">
-              
-                <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray dark:text-gray-400 dark:hover:text-gray dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-                  href="#">Terms</a>
-                <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray dark:text-gray-400 dark:hover:text-gray dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-                  href="#">Privacy</a>
-                <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray dark:text-gray-400 dark:hover:text-gray dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-                  href="#">Status</a>
-              </div>
-        </div>
-        <!-- End Col -->
       </div>
+
+      <!-- <div class="flex justify-between items-center">
+          <div class="space-x-4 text-sm ms-4">
+            
+              <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                href="#">Terms</a>
+              <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                href="#">Privacy</a>
+              <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                href="#">Status</a>
+            </div>
+      </div> -->
+      <!-- End Col -->
     </div>
-  </footer>
+  </div>
+</footer>
   </div>
 </body>
   <script src="./script.js">
diff --git a/js/blogs.html b/js/blogs.html
index 0c9e0be..2e22cab 100644
--- a/js/blogs.html
+++ b/js/blogs.html
@@ -17,15 +17,15 @@
   <header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-3 sm:py-0 dark:bg-slate-900">
     <nav class="relative max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global">
       <div class="flex items-center justify-between">
-        <a class="flex-none text-xl font-semibold dark:text-white" href="/index.html" aria-label="Black Rabbit">Black Rabbit</a>
-        <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:hidden block hs-dark-mode group flex items-center text-gray-600 hover:text-blue-600 font-medium dark:text-gray-400 dark:hover:text-gray-500" data-hs-theme-click-value="dark">
+        <a class="flex-none text-xl font-semibold theme-color" href="/" aria-label="Brand">Black Rabbit</a>
+        <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:hidden block hs-dark-mode group flex items-center text-gray-600  font-medium dark:text-gray-400" data-hs-theme-click-value="dark">
           <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
         </button>
-        <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:block hidden hs-dark-mode group flex items-center text-gray-600 hover:text-blue-600 font-medium dark:text-gray-400 dark:hover:text-gray-500" data-hs-theme-click-value="light">
+        <button id="themeToggle" type="button" class="ml-4 hs-dark-mode-active:block hidden hs-dark-mode group flex items-center text-gray-600  font-medium dark:text-gray-400" data-hs-theme-click-value="light">
           <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 8a2 2 0 1 0 4 4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
         </button>
         <div class="sm:hidden">
-          <button type="button" class="hs-collapse-toggle w-9 h-9 flex justify-center items-center text-sm font-semibold rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
+          <button type="button" class="hs-collapse-toggle w-9 h-9 flex justify-center items-center text-sm font-semibold rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-white" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
             <svg class="hs-collapse-open:hidden flex-shrink-0 w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
               <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
             </svg>
@@ -47,11 +47,11 @@
       </div>
       <div class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
         <div class="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> 
-        <a class="flex items-center gap-x-2 mr-4 font-semibold text-gray-500 hover:text-blue-600 sm:border-s sm:border-gray-300 sm:my-6 sm:ps-6 dark:border-gray-700 dark:text-gray-400 dark:hover:text-blue-500" href="#">
+        <a class="flex items-center gap-x-2 mr-4 font-semibold text-gray-500 hover:text-orange-600 sm:border-s sm:border-gray-300 sm:my-6 sm:ps-6 dark:border-gray-700 dark:text-gray-400 dark:hover:theme-color" href="#">
           <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
           Log in
         </a>
-        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
+        <button type="button" class="py-2 px-3 stndrd-btn inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-red-600 text-white  disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1">
           Join Now
         </button>
       </div>
@@ -97,11 +97,11 @@
     <!-- Title -->
     <div class="max-w-full mx-auto text-center mb-10 lg:mb-14 flex flex-row items-center justify-between">
       <div class="w-50">
-        <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white text-left">The Blog</h2>
-        <p class="mt-1 text-gray-600 dark:text-gray-400 text-left">See how game-changing companies are making the most
+        <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white text-left theme-color">The Blog</h2>
+        <p class="mt-1 text-gray dark:text-white text-left">See how game-changing companies are making the most
           of every engagement with Preline.</p>
       </div>
-      <div class="w-full flex justify-end">
+      <div class="w-50 flex justify-end">
         <input class="border-gray-700 outline-none rounded-md p-2 shadow-md" type="text" name="" id=""
           placeholder="Search...." style="border: 0.5px solid gray; width: 300px;">
       </div>
@@ -111,7 +111,7 @@ <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white text-
     <!-- Grid -->
     <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
       <!-- Card -->
-      <a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+      <a class="group flex flex-col h-full border border-orange-600 hover:border-orange-800 hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
         href="/js/article.html">
         <div class="aspect-w-16 aspect-h-11">
           <img class="w-full object-cover rounded-xl"
@@ -119,7 +119,7 @@ <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white text-
             alt="Image Description">
         </div>
         <div class="my-6">
-          <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text-white">
+          <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text-white theme-color">
             Announcing a free plan for small teams
           </h3>
           <p class="mt-5 text-gray dark:text-gray-400">
@@ -131,14 +131,14 @@ <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text
             src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
             alt="Image Description">
           <div>
-            <h5 class="text-sm text-gray-800 dark:text-gray-800">By Lauren Waller</h5>
+            <h5 class="text-sm text-gray-800 dark:text-gray-800 theme-color">By Lauren Waller</h5>
           </div>
         </div>
       </a>
       <!-- End Card -->
 
       <!-- Card -->
-      <a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+      <a class="group flex flex-col h-full border border-orange-600 hover:border-orange-800 hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
         href="/js/article.html">
         <div class="aspect-w-16 aspect-h-11">
           <img class="w-full object-cover rounded-xl"
@@ -146,7 +146,7 @@ <h5 class="text-sm text-gray-800 dark:text-gray-800">By Lauren Waller</h5>
             alt="Image Description">
         </div>
         <div class="my-6">
-          <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text-white">
+          <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text-white theme-color">
             How Google Assistant now helps you record stories for kids
           </h3>
           <p class="mt-5 text-gray dark:text-white">
@@ -158,14 +158,14 @@ <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text
             src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
             alt="Image Description">
           <div>
-            <h5 class="text-sm text-gray dark:text-gray-800">By Aaron Larsson</h5>
+            <h5 class="text-sm text-gray dark:text-gray-800 theme-color">By Aaron Larsson</h5>
           </div>
         </div>
       </a>
       <!-- End Card -->
 
       <!-- Card -->
-      <a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+      <a class="group flex flex-col h-full border border-orange-600 hover:border-orange-800 hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
         href="/js/article.html">
         <div class="aspect-w-16 aspect-h-11">
           <img class="w-full object-cover rounded-xl"
@@ -173,7 +173,7 @@ <h5 class="text-sm text-gray dark:text-gray-800">By Aaron Larsson</h5>
             alt="Image Description">
         </div>
         <div class="my-6">
-          <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text-white">
+          <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text-white theme-color">
             Front accounts - let's work together
           </h3>
           <p class="mt-5 text-gray dark:text-gray-400">
@@ -185,7 +185,7 @@ <h3 class="text-xl font-semibold text-gray dark:text-white dark:group-hover:text
             src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
             alt="Image Description">
           <div>
-            <h5 class="text-sm text-gray dark:text-gray-800">By Lauren Waller</h5>
+            <h5 class="text-sm text-gray dark:text-gray-800 theme-color">By Lauren Waller</h5>
           </div>
         </div>
       </a>
@@ -195,7 +195,7 @@ <h5 class="text-sm text-gray dark:text-gray-800">By Lauren Waller</h5>
 
     <!-- Card -->
     <div class="mt-12 text-center">
-      <a class="py-3 px-4 inline-flex items-center gap-x-1 text-sm font-medium rounded-full border border-gray-200 bg-white text-blue-600 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-blue-500 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+      <a class="py-3 px-4 inline-flex stndrd-btn price-container items-center gap-x-1 text-sm font-medium rounded-full border border-gray-200 bg-white text-blue-600 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-blue-500 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
         href="#">
         Read more
         <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
@@ -209,31 +209,31 @@ <h5 class="text-sm text-gray dark:text-gray-800">By Lauren Waller</h5>
   <!-- End Card Blog -->
 
   <footer class="w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
-
+ 
     <div class="pt-5 mt-5 border-t border-gray-200 dark:border-gray-700">
       <div class="sm:flex sm:justify-between sm:items-center">
         <div class="flex items-center gap-x-3">
           <!-- End Language Dropdown -->
 
-
+          
           <div class="space-x-4">
-            <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-              href="#">BlackRabbit.com</a>
-            <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-800" href="#">
+            <a class="inline-flex theme-color gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+            href="#">BlackRabbit.com</a>
+            <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
               <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" viewBox="0 0 16 16">
                 <path
                   d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
               </svg>
             </a>
-            <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-800" href="#">
+            <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
               <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" viewBox="0 0 16 16">
                 <path
                   d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
               </svg>
             </a>
-            <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-800" href="#">
+            <a class="inline-block text-gray-500 hover:text-gray-800 dark:hover:text-gray-200" href="#">
               <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 fill="currentColor" viewBox="0 0 16 16">
                 <path
@@ -243,17 +243,17 @@ <h5 class="text-sm text-gray dark:text-gray-800">By Lauren Waller</h5>
           </div>
         </div>
 
-        <div class="flex justify-between items-center">
-          <div class="space-x-4 text-sm ms-4">
-
-            <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-              href="#">Terms</a>
-            <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-              href="#">Privacy</a>
-            <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-              href="#">Status</a>
-          </div>
-        </div>
+        <!-- <div class="flex justify-between items-center">
+            <div class="space-x-4 text-sm ms-4">
+              
+                <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  href="#">Terms</a>
+                <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  href="#">Privacy</a>
+                <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  href="#">Status</a>
+              </div>
+        </div> -->
         <!-- End Col -->
       </div>
     </div>