diff --git a/public/assets/adobstock-example.webp b/public/assets/adobstock-example.webp
new file mode 100644
index 0000000..e2bd66e
Binary files /dev/null and b/public/assets/adobstock-example.webp differ
diff --git a/src/app/(main)/slick-about-dark/AboutDropdown.tsx b/src/app/(main)/slick-about-dark/AboutDropdown.tsx
new file mode 100644
index 0000000..46f7854
--- /dev/null
+++ b/src/app/(main)/slick-about-dark/AboutDropdown.tsx
@@ -0,0 +1,54 @@
+"use client";
+import React, { useState, useRef } from "react";
+import Link from "next/link";
+
+export default function AboutDropdown() {
+  // State to manage dropdown visibility
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const dropdownRef = useRef(null);
+
+  // Toggle dropdown visibility
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  return (
+    <li className="relative group">
+      <a
+        href="#"
+        className="mn-has-sub opacity-1 text-black hover:text-purple-700 font-semibold px-4 py-2 flex items-center"
+        onClick={(e) => {
+          e.preventDefault();
+          toggleDropdown();
+        }}
+      >
+        About <i className="ml-1 mi-chevron-down" />
+      </a>
+
+      {/* Dropdown menu with sliding effect */}
+      <ul
+        className={`absolute left-0 mt-2 w-56 bg-white shadow-lg rounded-md border border-gray-300 transition-all duration-300 ${
+          isDropdownOpen ? "opacity-100 visible scale-100" : "opacity-0 invisible scale-95"
+        }`}
+        ref={dropdownRef}
+      >
+        <li className="group relative">
+          <Link href="/oncology-center" className="block px-4 py-2 text-purple-700 hover:bg-gray-200">
+            Our Oncology Center
+          </Link>
+        </li>
+        <li className="group relative">
+          <Link href="/staff" className="block px-4 py-2 text-black hover:bg-gray-200">
+            Our Staff
+          </Link>
+        </li>
+        <li className="group relative">
+          <Link href="/announcements" className="block px-4 py-2 text-black hover:bg-gray-200">
+            Announcements
+          </Link>
+        </li>
+      </ul>
+    </li>
+  );
+}
diff --git a/src/app/(main)/slick-about-dark/page.tsx b/src/app/(main)/slick-about-dark/page.tsx
index 6b6c2ab..8f2a5e5 100644
--- a/src/app/(main)/slick-about-dark/page.tsx
+++ b/src/app/(main)/slick-about-dark/page.tsx
@@ -6,10 +6,8 @@ import Image from "next/image";
 import Link from "next/link";
 
 export const metadata = {
-  title:
-    "Slick About Dark || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
-  description:
-    "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  title: "Slick About Dark || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
 };
 const dark = true;
 export default function SlickAboutPageDark() {
@@ -21,201 +19,69 @@ export default function SlickAboutPageDark() {
       >
         {/* <!-- Background Shape --> */}
         <div className="bg-shape-1 opacity-003">
-          <Image
-            src="/assets/images/demo-fancy/bg-shape-1.svg"
-            width={1443}
-            height={844}
-            alt=""
-          />
+          <Image src="/assets/adobstock-example.webp" width={1443} height={844} alt="" />
         </div>
         {/* <!-- End Background Shape --> */}
 
         <div className="container position-relative pt-sm-40 text-center">
           <div className="row">
             <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-              <h1 className="hs-title-10 mb-10 wow fadeInUp">About Studio</h1>
+              <h1 className="hs-title-10 mb-10 wow fadeInUp">Our Oncology Center</h1>
 
-              <p
-                className="section-descr mb-0 wow fadeInUp"
-                data-wow-delay="0.2s"
-              >
+              {/* <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
                 Crafting immersive digital journeys for brands.
-              </p>
+              </p> */}
             </div>
           </div>
         </div>
       </section>
+      {/* <section className="page-section bg-white"> */}
+      <section className="page-section text-center bg-white py16 scrollSpysection" id="about">
+        <div className="container position-relative text-center">
+          <div className="row">
+            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+              <h2 className="section-title mb-20">Our Commitment to Excellence</h2>
+              <p className="text-gray">
+                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
+                offer a multidisciplinary approach to cancer care with multiple physicians who work together to guide
+                each patient through diagnosis, treatment, and recovery. Our services cover radiation, chemotherapy,
+                immunotherapy, hematology, and infusion services.
+              </p>
+
+              <p className="text-gray">
+                Cochise Oncology’s professional staff works hard to ensure a positive experience throughout the entire
+                course of treatment. While we are best known for our leading-edge cancer therapies, we take particular
+                pride in compassion and dedication to our doctors and entire staff. Excellence in patient care on every
+                level is our commitment.
+              </p>
+
+              <p className="text-gray">
+                Here at Cochise Oncology, we offer the most up-to-date technology in cancer treatment that rivals the
+                largest and most prestigious centers in the country.
+              </p>
+
+              <p className="text-gray">We go the extra mile to address the needs of our patients.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <section
-        className={`page-section scrollSpysection  ${
-          dark ? "bg-dark-1 light-content" : ""
-        } `}
+        className={`page-section text-white text-center py16 scrollSpysection  ${dark ? "bg-dark-1  light-content" : "bg-light-alpha-90"}  bg-scroll`}
         id="about"
       >
-        <div className="container position-relative">
-          <div className="row">
-            {/* Section Text */}
-            <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
-              <div className="w-100 wow fadeInUp">
-                <h2 className="section-caption-slick mb-30 mb-sm-20">
-                  Our Story
-                </h2>
-                <h3 className="section-title mb-30">
-                  We believe in creatives with a&nbsp;passion to smart design.
-                </h3>
-                <p className="text-gray mb-40">
-                  Etiam fermentum vehicula faucibus. Praesent ullamcorper urna
-                  id arcu molestie scelerisque. Sed imperdiet tristique mauris
-                  et faucibus. Maecenas semper augue non fringilla placerat.
-                  Curabitur luctus erat sit amet ultricies aliquam. Donec dictum
-                  convallis mauris et maximus. Nullam massa arcu, porta quis
-                  felis et, eleifend varius quam.
-                </p>
-                {/* Features List */}
-                <div className="row features-list mt-n20 mb-50 mb-sm-30">
-                  {/* Features List Item */}
-                  {features4.map((feature, index) => (
-                    <div
-                      key={index}
-                      className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
-                    >
-                      <div className="features-list-icon">
-                        <i className="mi-check" />
-                      </div>
-                      <div className="features-list-text">{feature.text}</div>
-                    </div>
-                  ))}
-                  {/* End Features List Item */}
-                </div>
-                {/* End Features List */}
-                <div className="local-scroll wch-unset">
-                  <Link
-                    href={`/slick-contact${dark ? "-dark" : ""}`}
-                    className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
-                  >
-                    <span>Start a project</span>
-                  </Link>
-
-                  <Link
-                    href={`/slick-about${dark ? "-dark" : ""}`}
-                    className="link-hover-anim ms-2 ms-sm-5 me-2"
-                    data-link-animate="y"
-                  >
-                    <span className="link-strong link-strong-unhovered">
-                      Learn more{" "}
-                      <i
-                        className="mi-arrow-right size-24"
-                        aria-hidden="true"
-                      ></i>
-                    </span>
-                    <span
-                      className="link-strong link-strong-hovered"
-                      aria-hidden="true"
-                    >
-                      Learn more{" "}
-                      <i
-                        className="mi-arrow-right size-24"
-                        aria-hidden="true"
-                      ></i>
-                    </span>
-                  </Link>
-                </div>
-              </div>
-            </div>
-            {/* End Section Text */}
-            {/* Image */}
-            <div className="col-lg-6 d-flex align-items-center">
-              <div className="w-100 pe-lg-5">
-                <div className="composition-5">
-                  <div className="composition-5-decoration opacity-065">
-                    <Image
-                      src="/assets/images/demo-slick/decoration-1.svg"
-                      alt=""
-                      width={228}
-                      height={228}
-                    />
-                  </div>
-                  <div className="composition-5-image-1">
-                    <div className="composition-5-image-1-inner">
-                      <Image
-                        src="/assets/images/demo-slick/hs-image-3.jpg"
-                        alt="Image Description"
-                        width={850}
-                        height={914}
-                        className="wow scaleOutIn"
-                        data-wow-offset={200}
-                      />
-                    </div>
-                  </div>
-                  <div className="composition-5-image-2">
-                    <div className="composition-5-image-2-inner">
-                      <Image
-                        src="/assets/images/demo-slick/hs-image-4.jpg"
-                        alt="Image Description"
-                        width={400}
-                        height={400}
-                        className="wow scaleOutIn"
-                        data-wow-offset={0}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {/* End Images */}
-          </div>
-        </div>
-      </section>
-      <section
-        className={`page-section ${
-          dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"
-        }  bg-scroll`}
-        style={{
-          backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
-        }}
-      >
-        <Facts />
-      </section>
-      <section
-        className={`page-section  ${dark ? "bg-dark-1 light-content" : ""} `}
-      >
-        {dark ? <TestimonialsDark /> : <Testimonials />}
-      </section>
-      <section className="page-section pt-0">
-        <div className="container">
-          <div
-            className={`small-section ${
-              dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
-            }  ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
-          >
-            {/* Decoration Circles */}
-            <div className="decoration-12" />
-            <div className="decoration-13" />
-            {/* End Decoration Circles */}
-            <div className="row">
-              <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
-                <div className="row">
-                  <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
-                    <h2 className="section-title-small mb-20">
-                      Like our creative works?
-                    </h2>
-                    <p className="text-gray mb-0">
-                      Quisque posuere mollis ullamcorper. Ut eget metus lorem
-                      ipsum posuere eget at ex. Aenean consequat vitae lorem in
-                      vehicula.
-                    </p>
-                  </div>
-                  <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
-                    <Link
-                      href={`/slick-portfolio${dark ? "-dark" : ""}`}
-                      className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
-                    >
-                      <span>View all works</span>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+        <div className="container mx-auto px-6">
+          <h2 className="text-3xl font-bold mb-4">Begin your path to healing with Cochise Oncology</h2>
+          <p className="text-lg mb-6">
+            Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer
+            personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step
+            towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs,
+            answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our
+            compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.
+          </p>
+          <a href="#" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
+            Get Started →
+          </a>
         </div>
       </section>
     </>
diff --git a/src/app/(main)/slick-about-dark/page1.tsx b/src/app/(main)/slick-about-dark/page1.tsx
new file mode 100644
index 0000000..228e151
--- /dev/null
+++ b/src/app/(main)/slick-about-dark/page1.tsx
@@ -0,0 +1,226 @@
+import Facts from "@/components/Facts";
+import Testimonials from "@/components/Testimonials";
+import TestimonialsDark from "@/components/TestimonialsDark";
+import { features4 } from "@/data/features";
+import Image from "next/image";
+import Link from "next/link";
+
+export const metadata = {
+  title: "Slick About Dark || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+  description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
+};
+const dark = true;
+export default function SlickAboutPageDark() {
+  return (
+    <>
+      <section
+        className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
+        id="home"
+      >
+        {/* <!-- Background Shape --> */}
+        <div className="bg-shape-1 opacity-003">
+          <Image src="/assets/adobstock-example.webp" width={1443} height={844} alt="" />
+        </div>
+        {/* <!-- End Background Shape --> */}
+
+        <div className="container position-relative pt-sm-40 text-center">
+          <div className="row">
+            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+              <h1 className="hs-title-10 mb-10 wow fadeInUp">Our Oncology Center</h1>
+
+              {/* <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
+                Crafting immersive digital journeys for brands.
+              </p> */}
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* <section className="page-section bg-white"> */}
+      <section className="page-section text-center bg-white py16 scrollSpysection" id="about">
+        <div className="container position-relative text-center">
+          <div className="row">
+            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
+              <h2 className="section-title mb-20">Our Commitment to Excellence</h2>
+              <p className="text-gray">
+                Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We
+                offer a multidisciplinary approach to cancer care with multiple physicians who work together to guide
+                each patient through diagnosis, treatment, and recovery. Our services cover radiation, chemotherapy,
+                immunotherapy, hematology, and infusion services.
+              </p>
+
+              <p className="text-gray">
+                Cochise Oncology’s professional staff works hard to ensure a positive experience throughout the entire
+                course of treatment. While we are best known for our leading-edge cancer therapies, we take particular
+                pride in compassion and dedication to our doctors and entire staff. Excellence in patient care on every
+                level is our commitment.
+              </p>
+
+              <p className="text-gray">
+                Here at Cochise Oncology, we offer the most up-to-date technology in cancer treatment that rivals the
+                largest and most prestigious centers in the country.
+              </p>
+
+              <p className="text-gray">We go the extra mile to address the needs of our patients.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section
+        className={`page-section text-white text-center py16 scrollSpysection  ${dark ? "bg-dark-1  light-content" : "bg-light-alpha-90"}  bg-scroll`}
+        id="about"
+      >
+        <div className="container mx-auto px-6">
+          <h2 className="text-3xl font-bold mb-4">Begin your path to healing with Cochise Oncology</h2>
+          <p className="text-lg mb-6">
+            Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We offer
+            personalized cancer care using innovative treatments in our state-of-the-art facility. Take the first step
+            towards comprehensive, patient-focused treatment by scheduling a consultation. Let us listen to your needs,
+            answer your questions, and create a tailored plan for your journey. Fill out our form to connect with our
+            compassionate experts and discover how Cochise Oncology can stand with you in your fight against cancer.
+          </p>
+          <a href="#" className="bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg text-lg">
+            Get Started →
+          </a>
+        </div>
+      </section>
+
+      <section className={`page-section scrollSpysection  ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
+        <div className="container position-relative">
+          <div className="row">
+            {/* Section Text */}
+            <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
+              <div className="w-100 wow fadeInUp">
+                <h2 className="section-caption-slick mb-30 mb-sm-20">Our Story</h2>
+                <h3 className="section-title mb-30">We believe in creatives with a&nbsp;passion to smart design.</h3>
+                <p className="text-gray mb-40">
+                  Etiam fermentum vehicula faucibus. Praesent ullamcorper urna id arcu molestie scelerisque. Sed
+                  imperdiet tristique mauris et faucibus. Maecenas semper augue non fringilla placerat. Curabitur luctus
+                  erat sit amet ultricies aliquam. Donec dictum convallis mauris et maximus. Nullam massa arcu, porta
+                  quis felis et, eleifend varius quam.
+                </p>
+                {/* Features List */}
+                <div className="row features-list mt-n20 mb-50 mb-sm-30">
+                  {/* Features List Item */}
+                  {features4.map((feature, index) => (
+                    <div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
+                      <div className="features-list-icon">
+                        <i className="mi-check" />
+                      </div>
+                      <div className="features-list-text">{feature.text}</div>
+                    </div>
+                  ))}
+                  {/* End Features List Item */}
+                </div>
+                {/* End Features List */}
+                <div className="local-scroll wch-unset">
+                  <Link
+                    href={`/slick-contact${dark ? "-dark" : ""}`}
+                    className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
+                  >
+                    <span>Start a project</span>
+                  </Link>
+
+                  <Link
+                    href={`/slick-about${dark ? "-dark" : ""}`}
+                    className="link-hover-anim ms-2 ms-sm-5 me-2"
+                    data-link-animate="y"
+                  >
+                    <span className="link-strong link-strong-unhovered">
+                      Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
+                    </span>
+                    <span className="link-strong link-strong-hovered" aria-hidden="true">
+                      Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
+                    </span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            {/* End Section Text */}
+            {/* Image */}
+            <div className="col-lg-6 d-flex align-items-center">
+              <div className="w-100 pe-lg-5">
+                <div className="composition-5">
+                  <div className="composition-5-decoration opacity-065">
+                    <Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
+                  </div>
+                  <div className="composition-5-image-1">
+                    <div className="composition-5-image-1-inner">
+                      <Image
+                        src="/assets/images/demo-slick/hs-image-3.jpg"
+                        alt="Image Description"
+                        width={850}
+                        height={914}
+                        className="wow scaleOutIn"
+                        data-wow-offset={200}
+                      />
+                    </div>
+                  </div>
+                  <div className="composition-5-image-2">
+                    <div className="composition-5-image-2-inner">
+                      <Image
+                        src="/assets/images/demo-slick/hs-image-4.jpg"
+                        alt="Image Description"
+                        width={400}
+                        height={400}
+                        className="wow scaleOutIn"
+                        data-wow-offset={0}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* End Images */}
+          </div>
+        </div>
+      </section>
+      <section
+        className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"}  bg-scroll`}
+        style={{
+          backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
+        }}
+      >
+        <Facts />
+      </section>
+      <section className={`page-section  ${dark ? "bg-dark-1 light-content" : ""} `}>
+        {dark ? <TestimonialsDark /> : <Testimonials />}
+      </section>
+      <section className="page-section pt-0">
+        <div className="container">
+          <div
+            className={`small-section ${
+              dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
+            }  ps-4 ps-lg-0 pe-4 pe-lg-0 round position-relative overflow-hidden`}
+          >
+            {/* Decoration Circles */}
+            <div className="decoration-12" />
+            <div className="decoration-13" />
+            {/* End Decoration Circles */}
+            <div className="row">
+              <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
+                <div className="row">
+                  <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
+                    <h2 className="section-title-small mb-20">Like our creative works?</h2>
+                    <p className="text-gray mb-0">
+                      Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
+                      vitae lorem in vehicula.
+                    </p>
+                  </div>
+                  <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">
+                    <Link
+                      href={`/slick-portfolio${dark ? "-dark" : ""}`}
+                      className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
+                    >
+                      <span>View all works</span>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 6b717ad..d335ed0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -19,3 +19,11 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.bg-gradient {
+  background: linear-gradient(135deg, #6ec2b6, #90d4c9);
+  position: relative;
+  border-bottom-left-radius: 50% 10%;
+  border-bottom-right-radius: 50% 10%;
+  padding: 60px 0;
+}