diff --git a/src/App.js b/src/App.js
index c6eda47..107c887 100644
--- a/src/App.js
+++ b/src/App.js
@@ -82,14 +82,6 @@ function App() {
           <Route path='/cart' element={<Cart/>}/>
           <Route path='/admin-login' element={<AdminLogin/>}/>
           <Route path='/admin-dashboard' element={<AdminDashboard/>}/>
-          <Route path='/service' element={<ServiceDetails/>}/>
-          <Route path='/logo-making' element={<LogoDetails/>}/>
-          <Route path='/content-writing' element={<ContentDetails/>}/>
-          <Route path='/digital-marketing' element={<DigitalDetails/>}/>
-          <Route path='/website-designing' element={<WebsiteDetails/>}/>
-          <Route path='/mobile-application' element={<MobileDetails/>}/>
-          <Route path='/signin-page' element={<SignDetails/>}/>
-          <Route path='/add-products' element={<AddDetails/>}/>
         </Routes>
       </Router>
     </>
diff --git a/src/components/ServiceDetails/ServiceDetails.css b/src/components/ServiceDetails/ServiceDetails.css
new file mode 100644
index 0000000..fc2a3a0
--- /dev/null
+++ b/src/components/ServiceDetails/ServiceDetails.css
@@ -0,0 +1,64 @@
+.serviceDetails .nav {
+  display: flex;
+  align-items: center;
+  padding: 1rem 2rem;
+}
+
+.serviceDetails .nav span{
+    font-size: 2rem;
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.serviceDetails hr{
+    width: 95%;
+    margin: 0 auto;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #eee;
+}
+
+.serviceDetails main{
+    height: calc(100vh - 16rem);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 2rem;
+}
+
+.serviceDetails main .img img{
+    width: 100%;
+    max-width: 45rem;
+}
+
+.serviceDetails .main__content{
+    display: flex;
+    flex-direction: column;
+    gap: .4rem;
+}
+
+.serviceDetails .main__content .chip{
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    border: 1px solid #999;
+    color: #444;
+    padding: .4rem;
+    width: fit-content;
+    border-radius: 8px;
+}
+
+.services__sublist{
+    display: flex;
+    align-items: start;
+    gap: 2rem;
+    padding: 1rem 2rem;
+}
+
+.services__sublist .sublist__item{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .25rem;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/ServiceDetails/ServiceDetails.jsx b/src/components/ServiceDetails/ServiceDetails.jsx
index 0133267..65dc98e 100644
--- a/src/components/ServiceDetails/ServiceDetails.jsx
+++ b/src/components/ServiceDetails/ServiceDetails.jsx
@@ -1,10 +1,13 @@
 import WebIcon from "@mui/icons-material/Web";
+import './ServiceDetails.css'
 
-const ServiceDetails = () => {
+const ServiceDetails = ({logo, icon, title, description, img, sublist}) => {
   return (
     <div className="serviceDetails">
       <nav className="nav">
-        <div className="logo">Web</div>
+        <div className="logo">
+          <span>web</span>
+        </div>
       </nav>
       <hr />
 
@@ -21,12 +24,12 @@ const ServiceDetails = () => {
           </p>
         </div>
 
-        <main className="img">
+        <div className="img">
           <img
             src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1115&q=80"
             alt=""
           />
-        </main>
+        </div>
       </main>
 
       <hr />
diff --git a/src/firebase/config.js b/src/firebase/config.js
index 7b2ea17..ee5dfca 100644
--- a/src/firebase/config.js
+++ b/src/firebase/config.js
@@ -4,7 +4,7 @@ import "firebase/compat/storage";
 import 'firebase/compat/auth'
 
 export const firebaseConfig = firebase.initializeApp({
-  apiKey: process.env.FIREBASE_API_KEY,
+  apiKey: "AIzaSyAL0c3QplzTTpLGtkrMBn9T3J4qVE6ZRrg",
   authDomain: "hackathon-6cb89.firebaseapp.com",
   projectId: "hackathon-6cb89",
   storageBucket: "hackathon-6cb89.appspot.com",