From 431e89d9b9cb6e1afc31911e0d129ca21e10afd4 Mon Sep 17 00:00:00 2001
From: prateeksha17 <prateekshapandey8177@gmail.com>
Date: Wed, 3 Jul 2024 00:12:45 +0530
Subject: [PATCH 1/2] added_footer_links

---
 src/App.js                                    | 12 ++++-
 src/Components/Footer/Footer.css              | 11 +++-
 src/Components/Footer/Footer.jsx              |  8 +++
 src/Components/Footer/Policy/Cookie.css       | 50 +++++++++++++++++++
 src/Components/Footer/Policy/Cookie.jsx       | 31 ++++++++++++
 src/Components/Footer/Policy/Privacy.css      | 50 +++++++++++++++++++
 src/Components/Footer/Policy/Privacy.jsx      | 31 ++++++++++++
 src/Components/Footer/Policy/Return.css       | 50 +++++++++++++++++++
 src/Components/Footer/Policy/Return.jsx       | 25 ++++++++++
 src/Components/Footer/Policy/Shipping.css     | 50 +++++++++++++++++++
 src/Components/Footer/Policy/Shipping.jsx     | 36 +++++++++++++
 .../Footer/Policy/TermsOfService.css          | 50 +++++++++++++++++++
 .../Footer/Policy/TermsOfService.jsx          | 31 ++++++++++++
 13 files changed, 433 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/Footer/Policy/Cookie.css
 create mode 100644 src/Components/Footer/Policy/Cookie.jsx
 create mode 100644 src/Components/Footer/Policy/Privacy.css
 create mode 100644 src/Components/Footer/Policy/Privacy.jsx
 create mode 100644 src/Components/Footer/Policy/Return.css
 create mode 100644 src/Components/Footer/Policy/Return.jsx
 create mode 100644 src/Components/Footer/Policy/Shipping.css
 create mode 100644 src/Components/Footer/Policy/Shipping.jsx
 create mode 100644 src/Components/Footer/Policy/TermsOfService.css
 create mode 100644 src/Components/Footer/Policy/TermsOfService.jsx

diff --git a/src/App.js b/src/App.js
index d7c9b27..13300ec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,10 +14,15 @@ import About from "./Pages/About";
 import Contact from "./Pages/Contact";
 import NotFound from "./Pages/NotFound";
 import ScrollToTop from "react-scroll-to-top";
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { ShopContext } from "./Context/ShopContext";
 import Collections from "./Pages/Collections";
 import Offers from "./Pages/Offers";
