diff --git a/src/app/service-request/page.tsx b/src/app/service-request/page.tsx
new file mode 100644
index 0000000..548655a
--- /dev/null
+++ b/src/app/service-request/page.tsx
@@ -0,0 +1,258 @@
+"use client";
+
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { useState } from "react";
+import { Upload } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Membership", id: "/membership" },
+  { name: "Services", id: "#services" },
+  { name: "Dashboard", id: "/dashboard" },
+];
+
+interface ServiceRequestFormData {
+  memberName: string;
+  phone: string;
+  address: string;
+  membershipPlan: string;
+  issueType: string;
+  description: string;
+  photoFile: File | null;
+}
+
+export default function ServiceRequestPage() {
+  const [formData, setFormData] = useState<ServiceRequestFormData>({
+    memberName: "",    phone: "",    address: "",    membershipPlan: "",    issueType: "",    description: "",    photoFile: null,
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleInputChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFormData((prev) => ({
+        ...prev,
+        photoFile: e.target.files![0],
+      }));
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Service request submitted:", formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({
+        memberName: "",        phone: "",        address: "",        membershipPlan: "",        issueType: "",        description: "",        photoFile: null,
+      });
+      setSubmitted(false);
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleFullscreen
+        navItems={navItems}
+        brandName="OW HomeShield"
+        bottomLeftText="24/7 Support"
+        bottomRightText="support@owhomeshield.com"
+      />
+
+      <div className="min-h-screen pt-20 pb-20 px-4">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-4xl font-bold mb-4 text-center">
+            Service Request
+          </h1>
+          <p className="text-center text-foreground/70 mb-12">
+            Submit a service request and our team will respond within 24 hours.
+          </p>
+
+          <div className="bg-card rounded-lg p-8 border border-foreground/10">
+            {submitted ? (
+              <div className="text-center py-12">
+                <div className="text-5xl mb-4">✓</div>
+                <h2 className="text-2xl font-bold mb-2">
+                  Service Request Submitted!
+                </h2>
+                <p className="text-foreground/70">
+                  A technician will contact you within 24 hours.
+                </p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {/* Member Name */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Member Name *
+                  </label>
+                  <input
+                    type="text"
+                    name="memberName"
+                    value={formData.memberName}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
+                    placeholder="John Doe"
+                  />
+                </div>
+
+                {/* Phone */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Phone Number *
+                  </label>
+                  <input
+                    type="tel"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
+                    placeholder="(555) 123-4567"
+                  />
+                </div>
+
+                {/* Address */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Service Address *
+                  </label>
+                  <input
+                    type="text"
+                    name="address"
+                    value={formData.address}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
+                    placeholder="123 Main Street, City, State 12345"
+                  />
+                </div>
+
+                {/* Membership Plan */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Membership Plan *
+                  </label>
+                  <select
+                    name="membershipPlan"
+                    value={formData.membershipPlan}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
+                  >
+                    <option value="">Select a plan</option>
+                    <option value="basic">Basic Plan</option>
+                    <option value="standard">Standard Plan</option>
+                    <option value="premium">Premium Plan</option>
+                    <option value="elite">Elite Plan</option>
+                  </select>
+                </div>
+
+                {/* Issue Type */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Issue Type *
+                  </label>
+                  <select
+                    name="issueType"
+                    value={formData.issueType}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
+                  >
+                    <option value="">Select issue type</option>
+                    <option value="plumbing">Plumbing</option>
+                    <option value="electrical">Electrical</option>
+                    <option value="hvac">HVAC</option>
+                    <option value="roofing">Roofing</option>
+                    <option value="general">General Maintenance</option>
+                    <option value="emergency">Emergency Repair</option>
+                  </select>
+                </div>
+
+                {/* Description */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Issue Description *
+                  </label>
+                  <textarea
+                    name="description"
+                    value={formData.description}
+                    onChange={handleInputChange}
+                    required
+                    rows={4}
+                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
+                    placeholder="Describe the issue in detail..."
+                  />
+                </div>
+
+                {/* Photo Upload */}
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Upload Photo (Optional)
+                  </label>
+                  <div className="border-2 border-dashed border-foreground/20 rounded-lg p-6 text-center hover:border-primary-cta transition-colors">
+                    <input
+                      type="file"
+                      name="photo"
+                      onChange={handleFileChange}
+                      accept="image/*"
+                      className="hidden"
+                      id="photo-upload"
+                    />
+                    <label
+                      htmlFor="photo-upload"
+                      className="cursor-pointer flex flex-col items-center gap-2"
+                    >
+                      <Upload className="w-8 h-8 text-primary-cta" />
+                      <span className="text-sm font-medium">
+                        {formData.photoFile
+                          ? formData.photoFile.name
+                          : "Click to upload or drag and drop"}
+                      </span>
+                      <span className="text-xs text-foreground/50">
+                        PNG, JPG, GIF up to 10MB
+                      </span>
+                    </label>
+                  </div>
+                </div>
+
+                {/* Submit Button */}
+                <button
+                  type="submit"
+                  className="w-full bg-primary-cta text-white font-medium py-3 rounded-lg hover:opacity-90 transition-opacity"
+                >
+                  Submit Service Request
+                </button>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}