diff --git a/app/api/endpoints/payment.py b/app/api/endpoints/payment.py
index caeaf6e..2597661 100644
--- a/app/api/endpoints/payment.py
+++ b/app/api/endpoints/payment.py
@@ -1 +1,132 @@
-my route
\ No newline at end of file
+'use client'
+
+import { useForm } from 'react-hook-form'
+import { ArrowUp, CheckCircle, Package2 } from 'lucide-react'
+import { useState } from 'react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
+import { Textarea } from '~/components/ui/textarea'
+import CodeGenService from '~/app/api/services/code-gen-service'
+import { useParams } from 'next/navigation'
+
+type FormData = {
+  message: string
+}
+
+interface CodeProps {
+  setCode: (newCode: string) => void
+}
+
+const Rightpanel: React.FC<CodeProps> = ({ setCode }) => {
+  const { register, handleSubmit, reset, watch } = useForm<FormData>()
+
+  const [textInput, setTextInput] = useState<string[]>([])
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+  const { projectId } = useParams() as { projectId: string }
+
+  const messageValue = watch('message', '') // watch the input value
+
+  const handleTextSubmit = async (data: FormData) => {
+    setTextInput((prevMessages) => [...prevMessages, data.message])
+    try {
+      const codeGenService = new CodeGenService()
+      const response = await codeGenService.generateCode({
+        project_id: projectId,
+        endpoint_description: data.message,
+      })
+      setSuccessMessage('Code generated successfully!')
+      setTimeout(() => setSuccessMessage(null), 3000) // Hide after 3 seconds
+      reset()
+      const { content_base64 } = response
+      setCode(atob(content_base64))
+      console.log(response)
+    } catch (error) {
+      console.error('Error generating code:', error)
+    }
+  }
+
+  return (
+    <div className="size-full max-w-[400px] flex-1 shrink-0 border border-l border-neutral-100">
+      <Tabs
+        defaultValue="code-chat"
+        className="flex h-full flex-col items-start justify-start"
+      >
+        <TabsList className="w-full justify-start border-b border-neutral-100 bg-transparent">
+          <TabsTrigger value="code-chat" className="">
+            Code chat
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent
+          value="code-chat"
+          className="flex w-full flex-1 flex-col px-2 py-2"
+        >
+          <div className="flex h-full max-h-[600px] flex-1 flex-col justify-center gap-[3rem] overflow-y-auto">
+            {!textInput.length ? (
+              <div className="flex flex-col items-center gap-2 py-[14px] font-[inter]">
+                <Package2 className="mb-2 h-[40px] w-[40px] text-[#7A69EE]" />
+                <h5 className="text-[14px] font-medium text-[#212121]">
+                  No tasks running yet
+                </h5>
+                <small className="text-center text-[12px] font-normal text-[#6B6B6B]">
+                  As you generate endpoints the progress will be displayed here
+                </small>
+              </div>
+            ) : (
+              <div className="w-full">
+                {textInput.map((msg, index) => (
+                  <div key={index} className="mb-4">
+                    <div className="w-[90%] rounded-md bg-[#F8F8F8] p-2">
+                      <p className="px-2 text-[14px]">
+                        {msg} something is the messag e
+                      </p>
+                    </div>
+
+                    <div className="mt-2 p-2">
+                      <p>Code Generated succesfully</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          {/* Success Message */}
+          {successMessage && (
+            <div className="bg-green-100 text-green-700 absolute bottom-[140px] left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-md p-2 shadow-md">
+              <CheckCircle className="h-5 w-5" />
+              <span>{successMessage}</span>
+            </div>
+          )}
+
+          <form
+            onSubmit={handleSubmit(handleTextSubmit)}
+            className="shadow-aiChat mt-4 gap-8 border-[1px] border-[#EDEDED] p-3"
+          >
+            <Textarea
+              {...register('message')}
+              rows={4}
+              className="resize-none border-none p-0 outline-none focus:outline-none focus-visible:ring-0"
+              placeholder="Describe the next API you want to build."
+            />
+
+            <div className="flex items-center justify-end">
+              <button
+                type="submit"
+                className={`rounded-md px-[14px] py-2 ${
+                  !messageValue.trim()
+                    ? 'cursor-not-allowed bg-[#C2C2C6]'
+                    : 'cursor-pointer bg-black'
+                }`}
+                title="Submit"
+                disabled={!messageValue.trim()}
+              >
+                <ArrowUp className="h-[30px] w-[36px]" color="#F5F5F7" />
+              </button>
+            </div>
+          </form>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+export default Rightpanel