+import Cookie from "./Components/Footer/Policy/Cookie";
+import Shipping from "./Components/Footer/Policy/Shipping";
+import Return from "./Components/Footer/Policy/Return";
+import TermsOfService from "./Components/Footer/Policy/TermsOfService";
+import Privacy from "./Components/Footer/Policy/Privacy";
 function App() {
   const { theme } = useContext(ShopContext);
   return (
@@ -48,6 +53,11 @@ function App() {
           <Route path="*" element={<NotFound />} />
           <Route path="/offers" element={<Offers />} />
           <Route path="/collections" element={<Collections />} />
+          <Route path="/cookie-policy" element={<Cookie/>} />
+          <Route path="/shipping-policy" element={<Shipping/>} />
+          <Route path="/return-policy" element={<Return/>} />
+          <Route path="/terms-of-service" element={<TermsOfService/>}/>
+          <Route path="/privacy-policy" element={<Privacy/>}/>
         </Routes>
         <Footer />
       </BrowserRouter>
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
index c9c9ff5..caf9383 100644
--- a/src/Components/Footer/Footer.css
+++ b/src/Components/Footer/Footer.css
@@ -6,7 +6,16 @@
     gap: 50px;
     margin-top: 170px;
 }
-
+.footer-links a {
+    margin: 0 10px;
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .footer-links a:hover {
+    text-decoration: underline;
+  }
+  
 .footer-logo {
     display: flex;
     align-items: center;
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
index 1d2a847..451deaf 100644
--- a/src/Components/Footer/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -60,6 +60,14 @@ const Footer = () => {
       <div className={`footer-copyright_${theme}`}>
         <hr className={`hr_${theme}`} />
         <p>Copyright @ {new Date().getFullYear()} - All Rights Reserved</p>
+        <div className="footer-links">
+        <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+        <a href="/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
+        <a href="/return-policy" target="_blank" rel="noopener noreferrer">Return Policy</a>
+        <a href="/shipping-policy" target="_blank" rel="noopener noreferrer">Shipping Policy</a>
+        <a href="/cookie-policy" target="_blank" rel="noopener noreferrer">Cookie Policy</a>
+        
+      </div>
       </div>
     </div>
   );
diff --git a/src/Components/Footer/Policy/Cookie.css b/src/Components/Footer/Policy/Cookie.css
new file mode 100644
index 0000000..2f199d4
--- /dev/null
+++ b/src/Components/Footer/Policy/Cookie.css
@@ -0,0 +1,50 @@
+.cookie-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .cookie-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+  
+  .cookie-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+  
+  .cookie-policy p {
+    margin-bottom: 15px;
+  }
+  
+  .cookie-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .cookie-policy ul li {
+    margin-bottom: 10px;
+  }
+  
+  .cookie-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .cookie-policy a:hover {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Footer/Policy/Cookie.jsx b/src/Components/Footer/Policy/Cookie.jsx
new file mode 100644
index 0000000..62ae96b
--- /dev/null
+++ b/src/Components/Footer/Policy/Cookie.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import './Cookie.css'; // Import the CSS file
+
+const Cookie = () => {
+  return (
+    <div className="cookie-policy">
+      <h1>Cookie Policy</h1>
+      <p>This Cookie Policy explains how our website uses cookies and similar technologies to provide, improve, promote, and protect our services.</p>
+
+      <h2>What Are Cookies?</h2>
+      <p>Cookies are small pieces of text sent by your web browser by a website you visit. A cookie file is stored in your web browser and allows the Service or a third-party to recognize you and make your next visit easier and the Service more useful to you.</p>
+
+      <h2>How We Use Cookies</h2>
+      <p>When you use and access the Service, we may place a number of cookies files in your web browser. We use cookies for the following purposes:</p>
+      <ul>
+        <li>To enable certain functions of the Service</li>
+        <li>To provide analytics</li>
+        <li>To store your preferences</li>
+        <li>To enable advertisements delivery, including behavioral advertising</li>
+      </ul>
+
+      <h2>Your Choices Regarding Cookies</h2>
+      <p>If you’d like to delete cookies or instruct your web browser to delete or refuse cookies, please visit the help pages of your web browser. Please note, however, that if you delete cookies or refuse to accept them, you might not be able to use all of the features we offer, you may not be able to store your preferences, and some of our pages might not display properly.</p>
+
+      <h2>More Information</h2>
+      <p>For more information about cookies, please visit the <a href="https://www.privacypolicies.com/blog/cookies/">Privacy Policies website</a>.</p>
+    </div>
+  );
+}
+
+export default Cookie;
diff --git a/src/Components/Footer/Policy/Privacy.css b/src/Components/Footer/Policy/Privacy.css
new file mode 100644
index 0000000..c567f12
--- /dev/null
+++ b/src/Components/Footer/Policy/Privacy.css
@@ -0,0 +1,50 @@
+.privacy-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .privacy-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+  
+  .privacy-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+  
+  .privacy-policy p {
+    margin-bottom: 15px;
+  }
+  
+  .privacy-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .privacy-policy ul li {
+    margin-bottom: 10px;
+  }
+  
+  .privacy-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .privacy-policy a:hover {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Footer/Policy/Privacy.jsx b/src/Components/Footer/Policy/Privacy.jsx
new file mode 100644
index 0000000..6b94ab5
--- /dev/null
+++ b/src/Components/Footer/Policy/Privacy.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import './Privacy.css'; // Import the CSS file
+
+const Privacy = () => {
+  return (
+    <div className="privacy-policy">
+      <h1>Privacy Policy</h1>
+      <p>Your privacy is important to us. It is ShopNex's policy to respect your privacy regarding any information we may collect from you across our website, and other sites we own and operate.</p>
+
+      <h2>Information We Collect</h2>
+      <p>We only collect information about you if we have a reason to do so, for example, to provide our services, to communicate with you, or to improve our services.</p>
+
+      <h2>Use of Your Information</h2>
+      <p>We may use your information to provide and maintain our services, to improve our services, to contact you, to provide customer support, and to protect our rights or the rights of others.</p>
+
+      <h2>Sharing of Your Information</h2>
+      <p>We do not share personal information with third parties except as necessary to provide our services or as required by law.</p>
+
+      <h2>Security of Your Information</h2>
+      <p>We strive to protect your personal information using reasonable security measures.</p>
+
+      <h2>Changes to This Privacy Policy</h2>
+      <p>ShopNex may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions or concerns regarding our shipping policy, please feel free to <a href="/contact">contact us</a>.</p>
+    </div>
+  );
+}
+
+export default Privacy;
diff --git a/src/Components/Footer/Policy/Return.css b/src/Components/Footer/Policy/Return.css
new file mode 100644
index 0000000..a494310
--- /dev/null
+++ b/src/Components/Footer/Policy/Return.css
@@ -0,0 +1,50 @@
+.return-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .return-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+  
+  .return-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+  
+  .return-policy p {
+    margin-bottom: 15px;
+  }
+  
+  .return-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .return-policy ul li {
+    margin-bottom: 10px;
+  }
+  
+  .return-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .return-policy a:hover {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Footer/Policy/Return.jsx b/src/Components/Footer/Policy/Return.jsx
new file mode 100644
index 0000000..1a0398b
--- /dev/null
+++ b/src/Components/Footer/Policy/Return.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import './Return.css'; // Import the CSS file
+
+const Return = () => {
+  return (
+    <div className="return-policy">
+      <h1>Return Policy</h1>
+      <p>Thank you for shopping with us. If you are not entirely satisfied with your purchase, we're here to help.</p>
+
+      <h2>Returns</h2>
+      <p>You have 30 calendar days to return an item from the date you received it. To be eligible for a return, your item must be unused and in the same condition that you received it. Your item must be in the original packaging. Your item needs to have the receipt or proof of purchase.</p>
+
+      <h2>Refunds</h2>
+      <p>Once we receive your item, we will inspect it and notify you that we have received your returned item. We will immediately notify you on the status of your refund after inspecting the item. If your return is approved, we will initiate a refund to your credit card (or original method of payment). You will receive the credit within a certain amount of days, depending on your card issuer's policies.</p>
+
+      <h2>Shipping</h2>
+      <p>You will be responsible for paying for your own shipping costs for returning your item. Shipping costs are non-refundable. If you receive a refund, the cost of return shipping will be deducted from your refund.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions on how to return your item to us, please contact us at <a href="/contact">Contact Us</a>.</p>
+    </div>
+  );
+}
+
+export default Return;
diff --git a/src/Components/Footer/Policy/Shipping.css b/src/Components/Footer/Policy/Shipping.css
new file mode 100644
index 0000000..f5fe710
--- /dev/null
+++ b/src/Components/Footer/Policy/Shipping.css
@@ -0,0 +1,50 @@
+.shipping-policy {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .shipping-policy h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #444;
+  }
+  
+  .shipping-policy h2 {
+    font-size: 1.5em;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+  
+  .shipping-policy p {
+    margin-bottom: 15px;
+  }
+  
+  .shipping-policy ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .shipping-policy ul li {
+    margin-bottom: 10px;
+  }
+  
+  .shipping-policy a {
+    color: #007bff;
+    text-decoration: none;
+  }
+  
+  .shipping-policy a:hover {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Footer/Policy/Shipping.jsx b/src/Components/Footer/Policy/Shipping.jsx
new file mode 100644
index 0000000..6986035
--- /dev/null
+++ b/src/Components/Footer/Policy/Shipping.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import './Shipping.css'; // Import the CSS file
+
+const Shipping = () => {
+  return (
+    <div className="shipping-policy">
+      <h1>Shipping Policy</h1>
+      <p>Welcome to our Shipping Policy page. Here you will find all the necessary information regarding our shipping methods, delivery times, and costs.</p>
+
+      <h2>Shipping Methods</h2>
+      <p>We offer a variety of shipping options to meet your needs. The available shipping methods will be displayed at checkout.</p>
+      <ul>
+        <li>Standard Shipping: 5-7 business days</li>
+        <li>Expedited Shipping: 2-3 business days</li>
+        <li>Overnight Shipping: 1 business day</li>
+      </ul>
+
+      <h2>Delivery Times</h2>
+      <p>Delivery times are estimates and commence from the date of shipping, rather than the date of order. Delivery times are to be used as a guide only and are subject to the acceptance and approval of your order.</p>
+
+      <h2>Shipping Costs</h2>
+      <p>Shipping costs are calculated based on the weight of your order and the selected shipping method. The total cost will be displayed at checkout.</p>
+
+      <h2>International Shipping</h2>
+      <p>We offer international shipping to select countries. Please note that international shipments may be subject to additional customs fees, import duties, and taxes. These charges are the responsibility of the recipient.</p>
+
+      <h2>Tracking Your Order</h2>
+      <p>Once your order has been shipped, you will receive a confirmation email with a tracking number. You can use this number to track your order on the shipping carrier's website.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions or concerns regarding our shipping policy, please feel free to <a href="/contact">contact us</a>.</p>
+    </div>
+  );
+}
+
+export default Shipping;
diff --git a/src/Components/Footer/Policy/TermsOfService.css b/src/Components/Footer/Policy/TermsOfService.css
new file mode 100644
index 0000000..45de79d
--- /dev/null
+++ b/src/Components/Footer/Policy/TermsOfService.css
@@ -0,0 +1,50 @@
+
+.terms-of-service  {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.terms-of-service  h1 {
+  font-size: 2em;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #444;
+}
+
+.terms-of-service  h2 {
+  font-size: 1.5em;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  color: #555;
+}
+
+.terms-of-service  p {
+  margin-bottom: 15px;
+}
+
+.terms-of-service  ul {
+  list-style-type: disc;
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+
+.terms-of-service  ul li {
+  margin-bottom: 10px;
+}
+
+.terms-of-service  a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.terms-of-service  a:hover {
+  text-decoration: underline;
+}
diff --git a/src/Components/Footer/Policy/TermsOfService.jsx b/src/Components/Footer/Policy/TermsOfService.jsx
new file mode 100644
index 0000000..323967d
--- /dev/null
+++ b/src/Components/Footer/Policy/TermsOfService.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import './TermsOfService.css'; // Import the CSS file
+
+const TermsOfService = () => {
+  return (
+    <div className="terms-of-service">
+      <h1>Terms of Service</h1>
+      <p>Welcome to our website. If you continue to browse and use this website, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern ShopNex's relationship with you in relation to this website.</p>
+
+      <h2>Use of the Site</h2>
+      <p>The content of the pages of this website is for your general information and use only. It is subject to change without notice.</p>
+
+      <h2>User Account</h2>
+      <p>If you create an account on the website, you are responsible for maintaining the confidentiality of your account and password and for restricting access to your computer. You agree to accept responsibility for all activities that occur under your account or password.</p>
+
+      <h2>Intellectual Property</h2>
+      <p>All trademarks reproduced in this website, which are not the property of, or licensed to the operator, are acknowledged on the website.</p>
+
+      <h2>Limitation of Liability</h2>
+      <p>The information contained in this website is for general information purposes only. The information is provided by ShopNex and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.</p>
+
+      <h2>Changes to the Terms</h2>
+      <p>ShopNex reserves the right to make changes to the website and these terms at any time.</p>
+
+      <h2>Contact Us</h2>
+      <p>If you have any questions or concerns regarding our shipping policy, please feel free to <a href="/contact">contact us</a>.</p>
+    </div>
+  );
+}
+
+export default TermsOfService;

From cea963657d0ef4012021a62cd5d0228d24928b55 Mon Sep 17 00:00:00 2001
From: prateeksha17 <prateekshapandey8177@gmail.com>
Date: Wed, 3 Jul 2024 11:26:27 +0530
Subject: [PATCH 2/2] removed_arrow

---
 src/Pages/CSS/ShopCategory.css | 58 +++++++++++++++++++++++++++++++---
 src/Pages/ShopCategory.jsx     | 10 +++---
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/Pages/CSS/ShopCategory.css b/src/Pages/CSS/ShopCategory.css
index fba0b28..d99e4b3 100644
--- a/src/Pages/CSS/ShopCategory.css
+++ b/src/Pages/CSS/ShopCategory.css
@@ -19,8 +19,7 @@
   border: 1px solid #888;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background: url("../../Components/Assets/dropdown_icon.png") no-repeat right
-    center;
+ 
   background-position: calc(100% - 15px) center;
   font-size: 16px;
 }
@@ -32,12 +31,63 @@
   border: 1px solid #ffffff;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background: url("../../Components/Assets/dropdown_icon.png") no-repeat right
-    center;
+ 
   background-position: calc(100% - 15px) center;
   font-size: 16px;
   background: rgb(255, 255, 255);
 }
+/* Wrapper for the label and select elements */
+.shopcategory-sort-wrapper {
+  display: flex;           /* Use flexbox to align items horizontally */
+  align-items: center;     /* Center items vertically */
+  padding: 8px 12px;       /* Add padding for overall spacing */
+
+}
+
+/* Style for the label */
+.sort-label {
+  margin-right: 10px;  /* Space between label and select */
+  font-size: 16px;     /* Font size for the label */
+}
+
+/* Remove default appearance and style the select element */
+.custom-select {
+  -webkit-appearance: none; /* Remove default styling in Chrome, Safari, Edge, Opera */
+  -moz-appearance: none;    /* Remove default styling in Firefox */
+  appearance: none;         /* Standard syntax */
+  padding: 8px 12px;        /* Padding inside the select */
+  border: 1px solid #888;   /* Border for the select */
+  border-radius: 30px;      /* Rounded corners for the select */
+  background-color: white;  /* Background color for the select */
+  background: url("../../Components/Assets/dropdown_icon.png") no-repeat right 10px center; /* Adjust background position */
+  font-size: 16px;          /* Font size for the select text */
+  outline: none;            /* Remove default focus outline */
+  width: 150px;             /* Width of the select element */
+  margin: 0;                /* Reset margin to avoid extra space */
+  padding-right: 30px;      /* Add space on the right to avoid text overlapping with the icon */
+}
+
+
+/* Add custom dropdown icon */
+.custom-select::after {
+  content: ''; /* No text content */
+  position: absolute; /* Position the icon absolutely */
+  right: 10px; /* Distance from the right edge */
+  top: 50%;    /* Vertical alignment */
+  transform: translateY(-50%); /* Center the icon vertically */
+  width: 12px;   /* Width of the icon */
+  height: 12px;  /* Height of the icon */
+
+  pointer-events: none; /* Ensure the icon doesn't interfere with clicks */
+}
+
+/* Optional: Add some styles for focus state */
+.custom-select:focus {
+  border-color: #007BFF; /* Change border color on focus */
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add shadow for focus effect */
+}
+
+
 
 .shopcategory-sort option {
   text-align: left;
diff --git a/src/Pages/ShopCategory.jsx b/src/Pages/ShopCategory.jsx
index c882d01..d277b3c 100644
--- a/src/Pages/ShopCategory.jsx
+++ b/src/Pages/ShopCategory.jsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import './CSS/ShopCategory.css';
 import { ShopContext } from '../Context/ShopContext';
-import dropdown_icon from '../Components/Assets/dropdown_icon.png';
+
 import Item from '../Components/Item/Item';
 
 const ShopCategory = (props) => {
@@ -46,8 +46,10 @@ const ShopCategory = (props) => {
           <span>{`Showing ${startIndex + 1}-${endIndex}`}</span> out of {totalProducts} products
         </p>
         <div className={`shopcategory-sort_${theme}`}>
-          Sort By
-          <select
+        <div class="shopcategory-sort-wrapper">
+        <span class="sort-label">Sort By</span>
+          
+          <select class="custom-select"
             name="shopcategory-sort"
             value={sorting}
             onChange={(e) => setSorting(e.target.value)}
@@ -55,7 +57,7 @@ const ShopCategory = (props) => {
             <option value="0">Low to High</option>
             <option value="1">High to Low</option>
           </select>
-          {/* <img src={dropdown_icon} alt='' /> */}
+          </div>
         </div>
       </div>
       <div className='shopcategory-products'>