diff --git a/src/frontend/src/components/client/home page/ServiceListRow.tsx b/src/frontend/src/components/client/home page/ServiceListRow.tsx
index 8b935c2a..5bb63cfb 100644
--- a/src/frontend/src/components/client/home page/ServiceListRow.tsx	
+++ b/src/frontend/src/components/client/home page/ServiceListRow.tsx	
@@ -222,7 +222,7 @@ const ServicesList: React.FC<ServicesListProps> = ({ className = "" }) => {
           />
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pb-10">
           {servicesWithData.map(({ service, serviceData }) => (
             <div key={service.id}>
               <ServiceListItem service={service} serviceData={serviceData} />
diff --git a/src/frontend/src/components/provider/add service/ServiceDetails.tsx b/src/frontend/src/components/provider/add service/ServiceDetails.tsx
index e9db7f22..315645d0 100644
--- a/src/frontend/src/components/provider/add service/ServiceDetails.tsx	
+++ b/src/frontend/src/components/provider/add service/ServiceDetails.tsx	
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { TrashIcon, PlusCircleIcon } from "@heroicons/react/24/solid";
 import { ServiceCategory } from "../../../services/serviceCanisterService";
+import { ResponsiveSelect } from "../../ui/ResponsiveDropdown";
 
 // Validation errors interface
 interface ValidationErrors {
@@ -145,11 +146,6 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({
     handleChange(e);
   };
 
-  const handleCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setHideCategoryError(true);
-    handleChange(e);
-  };
-
   // Check if selected category requires client proof images
   const requiresProofKeywords = [
     "repair",
@@ -267,35 +263,28 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({
                 >
                   Select Category
                 </label>
-                <select
+                <ResponsiveSelect
                   name="categoryId"
                   id="categoryId"
                   value={formData.categoryId}
-                  onChange={handleCategoryChange}
-                  required
-                  ref={categoryRef}
-                  className={`block w-full rounded-xl border px-4 py-3 shadow-sm transition-all focus:ring-2 focus:ring-yellow-400 sm:text-sm ${
-                    validationErrors.categoryId && !hideCategoryError
-                      ? "border-red-300 bg-red-50 focus:border-red-500"
-                      : "border-gray-200 bg-gray-50 focus:border-yellow-400"
-                  }`}
-                >
-                  <option value="" disabled>
-                    Select a category
-                  </option>
-                  {loadingCategories ? (
-                    <option disabled>Loading categories...</option>
-                  ) : (
-                    categories
-                      .filter((cat) => !cat.parentId)
-                      .map((cat) => (
-                        <option key={cat.id} value={cat.id}>
-                          {cat.name}
-                        </option>
-                      ))
-                  )}
-                  {/* 'Other' custom category removed */}
-                </select>
+                  onChange={(value) => {
+                    const event = {
+                      target: {
+                        name: "categoryId",
+                        value: value,
+                      },
+                    } as React.ChangeEvent<HTMLSelectElement>;
+                    handleChange(event);
+                    setHideCategoryError(true);
+                  }}
+                  options={categories
+                    .filter((cat) => !cat.parentId)
+                    .map((cat) => ({ value: cat.id, label: cat.name }))}
+                  placeholder="Select a category"
+                  error={!!(validationErrors.categoryId && !hideCategoryError)}
+                  loading={loadingCategories}
+                  required={true}
+                />
                 {categoryRequiresProof && (
                   <div className="mt-2 flex items-start gap-2 rounded-lg bg-blue-50 p-3 text-sm text-blue-700">
                     <svg
diff --git a/src/frontend/src/components/provider/add service/ServiceLocation.tsx b/src/frontend/src/components/provider/add service/ServiceLocation.tsx
index 119080ae..af9f6b03 100644
--- a/src/frontend/src/components/provider/add service/ServiceLocation.tsx	
+++ b/src/frontend/src/components/provider/add service/ServiceLocation.tsx	
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { MapPinIcon } from "@heroicons/react/24/solid";
+import { ResponsiveSelect } from "../../ui/ResponsiveDropdown";
 import phLocations from "../../../data/ph_locations.json"; // Adjust path as needed
 import { useLocationStore } from "../../../store/locationStore";
 
@@ -68,8 +69,7 @@ const ServiceLocation: React.FC<ServiceLocationProps> = ({
   const [manualCityOptions, setManualCityOptions] = useState<string[]>([]);
 
   // Handle province dropdown change
-  const handleProvinceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const province = e.target.value;
+  const handleProvinceChange = (province: string) => {
     setManualProvince(province);
     setManualCity("");
     setFormData((prev: any) => ({
@@ -92,8 +92,7 @@ const ServiceLocation: React.FC<ServiceLocationProps> = ({
   };
 
   // Handle city dropdown change
-  const handleCityChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const city = e.target.value;
+  const handleCityChange = (city: string) => {
     setManualCity(city);
     setFormData((prev: any) => ({
       ...prev,
@@ -414,38 +413,38 @@ const ServiceLocation: React.FC<ServiceLocationProps> = ({
                 Province
                 <span className="ml-1 text-red-500">*</span>
               </label>
-              <select
-                className="rounded-md border border-blue-300 px-3 py-2"
+              <ResponsiveSelect
+                name="locationProvince"
+                id="locationProvince"
                 value={manualProvince}
                 onChange={handleProvinceChange}
-              >
-                <option value="">Select Province</option>
-                {phLocations &&
-                  Array.isArray(phLocations.provinces) &&
-                  phLocations.provinces.map((prov: any) => (
-                    <option key={prov.name} value={prov.name}>
-                      {prov.name}
-                    </option>
-                  ))}
-              </select>
+                options={
+                  phLocations && Array.isArray(phLocations.provinces)
+                    ? phLocations.provinces.map((prov: any) => ({
+                        value: prov.name,
+                        label: prov.name,
+                      }))
+                    : []
+                }
+                placeholder="Select Province"
+              />
 
               <label className="text-sm font-medium text-blue-700">
                 City / Municipality
                 <span className="ml-1 text-red-500">*</span>
               </label>
-              <select
-                className="rounded-md border border-blue-300 px-3 py-2"
+              <ResponsiveSelect
+                name="locationMunicipalityCity"
+                id="locationMunicipalityCity"
                 value={manualCity}
                 onChange={handleCityChange}
+                options={manualCityOptions.map((city) => ({
+                  value: city,
+                  label: city,
+                }))}
+                placeholder="Select City / Municipality"
                 disabled={!manualProvince}
-              >
-                <option value="">Select City / Municipality</option>
-                {manualCityOptions.map((city) => (
-                  <option key={city} value={city}>
-                    {city}
-                  </option>
-                ))}
-              </select>
+              />
             </div>
           </div>
         )}
diff --git a/src/frontend/src/components/ui/ResponsiveDropdown.tsx b/src/frontend/src/components/ui/ResponsiveDropdown.tsx
new file mode 100644
index 00000000..5dfb8452
--- /dev/null
+++ b/src/frontend/src/components/ui/ResponsiveDropdown.tsx
@@ -0,0 +1,193 @@
+import { useState, useRef, useEffect, Fragment, ReactNode } from "react";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
+
+interface ResponsiveDropdownProps {
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  position?: "left" | "right";
+  width?: string;
+}
+
+export function ResponsiveDropdown({
+  triggerRef,
+  isOpen,
+  onClose,
+  children,
+  position = "left",
+  width = "w-full",
+}: ResponsiveDropdownProps) {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [flipUp, setFlipUp] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const threshold = 250;
+
+      if (spaceBelow < threshold && spaceAbove > spaceBelow) {
+        setFlipUp(true);
+      } else {
+        setFlipUp(false);
+      }
+    }
+  }, [isOpen, triggerRef]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose, triggerRef]);
+
+  return (
+    <Fragment>
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className={`absolute z-50 ${width} ${
+            flipUp
+              ? "bottom-full mb-2"
+              : "mt-2"
+          } ${
+            position === "right" ? "right-0" : "left-0"
+          } rounded-xl border border-gray-100 bg-white py-1 shadow-lg focus:outline-none`}
+        >
+          {children}
+        </div>
+      )}
+    </Fragment>
+  );
+}
+
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface ResponsiveSelectProps {
+  name: string;
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  required?: boolean;
+}
+
+export function ResponsiveSelect({
+  name,
+  id,
+  value,
+  onChange,
+  options,
+  placeholder = "Select an option",
+  error = false,
+  disabled = false,
+  loading = false,
+  required = false,
+}: ResponsiveSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  const handleSelect = (optionValue: string) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className="relative" onKeyDown={handleKeyDown}>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        name={name}
+        disabled={disabled || loading}
+        onClick={() => !disabled && !loading && setIsOpen(!isOpen)}
+        className={`flex w-full items-center justify-between rounded-xl border px-4 py-3 text-left text-sm shadow-sm transition-all focus:ring-2 focus:ring-yellow-400 ${
+          error
+            ? "border-red-300 bg-red-50 text-red-700 focus:border-red-500"
+            : "border-gray-200 bg-gray-50 text-gray-900 focus:border-yellow-400"
+        } ${disabled || loading ? "cursor-not-allowed opacity-60" : ""}`}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+      >
+        {loading ? (
+          <span className="text-gray-500">Loading...</span>
+        ) : selectedOption ? (
+          <span>{selectedOption.label}</span>
+        ) : (
+          <span className="text-gray-500">{placeholder}</span>
+        )}
+        <ChevronDownIcon
+          className={`ml-2 h-5 w-5 text-gray-400 transition-transform ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      <ResponsiveDropdown
+        triggerRef={triggerRef}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        width="w-full"
+        position="left"
+      >
+        {options.length === 0 ? (
+          <div className="px-4 py-3 text-sm text-gray-500">
+            No options available
+          </div>
+        ) : (
+          options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => handleSelect(option.value)}
+              className={`flex w-full items-center px-4 py-3 text-left text-sm transition-colors hover:bg-gray-50 ${
+                value === option.value
+                  ? "bg-yellow-50 text-yellow-700 font-medium"
+                  : "text-gray-700"
+              }`}
+              role="option"
+              aria-selected={value === option.value}
+            >
+              {option.label}
+            </button>
+          ))
+        )}
+      </ResponsiveDropdown>
+
+      {required && (
+        <input type="hidden" name={name} value={value} required />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/frontend/src/pages/client/book/[id].tsx b/src/frontend/src/pages/client/book/[id].tsx
index e7a04af5..9c345140 100644
--- a/src/frontend/src/pages/client/book/[id].tsx
+++ b/src/frontend/src/pages/client/book/[id].tsx
@@ -1585,7 +1585,7 @@ const BookingPage: React.FC = () => {
               </div>
             </header>
 
-            <div className="flex-grow pb-28 pt-16 md:pt-0">
+            <div className="flex-grow pb-10 pt-16 md:pt-0">
               <div className="mx-auto max-w-5xl px-2 py-8 md:px-8">
                 <div className="md:flex md:gap-x-8">
                   {/* Left Column Skeleton */}
@@ -1787,7 +1787,7 @@ const BookingPage: React.FC = () => {
             </div>
           </header>
 
-          <div className="flex-grow pb-28 pt-16 md:pt-0" ref={pageContainerRef}>
+          <div className="flex-grow pb-10 pt-16 md:pt-0" ref={pageContainerRef}>
             <div className="mx-auto max-w-5xl px-2 py-8 md:px-8">
               <div className="md:flex md:gap-x-8">
                 {/* Left column (Desktop): Packages → Schedule → Location */}
diff --git a/src/frontend/src/pages/client/booking/confirmation.tsx b/src/frontend/src/pages/client/booking/confirmation.tsx
index 2a22bb68..52eade58 100644
--- a/src/frontend/src/pages/client/booking/confirmation.tsx
+++ b/src/frontend/src/pages/client/booking/confirmation.tsx
@@ -70,6 +70,7 @@ const BookingConfirmationPage: React.FC = () => {
   const location = useLocation();
   const bookingDetails: BookingDetails | null = location.state?.details || null;
   useEffect(() => {
+    window.scrollTo(0, 0);
     document.title = "Booking Confirmed - SRV Client";
   }, []);
   useNoBackNavigation("/client/booking");
diff --git a/src/frontend/src/pages/client/home.tsx b/src/frontend/src/pages/client/home.tsx
index 9034af10..a907d2c7 100644
--- a/src/frontend/src/pages/client/home.tsx
+++ b/src/frontend/src/pages/client/home.tsx
@@ -72,7 +72,7 @@ const ClientHomePage: React.FC = () => {
       )}
       {/* SECTION: Main content */}
 
-      <div className="w-full max-w-full px-4 pb-16 pt-4">
+      <div className="w-full max-w-full px-4 pt-4">
         {/* SECTION: Header */}
         <ClientHeader className="mb-6 w-full max-w-full" />
         {/* SECTION: Categories */}
@@ -87,7 +87,7 @@ const ClientHomePage: React.FC = () => {
       </div>
       {/* SECTION: Provider CTA */}
       <div className="flex w-full flex-col items-center justify-center">
-        <div className="mx-auto flex w-full max-w-md flex-col items-center rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+        <div className="mx-auto flex w-[90%] md:w-full max-w-md flex-col items-center rounded-2xl border border-gray-200 bg-white p-4 md:p-6 shadow-sm">
           <h3 className="mb-2 text-center text-lg font-semibold text-blue-700">
             Not enough services in your area?
           </h3>
diff --git a/src/frontend/src/pages/client/notifications.tsx b/src/frontend/src/pages/client/notifications.tsx
index 7ec90829..5c741789 100644
--- a/src/frontend/src/pages/client/notifications.tsx
+++ b/src/frontend/src/pages/client/notifications.tsx
@@ -315,14 +315,14 @@ const NotificationsPage = () => {
                   clearSelection();
                 }
               }}
-              className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
+              className="rounded-lg bg-gray-100 px-2 py-2 text-xs sm:text-sm sm:px-3 font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
             >
               {editMode ? "Done" : "Edit"}
             </button>
             <div className="flex flex-wrap items-center gap-2">
               <button
                 onClick={handleSelectAll}
-                className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
+                className="rounded-lg bg-gray-100 px-2 py-2 text-xs sm:text-sm sm:px-3 font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
               >
                 {selectedIds.length > 0 &&
                 selectedIds.length ===
@@ -334,7 +334,7 @@ const NotificationsPage = () => {
               {unread.length > 0 && (
                 <button
                   onClick={markAllAsRead}
-                  className="flex items-center whitespace-nowrap rounded-lg bg-blue-100 px-3 py-2 text-sm font-semibold text-blue-700 shadow-sm hover:bg-blue-200 hover:text-blue-900"
+                  className="flex items-center whitespace-nowrap rounded-lg bg-blue-100 px-2 py-2 text-xs sm:text-sm sm:px-3 font-semibold text-blue-700 shadow-sm hover:bg-blue-200 hover:text-blue-900"
                 >
                   <EnvelopeOpenIcon className="mr-1.5 h-4 w-4" />
                   Mark all as read
diff --git a/src/frontend/src/pages/client/service/[id].tsx b/src/frontend/src/pages/client/service/[id].tsx
index f5905f6d..151e05ec 100644
--- a/src/frontend/src/pages/client/service/[id].tsx
+++ b/src/frontend/src/pages/client/service/[id].tsx
@@ -680,7 +680,7 @@ const ClientServiceDetailsPage: React.FC = () => {
               </div>
 
               {/* Right: Provider Details */}
-              <div className="flex min-w-[280px] flex-col rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
+              <div className="flex min-w-0 w-full sm:min-w-[280px] sm:w-auto flex-col rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
                 <div className="flex items-center gap-4">
                   <div className="relative flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-gray-100">
                     <img
diff --git a/src/frontend/src/pages/provider/home.tsx b/src/frontend/src/pages/provider/home.tsx
index 39e53aed..44e5c569 100644
--- a/src/frontend/src/pages/provider/home.tsx
+++ b/src/frontend/src/pages/provider/home.tsx
@@ -203,7 +203,7 @@ const ProviderHomePage: React.FC = () => {
         />
       )}
 
-      <div className="w-full max-w-full px-4 pb-16 pt-4">
+      <div className="w-full max-w-full px-4 pt-4">
         {/* Use userProfile directly for SPHeaderNextjs */}
         {/**
          * Make the scrolling container explicit and pass it to the header
diff --git a/src/frontend/src/pages/provider/notifications.tsx b/src/frontend/src/pages/provider/notifications.tsx
index a7fe701f..20918a76 100644
--- a/src/frontend/src/pages/provider/notifications.tsx
+++ b/src/frontend/src/pages/provider/notifications.tsx
@@ -346,14 +346,14 @@ const NotificationsPageSP = () => {
                   clearSelection();
                 }
               }}
-              className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
+              className="rounded-lg bg-gray-100 px-2 py-2 text-xs sm:text-sm sm:px-3 font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
             >
               {editMode ? "Done" : "Edit"}
             </button>
             <div className="flex flex-wrap items-center gap-2">
               <button
                 onClick={handleSelectAll}
-                className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
+                className="rounded-lg bg-gray-100 px-2 py-2 text-xs sm:text-sm sm:px-3 font-semibold text-gray-700 shadow-sm hover:bg-gray-50"
               >
                 {selectedIds.length > 0 &&
                 selectedIds.length ===
@@ -365,7 +365,7 @@ const NotificationsPageSP = () => {
               {unread.length > 0 && (
                 <button
                   onClick={markAllAsRead}
-                  className="flex items-center whitespace-nowrap rounded-lg bg-blue-100 px-3 py-2 text-sm font-semibold text-blue-700 shadow-sm hover:bg-blue-200 hover:text-blue-900"
+                  className="flex items-center whitespace-nowrap rounded-lg bg-blue-100 px-2 py-2 text-xs sm:text-sm sm:px-3 font-semibold text-blue-700 shadow-sm hover:bg-blue-200 hover:text-blue-900"
                 >
                   <EnvelopeOpenIcon className="mr-1.5 h-4 w-4" />
                   Mark all as read
@@ -524,4 +524,4 @@ const NotificationsPageSP = () => {
   );
 };
 
-export default NotificationsPageSP;
+export default NotificationsPageSP;
\ No newline at end of file
diff --git a/src/frontend/src/pages/provider/service-details/[id].tsx b/src/frontend/src/pages/provider/service-details/[id].tsx
index e7c15e40..52b8e6a2 100644
--- a/src/frontend/src/pages/provider/service-details/[id].tsx
+++ b/src/frontend/src/pages/provider/service-details/[id].tsx
@@ -1355,7 +1355,7 @@ const ProviderServiceDetailPage: React.FC = () => {
       </header>
 
       {/* Main Content */}
-      <main className="mx-auto max-w-full space-y-10 px-4 py-8 sm:px-8">
+      <main className="mx-auto min-h-[calc(100vh-5rem)] max-w-full space-y-10 px-4 py-8 sm:px-8">
         {/** Compute edit-lock state */}
         {/** Only the section currently being edited remains interactive */}
         {/** Others get blurred and non-interactive to prevent concurrent edits */}
@@ -1458,7 +1458,7 @@ const ProviderServiceDetailPage: React.FC = () => {
           </div>
 
           {/* Right: Certifications & Service Images */}
-          <div className="flex flex-col gap-8 sm:sticky sm:top-16 lg:self-start">
+          <div className="flex flex-col gap-8 md:sticky md:top-16 md:self-start">
             <LockableSection
               locked={
                 (editTitleCategory ||
diff --git a/src/frontend/src/pages/provider/services/add.tsx b/src/frontend/src/pages/provider/services/add.tsx
index 182d8fce..d29bdd52 100644
--- a/src/frontend/src/pages/provider/services/add.tsx
+++ b/src/frontend/src/pages/provider/services/add.tsx
@@ -620,9 +620,10 @@ const AddServicePage: React.FC = () => {
       return;
     }
 
-    if (Object.keys(errors).length === 0) {
-      setCurrentStep((prev) => prev + 1);
-      setValidationErrors({});
+if (Object.keys(errors).length === 0) {
+    scrollToTop();
+    setCurrentStep((prev) => prev + 1);
+    setValidationErrors({});
     } else {
       setValidationErrors(errors);
       setScrollToErrorTrigger((prev) => prev + 1);