diff --git a/apps/contact/.gitignore b/apps/contact/.gitignore
new file mode 100644
index 00000000..9b1ee42e
--- /dev/null
+++ b/apps/contact/.gitignore
@@ -0,0 +1,175 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
diff --git a/apps/contact/README.md b/apps/contact/README.md
new file mode 100644
index 00000000..79f357f9
--- /dev/null
+++ b/apps/contact/README.md
@@ -0,0 +1,15 @@
+# @crocoder-dev/contact
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.45. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
diff --git a/apps/contact/index.ts b/apps/contact/index.ts
new file mode 100644
index 00000000..dd2ed56a
--- /dev/null
+++ b/apps/contact/index.ts
@@ -0,0 +1,386 @@
+import { Client, isFullPage } from "@notionhq/client";
+import { Ratelimit } from "@upstash/ratelimit";
+import { Redis } from "@upstash/redis";
+import { nanoid } from "nanoid";
+import z from "zod";
+
+const bodyValidationSchema = z.object({
+  name: z
+    .string()
+    .min(3, { message: "Name must be at least 3 characters long" }),
+  email: z
+    .string()
+    .min(1, { message: "Required field" })
+    .email({ message: "Invalid email adress" }),
+  message: z.string().min(1, { message: "Required field" }),
+  hasConsent: z.boolean().optional(),
+});
+
+type RequestBody = z.infer<typeof bodyValidationSchema>;
+
+const {
+  NOTION_TOKEN,
+  SLACK_CHANNEL,
+  SLACK_BOT_TOKEN,
+  MENTION_EMAILS,
+  MENTION_IDS,
+  NOTION_DATABASE_ID,
+  UPSTASH_REDIS_REST_URL,
+  UPSTASH_REDIS_REST_TOKEN,
+  IS_OFFLINE,
+} = import.meta.env.DEV ? import.meta.env : process.env;
+
+const notion = new Client({ auth: NOTION_TOKEN });
+
+const redis = new Redis({
+  url: UPSTASH_REDIS_REST_URL,
+  token: UPSTASH_REDIS_REST_TOKEN,
+});
+
+const createPayload = (name: string, email: string, url: string) => ({
+  channel: SLACK_CHANNEL,
+  blocks: [
+    {
+      type: "header",
+      text: {
+        type: "plain_text",
+        text: "We have 1 new message(s).",
+        emoji: true,
+      },
+    },
+    {
+      type: "section",
+      text: {
+        type: "mrkdwn",
+        text: `We got a new message from _${name}_ (_${email}_).`,
+      },
+    },
+    {
+      type: "divider",
+    },
+    {
+      type: "section",
+      text: {
+        type: "mrkdwn",
+        text: " ",
+      },
+      accessory: {
+        type: "button",
+        text: {
+          type: "plain_text",
+          text: "Show me the message",
+          emoji: true,
+        },
+        value: "new_message_click",
+        url,
+        action_id: "button-action",
+      },
+    },
+  ],
+});
+
+const notifyContactCreated = async (
+  name: string,
+  email: string,
+  url: string,
+) => {
+  const payload = createPayload(name, email, url);
+  const payloadStringify = JSON.stringify(payload);
+
+  if (IS_OFFLINE) {
+    console.log(payload);
+  } else {
+    try {
+      const result = await fetch("https://slack.com/api/chat.postMessage", {
+        method: "POST",
+        body: payloadStringify,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+          "Content-Length": payloadStringify.length.toString(),
+          Authorization: `Bearer ${SLACK_BOT_TOKEN}`,
+          Accept: "application/json",
+        },
+      });
+      if (result.status !== 200) {
+        throw {
+          statusCode: result.status,
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Credentials": true,
+          },
+        };
+      }
+    } catch (error) {
+      throw error;
+    }
+  }
+};
+
+const mentionPerson = ({ id, email }: { id: string; email: string }) => [
+  {
+    mention: {
+      user: {
+        id,
+        person: {
+          email,
+        },
+      },
+    },
+    plain_text: "",
+    href: null,
+  },
+  {
+    text: {
+      content: " ",
+    },
+  },
+];
+
+const getMentions = () => {
+  if (MENTION_EMAILS && MENTION_IDS) {
+    const emails = MENTION_EMAILS.split(",");
+    const ids = MENTION_IDS.split(",");
+
+    if (emails.length && ids.length) {
+      return ids.map((id, i) => ({
+        id,
+        email: emails[i],
+      }));
+    }
+  }
+  return [];
+};
+
+const mentionPeople = () => {
+  return getMentions().flatMap(mentionPerson);
+};
+
+const createContactObject = (
+  id: string,
+  email: string,
+  name: string,
+  content: string,
+) => ({
+  parent: {
+    database_id: NOTION_DATABASE_ID || "",
+  },
+  properties: {
+    id: {
+      title: [
+        {
+          text: {
+            content: id,
+          },
+        },
+      ],
+    },
+    email: {
+      email,
+    },
+    name: {
+      rich_text: [
+        {
+          text: {
+            content: name,
+          },
+        },
+      ],
+    },
+    date: {
+      date: {
+        start: new Date().toISOString(),
+      },
+    },
+  },
+  children: [
+    {
+      paragraph: {
+        rich_text: [
+          {
+            text: {
+              content,
+            },
+          },
+        ],
+      },
+    },
+    {
+      paragraph: {
+        rich_text: mentionPeople(),
+      },
+    },
+  ],
+});
+
+const createContact = async (
+  id: string,
+  email: string,
+  name: string,
+  content: string,
+) => {
+  try {
+    const response = await notion.pages.create(
+      createContactObject(id, email, name, content),
+    );
+
+    if (response.id && isFullPage(response)) {
+      return response.url;
+    }
+    throw {
+      body: {
+        message: "Failed to create notion page",
+      },
+    };
+  } catch (error) {
+    throw error;
+  }
+};
+
+const processContact = async (event: {
+  id: string;
+  email: string;
+  name: string;
+  message: string;
+}) => {
+  try {
+    const { id, email, name, message } = event;
+
+    if (!id || !email || !name || !message) {
+      throw {
+        body: {
+          message: "Missing id, email, name or message",
+        },
+      };
+    }
+
+    const url = await createContact(
+      `Message from ${name} (${id})`,
+      email,
+      name,
+      message,
+    );
+    await notifyContactCreated(name, email, url);
+  } catch (error) {
+    throw error;
+  }
+};
+
+const allowRequest = async (request: Request & { ip?: string }) => {
+  try {
+    const ip = request.ip ?? "127.0.0.1";
+
+    const ratelimit = new Ratelimit({
+      limiter: Ratelimit.fixedWindow(1, "30 s"),
+      /** Use fromEnv() to automatically load connection secrets from your environment
+       * variables. For instance when using the Vercel integration.
+       *
+       * This tries to load `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` from
+       * your environment using `import.meta.env`.
+       */
+      redis,
+    });
+
+    const response = await ratelimit.limit(ip);
+    return response;
+  } catch (error) {
+    throw {
+      body: {
+        message: error,
+      },
+    };
+  }
+};
+
+export const POST = async (request: Request) => {
+  if (request.headers.get("Content-Type") === "application/json") {
+    try {
+      const body = (await request.json()) as RequestBody;
+      const bodyValidationResult = bodyValidationSchema.safeParse(body);
+
+      if (!body || bodyValidationResult.error) {
+        throw {
+          statusCode: 400,
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Credentials": true,
+          },
+          body: {
+            message: bodyValidationResult.error?.message || "No body was found",
+          },
+        };
+      }
+
+      const { name, email, message, hasConsent } = body;
+
+      if (!hasConsent) {
+        throw {
+          statusCode: 403,
+          body: {
+            message: "No consent by user",
+          },
+        };
+      }
+
+      const { success, limit, reset, remaining } = await allowRequest(request);
+
+      if (!success) {
+        throw {
+          statusCode: 429,
+          body: {
+            message: "Too many requests. Please try again in a minute",
+          },
+        };
+      }
+
+      try {
+        await processContact({
+          id: nanoid(),
+          email,
+          name,
+          message,
+        });
+      } catch (error) {
+        throw error;
+      }
+
+      return new Response(
+        JSON.stringify({
+          message: "Success",
+        }),
+        {
+          status: 200,
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Credentials": "true",
+            "X-RateLimit-Limit": limit.toString(),
+            "X-RateLimit-Remaining": remaining.toString(),
+            "X-RateLimit-Reset": reset.toString(),
+          },
+        },
+      );
+    } catch (error) {
+      const customError = error as Error & {
+        statusCode?: number;
+        body?: {
+          message?: string;
+        };
+        headers?: HeadersInit;
+      };
+
+      console.error("Error - api/contacts", customError);
+
+      return new Response(
+        JSON.stringify({
+          message:
+            customError?.body?.message || "Issue while processing request",
+        }),
+        {
+          status: customError.statusCode || 501,
+          headers: customError?.headers,
+        },
+      );
+    }
+  }
+
+  return new Response(null, { status: 400 });
+};
diff --git a/apps/contact/package.json b/apps/contact/package.json
new file mode 100644
index 00000000..147c9c5e
--- /dev/null
+++ b/apps/contact/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@crocoder-dev/contact",
+  "version": "0.0.1",
+  "main": "index.ts",
+  "dependencies": {
+    "@notionhq/client": "^2.2.15",
+    "@upstash/ratelimit": "^2.0.5",
+    "@upstash/redis": "^1.34.3",
+    "nanoid": "^5.0.9",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  }
+}
\ No newline at end of file
diff --git a/apps/contact/tsconfig.json b/apps/contact/tsconfig.json
new file mode 100644
index 00000000..238655f2
--- /dev/null
+++ b/apps/contact/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
diff --git a/apps/contact/vercel.json b/apps/contact/vercel.json
new file mode 100644
index 00000000..548e73c5
--- /dev/null
+++ b/apps/contact/vercel.json
@@ -0,0 +1,20 @@
+{
+  "installCommand": "curl -fsSL https://bun.sh/install | bash && ~/.bun/bin/bun install --frozen-lockfile",
+  "buildCommand": "~/.bun/bin/bun run build",
+  "functions": {
+    "index.ts": {
+      "memory": 256,
+      "maxDuration": 5,
+      "runtime": "vercel/bun"
+    }
+  },
+  "routes": [
+    {
+      "src": "/",
+      "methods": [
+        "POST"
+      ],
+      "dest": "index.ts"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/website/astro.config.mjs b/apps/website/astro.config.mjs
index dbf17081..12661268 100644
--- a/apps/website/astro.config.mjs
+++ b/apps/website/astro.config.mjs
@@ -1,7 +1,7 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import react from "@astrojs/react";
-import vercel from "@astrojs/vercel/static";
+import vercel from "@astrojs/vercel";
 
 export default defineConfig({
   output: "static",
diff --git a/apps/website/package.json b/apps/website/package.json
index a9b3c115..959d6357 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -9,10 +9,11 @@
     "@crocoder-dev/tailwind": "*",
     "astro": "5.1.2",
     "astro-font": "^0.1.81",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "react-icons": "^5.4.0"
   },
   "scripts": {
     "dev": "astro dev --port 4321",
     "build": "astro build"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/website/public/people-collaborating.png b/apps/website/public/people-collaborating.png
new file mode 100644
index 00000000..a3156005
Binary files /dev/null and b/apps/website/public/people-collaborating.png differ
diff --git a/apps/website/src/components/ContactForm.astro b/apps/website/src/components/BookACallForm.astro
similarity index 60%
rename from apps/website/src/components/ContactForm.astro
rename to apps/website/src/components/BookACallForm.astro
index ff945fa3..39bb49b5 100644
--- a/apps/website/src/components/ContactForm.astro
+++ b/apps/website/src/components/BookACallForm.astro
@@ -7,24 +7,24 @@ import SectionTitle from "./SectionTitle.astro";
 
 <!-- YELLOW-1 = #FEB534 -->
 <Section
-idx="book-a-call-section"
+  idx="book-a-call-section"
   className="bg-[#FEB534] !py-16 md:!py-24"
   contentClassName={`${grid_classes} items-center`}
 >
-<SectionTitle className="col-span-6 md:col-span-10 md:!col-start-2 ">
-  Build Your Business  <br class="xl:hidden sm:block" />With Us
-  <p
-    class="leading-normal text-base font-normal text-left text-[#3C3843] mt-4"
-  >
-  Our software development services helped clients big and small build solutions with a lasting impact.
-  </p>
-</SectionTitle>
+  <SectionTitle className="col-span-6 md:col-span-10 md:!col-start-2 ">
+    Build Your Business <br class="xl:hidden sm:block" />With Us
+    <p
+      class="leading-normal text-base font-normal text-left text-[#3C3843] mt-4"
+    >
+      Our software development services helped clients big and small build
+      solutions with a lasting impact.
+    </p>
+  </SectionTitle>
 
-  
   <div
     class="relative col-span-6 md:col-span-10 md:col-start-2 overflow-hidden flex flex-col justify-center bg-white rounded"
   >
-    <div   id="book-a-call"></div>
+    <div id="book-a-call"></div>
     <CalcomEmbedInline
       calLink="team/crocoder/hello"
       eventType="hello"
diff --git a/apps/website/src/components/ContactUs.astro b/apps/website/src/components/ContactUs.astro
new file mode 100644
index 00000000..e755e523
--- /dev/null
+++ b/apps/website/src/components/ContactUs.astro
@@ -0,0 +1,35 @@
+---
+import * as contactUsContent from "../content/contact/contact-us.md";
+import { Content } from "../content/contact/contact-us.md";
+import { grid_classes } from "./_grid";
+import ContactUsForm from "./ContactUsForm.astro";
+import Section from "./Section.astro";
+import SectionTitle from "./SectionTitle.astro";
+---
+
+<Section
+  className="bg-gray-100 pt-[74px] lg:pt-[78px]"
+  contentClassName={`${grid_classes} items-center py-12`}
+>
+  <div class="col-span-6 md:col-span-12">
+    <SectionTitle
+      set:html={contactUsContent.frontmatter.title}
+      className="text-[#3C3843]"
+    />
+    <p
+      class="leading-normal text-base font-normal text-left text-[#3C3843] mt-4"
+    >
+      <Content />
+    </p>
+  </div>
+  <ContactUsForm />
+  <div class="col-span-6 min-xl:col-span-7 hidden lg:block">
+    <img
+      src={contactUsContent.frontmatter.imgPath}
+      sizes={"(max-width: 1280px) 540px, 720px"}
+      alt={contactUsContent.frontmatter.imgAlt}
+      loading="eager"
+      width={540}
+    />
+  </div>
+</Section>
diff --git a/apps/website/src/components/ContactUsForm.astro b/apps/website/src/components/ContactUsForm.astro
new file mode 100644
index 00000000..95bbab26
--- /dev/null
+++ b/apps/website/src/components/ContactUsForm.astro
@@ -0,0 +1,209 @@
+---
+import Field from "./Field.astro";
+import * as formContent from "../content/contact/form.md";
+import "../styles/loader.css";
+---
+
+<form
+  class="bg-[#F6FCFD] group/contact-us rounded-xl mx-auto col-span-6 md:col-span-12 lg:mx-0 p-7 pb-6 lg:col-span-6 xl:col-span-5 shadow-[0_5px_20px] shadow-neutral-500/25 flex flex-col gap-2 max-w-[530px]"
+  id="contact-us-form"
+  novalidate
+>
+  <Field
+    isTextArea={false}
+    inputProps={{
+      name: "form-full-name",
+      maxlength: "100",
+      placeholder: formContent.frontmatter.fullname,
+      required: true,
+      minlength: 3,
+    }}
+    labelProps={{
+      for: "form-full-name",
+      "aria-hidden": "false",
+    }}
+    label={formContent.frontmatter.fullname}
+    errorText={formContent.frontmatter.fullnameLength}
+  />
+  <Field
+    isTextArea={false}
+    inputProps={{
+      name: "form-email",
+      maxlength: "100",
+      placeholder: formContent.frontmatter.email,
+      type: "email",
+      required: true,
+    }}
+    labelProps={{
+      for: "form-email",
+      "aria-hidden": "false",
+    }}
+    label={formContent.frontmatter.email}
+    errorText={formContent.frontmatter.emailInvalid}
+  />
+  <div>
+    <Field
+      isTextArea
+      textAreaProps={{
+        name: "form-message",
+        maxlength: 1500,
+        minlength: 1,
+        placeholder: formContent.frontmatter.projectInfo,
+        id: "form-message",
+        required: true,
+      }}
+      labelProps={{
+        for: "form-message",
+        "aria-hidden": "false",
+      }}
+      label={formContent.frontmatter.projectInfo}
+      errorText={formContent.frontmatter.requiredField}
+    />
+    <span class="text-[#3C3843] text-xs text-right mt-1 block">
+      <span id="char-counter">0</span>/1500
+    </span>
+  </div>
+  <div class="mt-4">
+    <div class="flex gap-2.5">
+      <input
+        id="form-consent"
+        name="form-consent"
+        type="checkbox"
+        required
+        aria-describedby="form-consent-text"
+        class="h-4 w-4 rounded border-gray-300 text-[#67a807] focus:ring-[#67a807] mt-1 cursor-pointer"
+      />
+      <label
+        set:html={formContent.frontmatter.consent}
+        id="form-consent-text"
+        for="form-consent"
+        class="text-[#3C3843] [&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer"
+      />
+    </div>
+    <button
+      id="form-submit-button"
+      class="rounded-md
+      min-h-14
+      group-invalid/contact-us:pointer-events-none
+      group-invalid/contact-us:opacity-30
+      group-invalid/contact-us:focus-visible:bg-[#85a32a]
+      group-invalid/contact-us:focus-visible:outline-transparent
+      group-invalid/contact-us:focus:bg-[#85a32a]
+      bg-[#85a32a]
+      hover:bg-[#84a22ab3]
+      px-[25px] w-full py-4
+      focus-visible:bg-[#84a22ab3]
+      focus:bg-[#84a22ab3]
+      focus-visible:outline-1
+      focus-visible:outline-[#3C3843]
+      text-center
+      text-[#3C3843]
+      text-base
+      font-medium mt-6"
+    >
+      <span>{formContent.frontmatter.submit}</span>
+      <div class="loader mx-auto hidden"></div>
+    </button>
+    <p id="form-notification" class="text-sm min-h-6 pt-1"></p>
+  </div>
+  <script>
+    import * as notification from "../content/contact/notification.md";
+
+    const messageField = document.getElementById("form-message");
+    const charCounter = document.getElementById("char-counter");
+
+    const form = document.getElementById("contact-us-form");
+
+    const submitBtn = form?.querySelector("#form-submit-button");
+    const submitBtnElems = submitBtn?.querySelectorAll("*");
+    const submitBtnContent = submitBtnElems && submitBtnElems[0];
+    const submitBtnLoader = submitBtnElems && submitBtnElems[1];
+
+    const notificationElem = form?.querySelector("#form-notification");
+
+    const clearForm = () => {
+      if (form) {
+        const fields = form.querySelectorAll("input, textarea");
+        fields.forEach((child) => {
+          if (
+            child.tagName === "INPUT" &&
+            (child as HTMLInputElement).type === "checkbox"
+          ) {
+            (child as HTMLInputElement).checked = false;
+          } else {
+            (child as HTMLInputElement).value = "";
+          }
+        });
+      }
+    };
+
+    const showLoader = () => {
+      if (submitBtnContent && submitBtnLoader) {
+        submitBtnContent.classList.add("hidden");
+        submitBtnLoader.classList.add("!block");
+      }
+    };
+
+    const hideLoader = () => {
+      if (submitBtnContent && submitBtnLoader) {
+        submitBtnContent.classList.remove("hidden");
+        submitBtnLoader.classList.remove("!block");
+      }
+    };
+
+    const updateCount = (e: Event) => {
+      const charCount = `${(e.target as HTMLTextAreaElement).value.length}`;
+      if (charCounter) {
+        charCounter.textContent = charCount;
+      }
+    };
+
+    if (messageField) {
+      messageField.addEventListener("input", updateCount);
+    }
+
+    if (form) {
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target as HTMLFormElement);
+        const name = formData.get("form-full-name");
+        const email = formData.get("form-email");
+        const message = formData.get("form-message");
+        const consent = formData.get("form-consent");
+
+        if (!name || !email || !message || !consent) {
+          return;
+        }
+
+        showLoader();
+        const response = await fetch("/contact.json", {
+          method: "POST",
+          mode: "cors",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name,
+            email,
+            message,
+            hasConsent: consent ? true : false,
+          }),
+        });
+
+        if (response.status !== 200 && notificationElem) {
+          notificationElem.classList.add("text-red-500");
+          notificationElem.textContent = notification.frontmatter.error;
+          hideLoader();
+          return;
+        }
+
+        if (notificationElem) {
+          notificationElem.classList.add("text-[#67a807]");
+          notificationElem.innerHTML = notification.frontmatter.success;
+          hideLoader();
+          clearForm();
+        }
+      });
+    }
+  </script>
+</form>
diff --git a/apps/website/src/components/Field.astro b/apps/website/src/components/Field.astro
new file mode 100644
index 00000000..bd5b89af
--- /dev/null
+++ b/apps/website/src/components/Field.astro
@@ -0,0 +1,140 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import classnames from "classnames";
+
+type BaseProps = {
+  labelProps?: HTMLAttributes<"label">;
+  label?: string;
+  errorText?: string;
+  classNames?: string;
+};
+
+type InputProps = {
+  isTextArea: false;
+  inputProps: HTMLAttributes<"input">;
+};
+
+type TextAreaProps = {
+  isTextArea: true;
+  textAreaProps: HTMLAttributes<"textarea">;
+};
+
+type Props = BaseProps & (InputProps | TextAreaProps);
+
+const { classNames, labelProps, label, errorText } = Astro.props;
+---
+
+<div
+  class={classnames(
+    `min-h-[74px]
+    relative pt-6 overflow-hidden
+    after:absolute
+    after:top-6
+    after:rounded-[6px]
+    after:w-[calc(100%-2px)]
+    after:bg-[#F6FCFD]
+    after:ml-[1px]
+    rounded-[6px]
+    z-[2]
+    flex`,
+    classNames,
+    {
+      "after:h-[46px]": !Astro.props.isTextArea,
+      "after:h-[139px] after:max-h-[139px]": Astro.props.isTextArea,
+    },
+  )}
+>
+  {
+    !Astro.props.isTextArea ? (
+      <input
+        {...Astro.props.inputProps}
+        class="rounded-[6px]
+        h-[46px]
+        border
+        border-transparent
+        bg-transparent
+        placeholder-transparent
+        px-4 py-2.5
+        peer/input
+        relative z-[4]
+        ml-[1px]
+        w-[calc(100%-2px)]
+        focus:outline-0
+        focus:ring-0
+        focus:border-transparent
+        text-[#3C3843]
+       "
+      />
+    ) : (
+      <textarea
+        class={classnames(
+          `min-h-[140px] max-h-[140px]
+          border
+          border-transparent
+          bg-transparent
+          placeholder-transparent
+          px-4 py-2.5
+          relative z-[4]
+          ml-[1px]
+          w-[calc(100%-2px)]
+          peer/input
+          focus:outline-0
+          focus:ring-0
+          focus:border-transparent
+          text-[#3C3843]
+          `,
+          Astro.props.textAreaProps.class,
+        )}
+        {...Astro.props.textAreaProps}
+      />
+    )
+  }
+  <label
+    {...labelProps}
+    class="text-[#3C3843]
+      text-xs
+      min-[375px]:text-sm
+      absolute
+      top-0
+      translate-y-0
+      transition-transform
+      translate-x-0
+      peer-placeholder-shown/input:translate-y-[37px]
+      peer-placeholder-shown/input:translate-x-[17px]
+      peer-placeholder-shown/input:text-base
+      z-[3]
+      [&>span:nth-child(2)]:hidden
+      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:[&>span:first-child]:hidden
+      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:[&>span:nth-child(2)]:inline
+      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:text-red-500"
+  >
+    <span>{label}</span>
+    <span class="truncate text-ellipsis">{errorText || "Invalid field"}</span>
+  </label>
+  <div
+    class={classnames(
+      `absolute
+      w-full 
+      rounded-[6px]
+      bg-[#424c6d50]
+      flex
+      overflow-hidden
+      items-center
+      justify-center
+      peer-focus/input:after:scale-[25]
+      after:h-5
+      after:w-5
+      after:rounded-full
+      after:bg-[#67a807]
+      after:scale-0
+      after:transition-transform
+      after:duration-[400ms]
+      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:bg-red-500`,
+      {
+        "h-[48px] top-[23px]": !Astro.props.isTextArea,
+        "h-[142px] top-[23px]": Astro.props.isTextArea,
+      },
+    )}
+  >
+  </div>
+</div>
diff --git a/apps/website/src/components/footer.astro b/apps/website/src/components/footer.astro
index e6167f82..cc51d019 100644
--- a/apps/website/src/components/footer.astro
+++ b/apps/website/src/components/footer.astro
@@ -1,59 +1,108 @@
+---
+const copyright = `
+ ${new Date().getFullYear()} CroCoder, Inc. All rights reserved.
+`;
+---
+
 <footer
   class="w-full
    px-4 sm:px-7
    py-12 lg:py-16
    overflow-hidden bg-[#3C3843]"
 >
-  <div class="max-w-[100vw] md:max-w-[var(--max-width)] m-auto">
-    <div class="flex">
-      <a
-        class="flex items-center"
-        href="/"
-        aria-label="Crocoder Logo"
+  <div class="max-w-[var(--max-width)] mx-auto">
+    <div
+      class="grid grid-cols-[repeat(3,minmax(min-content,1fr))] grid-rows-[auto_auto_auto_auto] items-center gap-4 lg:grid-cols-[min-content_1fr_min-content]"
+    >
+      <div class="w-[225px] col-span-2 lg:col-span-1">
+        <a class="sm:flex sm:items-center" href="/" aria-label="Crocoder Logo">
+          <img
+            width={64}
+            height={30}
+            alt="Crocoder Crocodile Logo"
+            src="./images/crocoder-logo.png"
+            class="h-[48px] w-auto"
+          />
+          <img
+            width={153}
+            height={24}
+            alt="Crocoder Text Logo"
+            src="./images/crocoder-text.svg"
+            class="pl-2 hidden h-6 w-auto md:block
+              md:[&[data-navhidden='false']]:opacity-0
+              md:[&[data-navhidden='']]:opacity-100"
+            data-navhidden
+          />
+        </a>
+      </div>
+      <div
+        class="flex flex-col md:flex-row gap-4 text-left w-fit col-span-3 lg:col-span-1 lg:grow lg:justify-center lg:w-full"
       >
-        <img
-          width={64}
-          height={30}
-          alt="Crocoder Crocodile Logo"
-          src="./images/crocoder-logo.png"
-          class="ml-[-2px] h-[48px] w-auto"
-        />
-        <img
-          width={153}
-          height={24}
-          alt="Crocoder Text Logo"
-          src="./images/crocoder-text.svg"
-          class="pl-2  h-6 w-auto md:block
-      md:[&[data-navhidden='false']]:opacity-0
-      md:[&[data-navhidden='']]:opacity-100"
-          data-navhidden
-        />
-      </a>
-      <div class="flex-1"></div>
-      <!-- <div class="flex flex-col gap-2 align-middle items-start">
-        <a
-          class="font-medium text-sm text-[#E8E8E8] hover:text-white whitespace-nowrap"
-          href="/blog"
+        <a href="/" class="text-white w-fit block whitespace-nowrap">Home</a>
+        <a href="/blog" class="text-white w-fit block whitespace-nowrap">Blog</a
         >
-          For CTOs
-        </a>
-        <a
-          class="font-medium text-sm text-[#E8E8E8] hover:text-white"
-          href="/blog"
+        <a href="/contact" class="text-white w-fit block whitespace-nowrap">
+          Contact</a
         >
-          Blog
-        </a>
-      </div> -->
-      <div class="flex-1"/>
-    </div>
-
-    <div class="text-[11px] mt-4 relative -bottom-4 text-white font-light">
-      The content and information provided on this website are intended solely
-      for marketing and promotional purposes. This website is a collaborative
-      platform representing the interests of both CroCoder, Inc. and Abram
-      j.d.o.o. Please be advised that the materials and information available on
-      this site are designed to promote the products, services, and initiatives
-      of the aforementioned companies.
+      </div>
+      <div
+        class="flex items-center col-span-3 row-start-4 min-[400px]:col-span-1 min-[400px]:col-start-3 min-[400px]:justify-end lg:row-start-1"
+      >
+        <div class="flex space-x-4">
+          <a
+            href="https://www.youtube.com/channel/UCWU6cnq4hp4LnunPhP-sAqA"
+            aria-label="Go to CroCoder YouTube page"
+            class="flex items-center justify-center w-10 h-10 bg-white text-black rounded-full"
+            rel="nofollow noopener noreferrer"
+          >
+            <svg
+              stroke="#3c3843"
+              fill="#3c3843"
+              stroke-width="0"
+              viewBox="0 0 576 512"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+              ></path>
+            </svg>
+          </a>
+          <a
+            href="https://www.linkedin.com/company/crocoderdev"
+            aria-label="Go to CroCoder Linked In page"
+            class="flex items-center justify-center w-10 h-10 bg-white text-black rounded-full"
+            rel="nofollow noopener noreferrer"
+          >
+            <svg
+              stroke="#3c3843"
+              fill="#3c3843"
+              stroke-width="0"
+              viewBox="0 0 448 512"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+              ></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+      <hr class="border-t border-gray-600 col-span-3" />
+      <p class="text-xs text-white col-span-2">
+        &copy;{copyright}
+      </p>
+      <p class="text-xs col-span-3 text-white font-light">
+        The content and information provided on this website are intended solely
+        for marketing and promotional purposes. This website is a collaborative
+        platform representing the interests of both CroCoder, Inc. and Abram
+        j.d.o.o. Please be advised that the materials and information available
+        on this site are designed to promote the products, services, and
+        initiatives of the aforementioned companies.
+      </p>
     </div>
   </div>
 </footer>
diff --git a/apps/website/src/components/hero.astro b/apps/website/src/components/hero.astro
index 5250c210..9b9340ae 100644
--- a/apps/website/src/components/hero.astro
+++ b/apps/website/src/components/hero.astro
@@ -1,71 +1,67 @@
 ---
-import { grid_classes } from './_grid';
-import Section from './Section.astro';
+import { grid_classes } from "./_grid";
+import Section from "./Section.astro";
 ---
 
-<Section className='!py-0 !px-0'>
+<Section className="!py-0 !px-0">
   <div
     class={`${grid_classes} bg-[#3C3843] xl:rounded-b-2xl overflow-hidden pt-[75px]`}
   >
     <div
-      class='row-start-1
+      class="row-start-1
       col-start-1 md:!col-start-2
       col-span-6
       md:col-span-8
       xl:col-span-6 text-white my-auto
-      px-7 md:pr-0 py-12 md:py-16 lg:px-0 z-10'
+      px-7 md:pr-0 py-12 md:py-16 lg:px-0 z-10"
     >
-      <h1 class='font-medium text-3xl sm:text-5xl lg:text-6xl !leading-normal'>
-        <span class='fadeInUp' style='animation-delay: 100ms;'
+      <h1 class="font-medium text-3xl sm:text-5xl lg:text-6xl !leading-normal">
+        <span class="fadeInUp" style="animation-delay: 100ms;"
           >Building Software</span
         >
         <br />
         <span
-          class='fadeInUp'
-          style='animation-delay: 500ms;animation-fill-mode: backwards;'
+          class="fadeInUp"
+          style="animation-delay: 500ms;animation-fill-mode: backwards;"
           >That Builds Your Business</span
         >
       </h1>
       <div
-        class='text-lg sm:text-xl lg:text-2xl !leading-normal py-7 font-light'
+        class="text-lg sm:text-xl lg:text-2xl !leading-normal py-7 font-light"
       >
         <span
-          class='fadeInUp'
-          style='animation-delay: 900ms;animation-fill-mode: backwards;'
+          class="fadeInUp"
+          style="animation-delay: 900ms;animation-fill-mode: backwards;"
           >Experienced Tech Consultancy Delivering</span
         ><br />
         <span
-          class='fadeInUp'
-          style='animation-delay: 1100ms;animation-fill-mode: backwards;'
+          class="fadeInUp"
+          style="animation-delay: 1100ms;animation-fill-mode: backwards;"
           >Enterprise-Grade Web Development</span
         >
         <br />
       </div>
-      <div class='flex flex-col sm:flex-row gap-[10px]'>
-        <div
-          class='bg-[#FEC343] rounded-md px-[25px] py-4 text-center'
-        >
+      <div class="flex flex-col sm:flex-row gap-[10px]">
+        <div class="bg-[#FEC343] rounded-md px-[25px] py-4 text-center">
           <a
-            href='#book-a-call-section'
-            class='text-[#1E1A1A] text-base font-medium'
+            href="#book-a-call-section"
+            class="text-[#1E1A1A] text-base font-medium"
           >
             Book a call
           </a>
         </div>
-        <!-- <div
-          class='bg-white rounded-md px-[25px] py-4 text-center'
-        >
+        <div class="bg-white rounded-md px-[25px] py-4 text-center">
           <a
-            href='/'
-            class='text-[#1E1A1A] hover:text-gray-700 rounded-md text-base font-medium'
+            href="/contact"
+            class="text-[#1E1A1A] hover:text-gray-700 rounded-md text-base font-medium"
           >
             Contact us
           </a>
-        </div> -->
+        </div>
       </div>
     </div>
     <div
-      class='left-12 min-[875px]:left-0
+      class="left-12 min-[875px]:left-0
       hidden
       md:flex
       row-start-2
@@ -77,24 +73,24 @@ import Section from './Section.astro';
       relative
       md:col-span-4
       md:col-start-9
-      md:row-start-1 z-0 py-16'
+      md:row-start-1 z-0 py-16"
     >
-      <img src='/Hero-2.png' alt='' class='w-[160%] max-w-[200%]' />
+      <img src="/Hero-2.png" alt="" class="w-[160%] max-w-[200%]" />
     </div>
   </div>
-  <div class='flex flex-wrap gap-7 justify-center my-8 lg:my-10 px-4 '>
-    <img src='/conductor.svg' alt='' class='grayscale opacity-50 w-[200px]' />
+  <div class="flex flex-wrap gap-7 justify-center my-8 lg:my-10 px-4">
+    <img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
     <img
-      src='/lynes.svg'
-      alt=''
-      class='grayscale opacity-50 w-[200px] md:hidden xl:block'
+      src="/lynes.svg"
+      alt=""
+      class="grayscale opacity-50 w-[200px] md:hidden xl:block"
     />
     <img
-      src='/submix.svg'
-      alt=''
-      class='grayscale invert opacity-50 w-[200px]'
+      src="/submix.svg"
+      alt=""
+      class="grayscale invert opacity-50 w-[200px]"
     />
-    <img src='/sevdesk.svg' alt='' class='grayscale opacity-50 w-[200px]' />
-    <img src='/misterspex.svg' alt='' class='grayscale opacity-50 w-[200px]' />
+    <img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+    <img src="/misterspex.svg" alt="" class="grayscale opacity-50 w-[200px]" />
   </div>
 </Section>
diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index 5633e881..f6f501c0 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -2,12 +2,11 @@
   class="fixed
     m-auto
     mx:0
-    max-w-[100vw]
+    w-screen
+    max-w-screen
     top-0
-    w-full
     md:mx-2
     md:top-1
-    md:w-auto
     md:[&_[data-navhidden]]:duration-700
     md:[&_[data-navhidden]]:!overflow-hidden
     md:[&_[data-navhidden]]:ease-in-out
@@ -19,6 +18,8 @@
 >
   <nav
     class="bg-[#3C3843E5]
+      md:w-fit
+      mx-auto
       flex
       items-center
       justify-between
@@ -83,16 +84,8 @@
     >
       <ul
         data-navhidden
-        class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative top-1"
+        class="flex flex-col md:flex-row gap-7 mx-7 md:mx-0 md:ml-20 md:w-auto relative"
       >
-        <li>
-          <a
-            class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white whitespace-nowrap"
-            href="/blog"
-          >
-            For CTOs
-          </a>
-        </li>
         <li>
           <a
             class="font-medium text-2xl md:text-lg text-[#E8E8E8] hover:text-white"
@@ -103,21 +96,8 @@
         </li>
       </ul>
       <ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
-        <li>
-          <a
-            id="book-a-call-action"
-            class="flex w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90
-          md:[&[data-navhidden='false']]:!w-auto
-          md:[&[data-navhidden='false']]:!px-4
-          md:[&[data-navhidden='false']]:opacity-0
-          md:[&[data-navhidden='']]:opacity-100
-          md:[&[data-navhidden='']]:delay-100"
-            data-navhidden="false"
-            href="#book-a-call-section"
-          >
-            Book a call
-          </a>
-          <li class="hidden">
+        <ul class="flex gap-4 mx-7 md:ml-4 md:mx-4">
+          <li data-navhidden>
             <a
               class="flex font-medium w-fit h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#FEC343] text-[#1E1A1A] hover:opacity-90"
               href="/contact"
@@ -125,7 +105,20 @@
               Contact us
             </a>
           </li>
-        </li>
+          <li>
+            <a
+              id="book-a-call-action"
+              class="flex w-fit font-medium h-[45px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90
+              md:[&[data-navhidden='false']]:!w-auto
+              md:[&[data-navhidden='false']]:!px-4
+              md:[&[data-navhidden='false']]:opacity-0
+              md:[&[data-navhidden='']]:opacity-100
+              md:[&[data-navhidden='']]:delay-100"
+              data-navhidden="false"
+              href="#book-a-call-section">Book a call</a
+            >
+          </li>
+        </ul>
       </ul>
     </div>
   </nav>
@@ -143,7 +136,7 @@
     const currentScrollTop =
       window.scrollY || document.documentElement.scrollTop;
     const valuesWrapper = document.getElementById("values-wrapper");
-    const valuesWrapperTop = valuesWrapper.offsetHeight;
+    const valuesWrapperTop = valuesWrapper ? valuesWrapper.offsetHeight : 0;
 
     // Do not request animation frame if past the top half of the page
     if (currentScrollTop > valuesWrapperTop) return;
diff --git a/apps/website/src/content/contact/contact-us.md b/apps/website/src/content/contact/contact-us.md
new file mode 100644
index 00000000..00054f31
--- /dev/null
+++ b/apps/website/src/content/contact/contact-us.md
@@ -0,0 +1,7 @@
+---
+title: "Build Your Business With Us"
+imgPath: "/people-collaborating.png"
+imgAlt: "Group of people working on their laptops and collaborating"
+---
+
+Our software development services helped clients big and small build solutions with a lasting impact.
diff --git a/apps/website/src/content/contact/form.md b/apps/website/src/content/contact/form.md
new file mode 100644
index 00000000..1797796f
--- /dev/null
+++ b/apps/website/src/content/contact/form.md
@@ -0,0 +1,10 @@
+---
+fullname: "Full name *"
+fullnameLength: "Name must be at least 3 characters."
+requiredField: "This is a required field."
+email: "E-mail *"
+emailInvalid: "Email you entered is not valid."
+projectInfo: "Tell us about your project *"
+consent: "I give consent to <em><b>Cro</b>Coder</em> to use this information to contact me."
+submit: "Submit"
+---
diff --git a/apps/website/src/content/contact/notification.md b/apps/website/src/content/contact/notification.md
new file mode 100644
index 00000000..c03908a1
--- /dev/null
+++ b/apps/website/src/content/contact/notification.md
@@ -0,0 +1,4 @@
+---
+success: "Thank you for contacting us! We will reach soon."
+error: "Looks like something went wrong. Please try again."
+---
diff --git a/apps/website/src/env.d.ts b/apps/website/src/env.d.ts
index acef35f1..ae5f5871 100644
--- a/apps/website/src/env.d.ts
+++ b/apps/website/src/env.d.ts
@@ -1,2 +1,18 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly NOTION_TOKEN: string;
+  readonly SLACK_CHANNEL: string;
+  readonly IS_OFFLINE: string;
+  readonly SLACK_BOT_TOKEN: string;
+  readonly MENTION_EMAILS: string;
+  readonly MENTION_IDS: string;
+  readonly NOTION_DATABASE_ID: string;
+  readonly UPSTASH_REDIS_REST_URL: string;
+  readonly UPSTASH_REDIS_REST_TOKEN: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro
new file mode 100644
index 00000000..cf922a1f
--- /dev/null
+++ b/apps/website/src/pages/contact.astro
@@ -0,0 +1,15 @@
+---
+import ContactUs from "../components/ContactUs.astro";
+import Footer from "../components/footer.astro";
+import Navigation from "../components/navigation.astro";
+import Base from "../layouts/base.astro";
+import "../styles/main.css";
+---
+
+<Base>
+  <Navigation />
+  <main class="min-h-[calc(100vh-244px)]">
+    <ContactUs />
+  </main>
+  <Footer />
+</Base>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 8dc33da1..c87ffdd3 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,13 +1,13 @@
 ---
-import '../styles/main.css';
-import Hero from '../components/hero.astro';
-import Values from '../components/Values.astro';
-import Navigation from '../components/navigation.astro';
-import Base from '../layouts/base.astro';
-import Testimonial from '../components/testimonial.astro';
-import ContactForm from '../components/ContactForm.astro';
-import Footer from '../components/footer.astro';
-import Services from '../components/Services.astro';
+import BookACallForm from "../components/BookACallForm.astro";
+import Footer from "../components/footer.astro";
+import Hero from "../components/hero.astro";
+import Navigation from "../components/navigation.astro";
+import Services from "../components/Services.astro";
+import Testimonial from "../components/testimonial.astro";
+import Values from "../components/Values.astro";
+import Base from "../layouts/base.astro";
+import "../styles/main.css";
 ---
 
 <Base>
@@ -16,6 +16,6 @@ import Services from '../components/Services.astro';
   <Values />
   <Services />
   <Testimonial />
-  <ContactForm />
+  <BookACallForm />
   <Footer />
 </Base>
diff --git a/apps/website/src/pages/privacy_policy.astro b/apps/website/src/pages/privacy_policy.astro
new file mode 100644
index 00000000..78631360
--- /dev/null
+++ b/apps/website/src/pages/privacy_policy.astro
@@ -0,0 +1,117 @@
+---
+import Footer from "../components/footer.astro";
+import Navigation from "../components/navigation.astro";
+import Section from "../components/Section.astro";
+import Base from "../layouts/base.astro";
+import "../styles/main.css";
+
+const contentClasses = "[&>h2]:font-bold [&>h2]:text-2xl [&>h2]:my-5";
+---
+
+<Base>
+  <Navigation />
+  <main class="min-h-[calc(100vh-244px)] pt-[74px] md:pt-[78px] text-[#3C3843]">
+    <Section
+      className="pb-5 md:pt-20 md:pb-5 lg:pt-20 lg:pb-5"
+      contentClassName="[&>h1]:font-bold [&>h1]:text-3xl [&>h1]:mb-5"
+    >
+      <h1>Privacy Policy</h1>
+      <p>
+        Owner of the CroCoder trademark is CROCODER, INC., Lanište 3D, Zagreb,
+        Croatia.
+        <br />
+        <br />
+        In this policy "we", "us", etc. refers to CROCODER, INC.
+        <br />
+        <br />
+        This Privacy Policy applies to crocoder.dev and jobs.crocoder.dev. We respect
+        your privacy and are committed to protecting personally identifiable information
+        you may provide us through the Website. We have adopted this privacy policy
+        ("Privacy Policy") to explain what information may be collected on our Website,
+        how we use this information, and under what circumstances we may disclose
+        the information to third parties. This Privacy Policy applies only to information
+        we collect through the Website and does not apply to our collection of information
+        from other sources. This Privacy Policy, together with the Terms and conditions
+        posted on our Website, set forth the general rules and policies governing
+        your use of our Website. Depending on your activities when visiting our Website,
+        you may be required to agree to additional terms and conditions.
+      </p>
+    </Section>
+
+    <Section className="!py-0 !pb-5" contentClassName={contentClasses}>
+      <h2>Website Visitors</h2>
+
+      <p>
+        Like most website operators, we collect non-personally-identifying
+        information of the sort that web browsers and servers typically make
+        available, such as the browser type, language preference, referring
+        site, and the date and time of each visitor request. Our purpose in
+        collecting non-personally identifying information is to better
+        understand how our visitors use our websites. From time to time, we may
+        release non-personally-identifying information in the aggregate, e.g.,
+        by publishing a report on trends in the usage of its website. We do not
+        collect potentially personally-identifying information like Internet
+        Protocol (IP) addresses.
+      </p>
+    </Section>
+
+    <Section className="!py-0 !pb-5" contentClassName={contentClasses}>
+      <h2>Gathering of Personally-Identifying Information</h2>
+
+      <p>
+        Certain visitors to our websites choose to interact with them in ways
+        that require us to gather personally-identifying information. The amount
+        and type of information that we gather depends on the nature of the
+        interaction. For example, we ask visitors leave information on contact
+        form to provide their name and email address for the purpose of
+        contacting them.
+      </p>
+    </Section>
+
+    <Section className="!py-0 !pb-5" contentClassName={contentClasses}>
+      <h2>Links To External Sites</h2>
+
+      <p>
+        Our Service may contain links to external sites that are not operated by
+        us. If you click on a third party link, you will be directed to that
+        third party's site. We strongly advise you to review the Privacy Policy
+        and terms and conditions of every site you visit. We have no control
+        over, and assume no responsibility for the content, privacy policies or
+        practices of any third party sites, products or services.
+      </p>
+    </Section>
+
+    <Section className="!py-0 !pb-5" contentClassName={contentClasses}>
+      <h2>Aggregated Statistics</h2>
+
+      <p>
+        We may collect statistics about the behavior of visitors to its website.
+        We may display this information publicly or provide it to others.
+        However, we do not collect and disclose any personally-identifying
+        information to any party.
+      </p>
+    </Section>
+
+    <Section
+      className="pt-0 lg:pt-0 lg:pb-24"
+      contentClassName={contentClasses}
+    >
+      <h2>Privacy Policy Changes</h2>
+
+      <p>
+        Although most changes are likely to be minor, we may change its Privacy
+        Policy from time to time, and in our sole discretion. We encourage
+        visitors to frequently check this page for any changes to its Privacy
+        Policy. Your continued use of this site after any change in this Privacy
+        Policy will constitute your acceptance of such change.
+        <br />
+        <br />
+        If you have any questions about this Privacy Policy, please contact us via
+        <a class="underline" href="mailto:hello@crocoder.dev"
+          >hello@crocoder.dev</a
+        >.
+      </p>
+    </Section>
+  </main>
+  <Footer />
+</Base>
diff --git a/apps/website/src/pages/terms.astro b/apps/website/src/pages/terms.astro
new file mode 100644
index 00000000..10e1778a
--- /dev/null
+++ b/apps/website/src/pages/terms.astro
@@ -0,0 +1,84 @@
+---
+import Footer from "../components/footer.astro";
+import Navigation from "../components/navigation.astro";
+import Section from "../components/Section.astro";
+import Base from "../layouts/base.astro";
+import "../styles/main.css";
+
+const contentClasses = "[&>h2]:font-bold [&>h2]:text-2xl [&>h2]:my-5";
+---
+
+<Base>
+  <Navigation />
+  <main class="min-h-[calc(100vh-244px)] pt-[74px] md:pt-[78px] text-[#3C3843]">
+    <Section
+      className="pb-5 md:pt-20 md:pb-5 lg:pt-20 lg:pb-5"
+      contentClassName="[&>h1]:font-bold [&>h1]:text-3xl [&>h1]:mb-5"
+    >
+      <h1>Terms of use</h1>
+      <p>
+        Owner of the CroCoder trademark is CROCODER, INC., Lanište 3D, Zagreb,
+        Croatia.
+        <br />
+        <br />
+        These Terms of use applies to crocoder.dev and jobs.crocoder.dev.
+        <br />
+        <br />
+        By accessing this website we assume you accept these terms and conditions
+        in full. Do not continue to use our websites if you do not accept all the
+        terms and conditions stated on this page. The following terminology applies
+        to these Terms and Conditions, Privacy Statement and Disclaimer Notice and
+        any or all Agreements: "Client", "You" and "You" refers to you, the person
+        accessing this website and accepting the Company's terms and conditions.
+        "The Company", "Ourselves", "We", "Our" and "Us", refers to our Company.
+        "Party", "Parties", or "Us", refers to both the Client and ourselves, or
+        either the Client or ourselves. All terms refer to the offer, acceptance
+        and consideration of payment necessary to undertake the process of our assistance
+        to the Client in the most appropriate manner, whether by formal meetings
+        of a fixed duration, or any other means, for the express purpose of meeting
+        the Client's needs in respect of provision of the Company's stated services/products,
+        in accordance with and subject to, prevailing law of Delaware, USA. Any use
+        of the above terminology or other words in the singular, plural, capitalization
+        and/or he/she or they, are taken as interchangeable and therefore as referring
+        too same.
+      </p>
+    </Section>
+
+    <Section className="!py-0 !pb-5" contentClassName={contentClasses}>
+      <h2>License</h2>
+
+      <p>
+        Unless otherwise stated, CROCODER, INC. and/or it's licensors own the
+        intellectual property rights for all material on our websites. All
+        intellectual property rights are reserved. You may view and/or print
+        pages from our websites for your own personal use subject to
+        restrictions set in these terms and conditions. You must not sell, rent
+        or sub-license material from our websites and redistribute content from
+        our websites (unless content is specifically made for redistribution).
+      </p>
+    </Section>
+    <Section
+      className="pt-0 lg:pt-0 lg:py-24"
+      contentClassName={contentClasses}
+    >
+      <h2>Removal of links from our website</h2>
+
+      <p>
+        If you find any link on our Website or any linked website objectionable
+        for any reason, you may contact us about this. We will consider requests
+        to remove links but will have no obligation to do so or to respond
+        directly to you. Whilst we endeavor to ensure that the information on
+        this website is correct, we do not warrant its completeness or accuracy;
+        nor do we commit to ensuring that the website remains available or that
+        the material on the website is kept up to date.
+        <br />
+        <br />
+        If you have any questions about this Terms of use, please contact us via
+        <a class="underline" href="mailto:hello@crocoder.dev"
+          >hello@crocoder.dev</a
+        >.
+      </p>
+    </Section>
+  </main>
+  <Footer />
+</Base>
diff --git a/apps/website/src/styles/loader.css b/apps/website/src/styles/loader.css
new file mode 100644
index 00000000..ce462ca9
--- /dev/null
+++ b/apps/website/src/styles/loader.css
@@ -0,0 +1,146 @@
+.loader {
+  color: #3c3843;
+  font-size: 16px;
+  text-indent: -9999em;
+  overflow: hidden;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  transform: translateZ(0);
+  animation:
+    load6 1.7s infinite ease,
+    round 1.7s infinite ease;
+}
+@keyframes load6 {
+  0% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+
+  5%,
+  95% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+
+  10%,
+  59% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em,
+      -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+
+  20% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em,
+      -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+
+  38% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em,
+      -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+
+  100% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+}
+@keyframes load6 {
+  0% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+
+  5%,
+  95% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+
+  10%,
+  59% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.087em -0.825em 0 -0.42em,
+      -0.173em -0.812em 0 -0.44em,
+      -0.256em -0.789em 0 -0.46em,
+      -0.297em -0.775em 0 -0.477em;
+  }
+
+  20% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.338em -0.758em 0 -0.42em,
+      -0.555em -0.617em 0 -0.44em,
+      -0.671em -0.488em 0 -0.46em,
+      -0.749em -0.34em 0 -0.477em;
+  }
+
+  38% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      -0.377em -0.74em 0 -0.42em,
+      -0.645em -0.522em 0 -0.44em,
+      -0.775em -0.297em 0 -0.46em,
+      -0.82em -0.09em 0 -0.477em;
+  }
+
+  100% {
+    box-shadow:
+      0 -0.83em 0 -0.4em,
+      0 -0.83em 0 -0.42em,
+      0 -0.83em 0 -0.44em,
+      0 -0.83em 0 -0.46em,
+      0 -0.83em 0 -0.477em;
+  }
+}
+@keyframes round {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes round {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/apps/website/vercel.json b/apps/website/vercel.json
index 51c72c1e..ef2b1933 100644
--- a/apps/website/vercel.json
+++ b/apps/website/vercel.json
@@ -25,4 +25,4 @@
       "destination": "https://crocoder-company-blog.vercel.app/rss.xml"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 13ce7f81..3540c2e3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 5c86c5e4..33d6fc8b 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "packages/*"
   ],
   "dependencies": {
-    "prettier": "^3.4.2",
     "@astrojs/react": "^3.6.2",
     "classnames": "^2.5.1",
+    "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1"
   }
 }
diff --git a/turbo.json b/turbo.json
index 158acd0b..a7c5dc80 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,5 +18,16 @@
       "cache": false,
       "persistent": true
     }
-  }
+  },
+  "globalEnv": [
+    "UPSTASH_REDIS_REST_URL",
+    "UPSTASH_REDIS_REST_TOKEN",
+    "MENTION_IDS",
+    "MENTION_EMAILS",
+    "SLACK_CHANNEL",
+    "NOTION_TOKEN",
+    "SLACK_BOT_TOKEN",
+    "NOTION_DATABASE_ID",
+    "SITE_URL"
+  ]
 }