diff --git a/packages/nextjs/app/_components/ApplyEligibilityLink.tsx b/packages/nextjs/app/_components/ApplyEligibilityLink.tsx
new file mode 100644
index 0000000..fc9979c
--- /dev/null
+++ b/packages/nextjs/app/_components/ApplyEligibilityLink.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import Link from "next/link";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { useAccount } from "wagmi";
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/outline";
+import { useBGBuilderData } from "~~/hooks/useBGBuilderData";
+
+type BuilderStatus = "notConnected" | "notMember" | "eligible";
+
+const FeedbackMessage = ({ builderStatus }: { builderStatus: BuilderStatus }) => {
+  if (builderStatus === "notConnected") {
+    return (
+      <div className="leading-snug">
+        <p>
+          🔎 <strong>Connect your wallet</strong> to verify eligibility.
+        </p>
+      </div>
+    );
+  }
+  if (builderStatus === "notMember") {
+    return (
+      <div className="leading-snug">
+        <p className="-mb-2">
+          ❌ <strong>Not a BuidlGuidl member.</strong>
+        </p>
+        <p>
+          Join by completing challenges at{" "}
+          <a href="https://speedrunethereum.com" target="_blank" rel="noopener noreferrer" className="underline">
+            speedrunethereum.com
+          </a>
+        </p>
+      </div>
+    );
+  }
+  // builderStatus is "eligible"
+  return (
+    <div className="leading-snug">
+      <p className="-mb-2">
+        ✅ <strong>You are eligible to apply!</strong>
+      </p>
+      <p>Participate in the grants program as a member.</p>
+    </div>
+  );
+};
+
+export const ApplyEligibilityLink = () => {
+  const { isConnected, address: connectedAddress } = useAccount();
+  const { isBuilderPresent, isLoading: isFetchingBuilderData } = useBGBuilderData(connectedAddress);
+  const { openConnectModal } = useConnectModal();
+
+  const builderStatus: BuilderStatus =
+    !isConnected || isFetchingBuilderData ? "notConnected" : !isBuilderPresent ? "notMember" : "eligible";
+
+  return (
+    <div className="mx-auto lg:m-0 flex flex-col items-start bg-white px-6 py-2 pb-6 font-spaceGrotesk space-y-1 w-4/5 rounded-2xl text-left">
+      <p className="text-2xl font-semibold mb-0">Do you qualify?</p>
+      <FeedbackMessage builderStatus={builderStatus} />
+      {builderStatus === "eligible" ? (
+        <Link
+          href="/apply"
+          className="btn px-4 md:px-8 btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl shadow-none font-medium bg-customGreen hover:bg-customGreen hover:opacity-80"
+        >
+          <LockOpenIcon className="h-5 w-5 mr-1 inline-block" />
+          APPLY FOR A GRANT
+        </Link>
+      ) : (
+        <button
+          className={`btn px-4 md:px-8 btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl shadow-none font-medium ${
+            builderStatus === "notConnected" ? "btn-primary" : "btn-warning cursor-not-allowed"
+          }`}
+          onClick={() => {
+            if (!isConnected && openConnectModal) openConnectModal();
+          }}
+        >
+          {isFetchingBuilderData ? (
+            <span className="loading loading-spinner h-5 w-5"></span>
+          ) : (
+            <LockClosedIcon className="h-5 w-5 mr-1 inline-block" />
+          )}
+          {!isConnected ? "CONNECT WALLET" : "APPLY FOR A GRANT"}
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/_components/CommunityGrant.tsx b/packages/nextjs/app/_components/CommunityGrant.tsx
index 7c35b16..997ba99 100644
--- a/packages/nextjs/app/_components/CommunityGrant.tsx
+++ b/packages/nextjs/app/_components/CommunityGrant.tsx
@@ -1,12 +1,12 @@
 import Image from "next/image";
-import Link from "next/link";
+import { ApplyEligibilityLink } from "./ApplyEligibilityLink";
 
 export const CommunityGrant = () => {
   return (
     <div id="communityGrants" className="bg-secondary">
       <div className="container max-w-[90%] sm:max-w-md lg:max-w-[90%] xl:max-w-7xl m-auto xl:pl-4 lg:pt-10 flex flex-col-reverse lg:flex-row gap-5 lg:gap-0 my-6 lg:my-0">
         {/* Left section(Title, desc and btn) */}
-        <div className="my-4 lg:py-16 space-y-2 lg:max-w-[40%] flex flex-col items-center lg:items-start">
+        <div className="my-4 lg:py-16 space-y-2 lg:max-w-[45%] flex flex-col items-center lg:items-start">
           {/* Title  */}
           <div>
             <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial mb-0 lg:mb-2">
@@ -31,12 +31,7 @@ export const CommunityGrant = () => {
               Are you a BG member eager to make an impact in the ecosystem? At BuidlGuidl, we&apos;re excited to support
               your builds. We offer sponsorships of up to 1 ETH for projects that drive the community forward.
             </p>
-            <Link
-              href="/apply"
-              className="btn bg-white hover:opacity-90 hover:bg-white btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl px-6 shadow-none font-medium"
-            >
-              Apply for a grant
-            </Link>
+            <ApplyEligibilityLink />
           </div>
         </div>
         {/* Right section (Who, process, payment, etc) */}
diff --git a/packages/nextjs/app/api/grants/new/route.ts b/packages/nextjs/app/api/grants/new/route.ts
index 3cdd18f..9cf4dfc 100644
--- a/packages/nextjs/app/api/grants/new/route.ts
+++ b/packages/nextjs/app/api/grants/new/route.ts
@@ -19,14 +19,14 @@ export async function POST(req: Request) {
   try {
     const { title, description, signature, signer } = (await req.json()) as ReqBody;
 
-    if (!title || !description || !signature || !signer) {
-      return NextResponse.json({ error: "Invalid form details submited" }, { status: 400 });
+    if (!title || !description || !signature || !signer || description.length > 750 || title.length > 75) {
+      return NextResponse.json({ error: "Invalid form details submitted" }, { status: 400 });
     }
 
     // Verif if the builder is present
     const builder = await findUserByAddress(signer);
     if (!builder.exists) {
-      return NextResponse.json({ error: "Only buidlguild builders can submit for grants" }, { status: 401 });
+      return NextResponse.json({ error: "Only Buidlguidl builders can submit for grants" }, { status: 401 });
     }
 
     const recoveredAddress = await recoverTypedDataAddress({
diff --git a/packages/nextjs/app/apply/_component/Form.tsx b/packages/nextjs/app/apply/_component/Form.tsx
index 2205abf..0ac9c4d 100644
--- a/packages/nextjs/app/apply/_component/Form.tsx
+++ b/packages/nextjs/app/apply/_component/Form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import SubmitButton from "./SubmitButton";
 import useSWRMutation from "swr/mutation";
@@ -16,8 +17,11 @@ type ReqBody = {
   signer?: string;
 };
 
+const MAX_DESCRIPTION_LENGTH = 750;
+
 const Form = () => {
   const { address: connectedAddress } = useAccount();
+  const [descriptionLength, setDescriptionLength] = useState(0);
   const { signTypedDataAsync } = useSignTypedData();
   const router = useRouter();
   const { trigger: postNewGrant } = useSWRMutation("/api/grants/new", postMutationFetcher<ReqBody>);
@@ -60,7 +64,7 @@ const Form = () => {
   };
 
   return (
-    <div className="card card-compact rounded-xl w-96 bg-secondary shadow-lg mb-12">
+    <div className="card card-compact rounded-xl max-w-[95%] w-[500px] bg-secondary shadow-lg mb-12">
       <form action={clientFormAction} className="card-body space-y-3">
         <h2 className="card-title self-center text-3xl !mb-0">Submit Proposal</h2>
         <div className="space-y-2">
@@ -68,22 +72,28 @@ const Form = () => {
           <div className="flex border-2 border-base-300 bg-base-200 rounded-xl text-accent">
             <input
               className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-gray-400"
-              placeholder="title"
+              placeholder="Proposal title"
               name="title"
               autoComplete="off"
               type="text"
+              maxLength={75}
             />
           </div>
         </div>
         <div className="space-y-2">
           <p className="m-0 text-xl ml-2">Description</p>
-          <div className="flex border-2 border-base-300 bg-base-200 rounded-xl text-accent">
+          <div className="flex flex-col border-2 border-base-300 bg-base-200 rounded-xl text-accent">
             <textarea
-              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 px-4 pt-2 border w-full font-medium placeholder:text-accent/50 text-gray-400 h-28 rounded-none"
-              placeholder="description"
+              className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 px-4 pt-2 border w-full font-medium placeholder:text-accent/50 text-gray-400 h-28 md:h-52 rounded-none"
+              placeholder="Proposal description"
               name="description"
               autoComplete="off"
+              maxLength={MAX_DESCRIPTION_LENGTH}
+              onChange={e => setDescriptionLength(e.target.value.length)}
             />
+            <p className="my-1">
+              {descriptionLength} / {MAX_DESCRIPTION_LENGTH}
+            </p>
           </div>
         </div>
         <SubmitButton />
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index ebe53d0..feef71a 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -22,7 +22,7 @@ module.exports = {
           "base-content": "#212638",
           info: "#93BBFB",
           success: "#34EEB6",
-          warning: "#FFCF72",
+          warning: "#FEC297",
           error: "#FF8863",
 
           ".tooltip": {
@@ -72,7 +72,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        customBlue: '#D5DAFF',
+        customBlue: "#D5DAFF",
+        customGreen: "#DDFFB3",
       },
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",