diff --git a/.github/workflows/deploy-frontend-dev.yml b/.github/workflows/deploy-frontend-dev.yml
index ea851975a..f271edef9 100644
--- a/.github/workflows/deploy-frontend-dev.yml
+++ b/.github/workflows/deploy-frontend-dev.yml
@@ -2,8 +2,9 @@ name: DeployFrontendDev
 
 on:
   push:
-    branches:
-      - "master"
+    # branches:
+    #   - "master"
+    
 
 jobs:
   deploy-frontend-dev:
diff --git a/nuxt-frontend/assets/images/frontend-development/landing/landing1200w.webp b/nuxt-frontend/assets/images/frontend-development/landing/landing1200w.webp
new file mode 100644
index 000000000..3cb065315
Binary files /dev/null and b/nuxt-frontend/assets/images/frontend-development/landing/landing1200w.webp differ
diff --git a/nuxt-frontend/assets/images/frontend-development/landing/landing2400w.webp b/nuxt-frontend/assets/images/frontend-development/landing/landing2400w.webp
new file mode 100644
index 000000000..ae433bb50
Binary files /dev/null and b/nuxt-frontend/assets/images/frontend-development/landing/landing2400w.webp differ
diff --git a/nuxt-frontend/assets/images/frontend-development/landing/landing400w.webp b/nuxt-frontend/assets/images/frontend-development/landing/landing400w.webp
new file mode 100644
index 000000000..d5eb03f58
Binary files /dev/null and b/nuxt-frontend/assets/images/frontend-development/landing/landing400w.webp differ
diff --git a/nuxt-frontend/assets/images/frontend-development/landing/landing800w.webp b/nuxt-frontend/assets/images/frontend-development/landing/landing800w.webp
new file mode 100644
index 000000000..54d1aca57
Binary files /dev/null and b/nuxt-frontend/assets/images/frontend-development/landing/landing800w.webp differ
diff --git a/nuxt-frontend/components/frontend-development/LandingSection.vue b/nuxt-frontend/components/frontend-development/LandingSection.vue
new file mode 100644
index 000000000..b80136297
--- /dev/null
+++ b/nuxt-frontend/components/frontend-development/LandingSection.vue
@@ -0,0 +1,52 @@
+<template>
+  <section
+    class="bg-deep-charcoal text-white pt-6 pb-14 lg:py-36 text-center lg:text-left 3xl:outer-container"
+  >
+    <div class="container flex flex-col gap-8 lg:flex-row">
+      <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1 lg:my-auto">
+        <h1 class="mobile-header-1 lg:desk-header-1">
+          Frontend development company
+        </h1>
+        <p class="sub-h1-regular lg:mobile-header-2-regular text-white-core-80">
+          At Canopas, we merge art with technology, ensuring your website or app
+          that feels and looks impeccable. Our team will help you design
+          visually stunning, high-performing, and user-centric interfaces.
+        </p>
+        <nuxt-link
+          class="gradient-btn primary-btn ml-0 hidden lg:flex"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_frontend_landing_cta')"
+        >
+          <span class="sub-h3-semibold lg:sub-h1-semibold"
+            >Talk to Frontend Experts</span
+          ></nuxt-link
+        >
+      </div>
+      <div class="flex flex-col w-72 xs:w-80 mx-auto lg:w-96 gap-8 lg:flex-1">
+        <img
+          :src="landing400"
+          :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`"
+          class="mx-auto w-full h-full object-contain"
+          alt="frontend-landing"
+          loading="eager"
+        />
+        <nuxt-link
+          class="white-btn gradient-border-btn primary-btn border-none lg:hidden"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_frontend_landing_cta')"
+        >
+          <span class="sub-h3-semibold"
+            >Talk to Frontend Experts</span
+          ></nuxt-link
+        >
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import landing400 from "@/assets/images/frontend-development/landing/landing400w.webp";
+import landing800 from "@/assets/images/frontend-development/landing/landing800w.webp";
+import landing1200 from "@/assets/images/frontend-development/landing/landing1200w.webp";
+import landing2400 from "@/assets/images/frontend-development/landing/landing2400w.webp";
+const { $mixpanel } = useNuxtApp();
+</script>
diff --git a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
index f351290fa..41099f79a 100644
--- a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
+++ b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
@@ -121,6 +121,8 @@ export default {
           title: "Frontend Development",
           description:
             "The front end is the first point of interaction between your users and your app, making its design and functionality crucial. We focus on creating interactive, visually stunning, and easy-to-navigate interfaces that make your digital presence stand out, promoting enhanced user satisfaction and brand loyalty. ",
+          url: "/frontend-development",
+          showServices: config.SHOW_FRONTEND_DEVELOPMENT_PAGE,
         },
       ],
       lastScrollY: 0,
diff --git a/nuxt-frontend/components/services/WhatWeOfferMobile.vue b/nuxt-frontend/components/services/WhatWeOfferMobile.vue
index cf871f723..13796437b 100644
--- a/nuxt-frontend/components/services/WhatWeOfferMobile.vue
+++ b/nuxt-frontend/components/services/WhatWeOfferMobile.vue
@@ -119,6 +119,8 @@ export default {
             "The front end is the first point of interaction between your users and your app, making its design and functionality crucial. We focus on creating interactive, visually stunning, and easy-to-navigate interfaces that make your digital presence stand out, promoting enhanced user satisfaction and brand loyalty. ",
           class:
             "bg-gradient-to-b from-[#BBDEFF] via-[#BBDEFF] to-white bg-gradient-[180deg] ",
+          url: "/frontend-development",
+          showServices: config.SHOW_FRONTEND_DEVELOPMENT_PAGE,
         },
       ],
     };
diff --git a/nuxt-frontend/config.js b/nuxt-frontend/config.js
index ecf4bf04c..93c9dd420 100644
--- a/nuxt-frontend/config.js
+++ b/nuxt-frontend/config.js
@@ -127,11 +127,20 @@ export default Object.freeze({
     url: "https://dev-stack.canopas.com/backend-development",
     image: "https://dev-stack.canopas.com/apple-touch-icon.png",
   },
+  FRONTEND_DEVELOPMENT_SEO_META_DATA: {
+    title: "Frontend Development Company - Canopas",
+    description:
+      "We create bespoke Frontend webpages known for their supreme performance, unwavering security, and outmost reliability",
+    type: "Website",
+    url: "https://dev-stack.canopas.com/frontend-development",
+    image: "https://dev-stack.canopas.com/apple-touch-icon.png",
+  },
   IS_PROD: false,
   SHOW_ANDROID_APP_DEVELOPMENT_PAGE: true,
   SHOW_IOS_APP_DEVELOPMENT_PAGE: true,
   SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: true,
   SHOW_BACKEND_DEVELOPMENT_PAGE: true,
+  SHOW_FRONTEND_DEVELOPMENT_PAGE: true,
   SMILEPLUS_URL: "https://www.udini.ai/products/smile",
   WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",
   MIX_PANEL_TOKEN: "acf7239a736ff487ca6058c981a55d7e",
diff --git a/nuxt-frontend/config.prod.js b/nuxt-frontend/config.prod.js
index 5508456b1..ec6f55691 100644
--- a/nuxt-frontend/config.prod.js
+++ b/nuxt-frontend/config.prod.js
@@ -127,11 +127,20 @@ export default Object.freeze({
     url: "https://canopas.com/backend-development",
     image: "https://canopas.com/apple-touch-icon.png",
   },
+  FRONTEND_DEVELOPMENT_SEO_META_DATA: {
+    title: "Frontend Development Company - Canopas",
+    description:
+      "We create bespoke Frontend webpages known for their supreme performance, unwavering security, and outmost reliability",
+    type: "Website",
+    url: "https://dev-stack.canopas.com/frontend-development",
+    image: "https://dev-stack.canopas.com/apple-touch-icon.png",
+  },
   IS_PROD: true,
   SHOW_ANDROID_APP_DEVELOPMENT_PAGE: true,
   SHOW_IOS_APP_DEVELOPMENT_PAGE: true,
   SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: false,
   SHOW_BACKEND_DEVELOPMENT_PAGE: false,
+  SHOW_FRONTEND_DEVELOPMENT_PAGE: false,
   SMILEPLUS_URL: "https://www.udini.ai/products/smile",
   WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",
   MIX_PANEL_TOKEN: "16b177c2cda3ec1fb11c63a07f27996c",
diff --git a/nuxt-frontend/pages/frontend-development.vue b/nuxt-frontend/pages/frontend-development.vue
new file mode 100644
index 000000000..86dac577c
--- /dev/null
+++ b/nuxt-frontend/pages/frontend-development.vue
@@ -0,0 +1,66 @@
+<template>
+  <Header class="bg-deep-charcoal" />
+  <LandingSection />
+  <NewFooter class="bg-gradient-to-b from-pink-0 to-pink-16" />
+</template>
+<script>
+import Header from "@/components/partials/NewHeader.vue";
+import NewFooter from "@/components/partials/NewFooter.vue";
+import config from "@/config.js";
+import { defineAsyncComponent } from "vue";
+import { elementInViewPort } from "@/utils.js";
+import LandingSection from "@/components/frontend-development/LandingSection.vue";
+export default {
+  beforeRouteEnter(to, from, next) {
+    if (!config.SHOW_FRONTEND_DEVELOPMENT_PAGE) {
+      next({
+        name: "Error404Page",
+        params: { pathMatch: "/frontend-development" },
+      });
+    } else {
+      next();
+    }
+  },
+  components: {
+    Header,
+    LandingSection,
+    NewFooter,
+  },
+  setup() {
+    const { $mixpanel } = useNuxtApp();
+    const footer = ref(null);
+    const seoData = config.FRONTEND_DEVELOPMENT_SEO_META_DATA;
+    useSeoMeta({
+      robots: "noindex,nofollow",
+      title: seoData.title,
+      description: seoData.description,
+      ogTitle: seoData.title,
+      ogType: seoData.type,
+      ogUrl: seoData.url,
+      ogImage: seoData.image,
+    });
+    let event = "";
+    let events = {
+      footer: "view_frontend_development_footer",
+    };
+    let elements;
+    onMounted(() => {
+      elements = ref({
+        footer: footer,
+      });
+      window.addEventListener("scroll", sendEvent);
+      $mixpanel.track("view_frontend_development_page");
+    });
+    onUnmounted(() => {
+      window.removeEventListener("scroll", sendEvent);
+    });
+    function sendEvent() {
+      const newEvent = events[elementInViewPort(elements.value)];
+      if (newEvent && event !== newEvent) {
+        event = newEvent;
+        $mixpanel.track(event);
+      }
+    }
+  },
+};
+</script>