diff --git a/config/content/CA.js b/config/content/CA.js
new file mode 100644
index 0000000..7544b69
--- /dev/null
+++ b/config/content/CA.js
@@ -0,0 +1,32 @@
+export const CADetails = {
+  title: 'Campus Ambassador Program',
+  content: [
+    {
+      title: 'Perks',
+      list: [
+        'Certificate of appreciation',
+        'Free merchandise and gift hampers on completion of certain milestones',
+        'Free of cost access to webinar and workshop',
+        'Publicity in social media handles',
+        'Special discount for next fest by NIT Rourkela',
+        'Building network and personal connections',
+      ],
+    },
+    {
+      title: 'Procedure',
+      list: [
+        'Register yourself for INNOVISION at inno.nitrkl.in',
+        'Go to CA program',
+        'Click on Register as CA',
+        'Register as CA',
+        'Your Mobile Number is your Unique Referral Code',
+        'Help your friends register themselves and apply the unique Referral code',
+        'Win Goodies and Hampers',
+      ],
+    },
+  ],
+  button: {
+    text: 'Register as CA',
+    link: 'https://forms.gle/i1tzjmebnmySJsLb9',
+  },
+};
diff --git a/config/content/Footer.js b/config/content/Footer.js
index 09dd973..619fdf7 100644
--- a/config/content/Footer.js
+++ b/config/content/Footer.js
@@ -29,6 +29,11 @@ export default {
         name: 'Refund Policy',
         link: 'https://drive.google.com/file/d/1cLnuEBtt7yFfC1dQeFVOP0Oxf_hsCTzb/view',
       },
+      {
+        id: 5,
+        name: 'CA Program',
+        link: '/campus-ambassador',
+      },
     ],
   },
   information: [
diff --git a/src/components/CAProgram/CAProgram.jsx b/src/components/CAProgram/CAProgram.jsx
new file mode 100644
index 0000000..96c960a
--- /dev/null
+++ b/src/components/CAProgram/CAProgram.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Body1, Heading2, Heading3, SectionLayout } from '../shared';
+import { CADetails } from '../../../config/content/CA';
+import { ButtonContainer, ItemsContainer, PerksContainer } from './styles';
+import Button from '../shared/Button';
+
+const CAProgram = () => (
+  <SectionLayout>
+    <Heading2
+      style={{
+        marginLeft: '15px',
+      }}
+    >
+      {CADetails.title}
+    </Heading2>
+    <ItemsContainer
+      style={{
+        marginLeft: '15px',
+      }}
+    >
+      {CADetails.content.map((item) => (
+        <div
+          key={item.title}
+          style={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '24px',
+          }}
+        >
+          <Heading3
+            style={{
+              color: '#91F9D3',
+            }}
+          >
+            {item.title}
+          </Heading3>
+          <PerksContainer>
+            {item.list.map((listItem, index) => (
+              <Body1 key={listItem}>
+                {index + 1}. {listItem}
+              </Body1>
+            ))}
+          </PerksContainer>
+        </div>
+      ))}
+    </ItemsContainer>
+    <ButtonContainer>
+      <Button text={CADetails.button.text} variant='filled' link={CADetails.button.link} />
+    </ButtonContainer>
+  </SectionLayout>
+);
+
+export default CAProgram;
diff --git a/src/components/CAProgram/styles.js b/src/components/CAProgram/styles.js
new file mode 100644
index 0000000..9e3599b
--- /dev/null
+++ b/src/components/CAProgram/styles.js
@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export const PerksContainer = styled.div`
+  ${tw`
+    flex
+    flex-col
+    gap-2
+  `}
+`;
+
+export const ItemsContainer = styled.div`
+  ${tw`
+    w-[95%]
+    mx-auto
+    flex
+    flex-col
+    gap-10
+    mt-10
+  `}
+
+  @media (max-width: 512px) {
+    width: 100%;
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  ${tw`
+    md:w-[50%]
+    mx-auto
+    w-[40%]
+    flex
+    justify-center
+    mt-[20px]
+  `}
+`;
diff --git a/src/pages/campus-ambassador.js b/src/pages/campus-ambassador.js
new file mode 100644
index 0000000..30144f0
--- /dev/null
+++ b/src/pages/campus-ambassador.js
@@ -0,0 +1,7 @@
+/* eslint-disable max-len */
+import React from 'react';
+import CAProgram from '../components/CAProgram/CAProgram';
+
+const CampusAmbassador = () => <CAProgram />;
+
+export default CampusAmbassador;
diff --git a/src/pages/playground.js b/src/pages/playground.js
index d60526b..9678d65 100644
--- a/src/pages/playground.js
+++ b/src/pages/playground.js
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import HeroSection from '../components/HeroSection/HeroSection';
+import CAProgram from '../components/CAProgram/CAProgram';
 
 const Playground = () => (
   <>
@@ -10,7 +10,7 @@ const Playground = () => (
       <title>Playground</title>
       <meta name='description' content='This is playground' />
     </Helmet>
-    <HeroSection />
+    <CAProgram />
   </>
 );