diff --git a/package-lock.json b/package-lock.json
index a43cf46..2c8c445 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/cssinjs": "^1.20.0",
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@svgr/webpack": "^8.1.0",
         "@t3-oss/env-nextjs": "^0.10.1",
         "antd": "^5.18.0",
@@ -2099,6 +2102,52 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -6403,7 +6452,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6968,7 +7016,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7620,8 +7667,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
diff --git a/package.json b/package.json
index 6bacad6..8bc87f4 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.20.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "antd": "^5.18.0",
diff --git a/src/app/mike/vote/container/VoteFormContainer.tsx b/src/app/mike/vote/container/VoteFormContainer.tsx
new file mode 100644
index 0000000..719ab83
--- /dev/null
+++ b/src/app/mike/vote/container/VoteFormContainer.tsx
@@ -0,0 +1,21 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PageWithFormTemplate } from "~/components/Templates/PageWithForm/PageWithFormTemplate";
+
+export const VoteFormContainer = () => {
+  const router = useRouter();
+  const [formData, setFormData] = useState<any>({});
+
+  const pagewithformTemplateProps: React.ComponentProps<
+    typeof PageWithFormTemplate
+  > = {
+    pageWithFormHeaderModuleProps: {
+      title: "Vote",
+    },
+    pageWithFormFormModuleProps: {
+      setFormData,
+    },
+  };
+
+  return <PageWithFormTemplate {...pagewithformTemplateProps} />;
+};
diff --git a/src/app/mike/vote/page.tsx b/src/app/mike/vote/page.tsx
new file mode 100644
index 0000000..f745300
--- /dev/null
+++ b/src/app/mike/vote/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { VoteFormContainer } from "./container/VoteFormContainer";
+
+const VoteForm = () => {
+  return <VoteFormContainer />;
+};
+
+export default VoteForm;
diff --git a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx
index 414c1a8..a6f147e 100644
--- a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx
+++ b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx
@@ -9,26 +9,26 @@ type Props = {
 
 export const HeaderAtom = (props: Props) => {
   return (
-    <div className="relative flex h-full w-full items-center justify-center bg-[#FFC96F]">
+    <div className='relative flex h-full w-full items-center justify-center bg-[#FFFFFF]'>
       {/* Sample using custom svg */}
       {props.onClickLeftIcon && (
         <div
-          className="absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
+          className='absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
           onClick={props.onClickLeftIcon}
         >
-          <SVGAtom iconName="arrowLeft" width={20} height={20} color="black" />
+          <SVGAtom iconName='arrowLeft' width={20} height={20} color='black' />
         </div>
       )}
 
-      <div>{props.title}</div>
+      <div className='text-lg font-bold text-black'>{props.title}</div>
 
       {/* Sample using Antd icon */}
       {props.onClickRightIcon && (
         <div
-          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
+          className='absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
           onClick={() => console.log("Antd icon clicked")}
         >
-          <SettingOutlined className="!text-gray-header cursor-pointer text-[20px]" />
+          <SettingOutlined className='!text-gray-header cursor-pointer text-[20px]' />
         </div>
       )}
     </div>
diff --git a/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx b/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx
index d9607f6..ec7dc33 100644
--- a/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx
+++ b/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx
@@ -12,7 +12,11 @@ import {
   ColorPicker,
   Input,
   message,
+  Upload,
 } from "antd";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCamera } from "@fortawesome/free-solid-svg-icons";
+
 const { RangePicker } = DatePicker;
 const { TextArea } = Input;
 
@@ -30,88 +34,70 @@ export const PageWithFormFormModule = (props: Props) => {
   return (
     <Form
       form={form}
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
+      labelCol={{ span: 24 }}
+      wrapperCol={{ span: 24 }}
       onFieldsChange={(changedFields) => {
         props.setFormData((prevData: any) =>
           changedFields.reduce(
             (acc, { name, value }) => ({ ...acc, [name[0]]: value }),
-            prevData,
-          ),
+            prevData
+          )
         );
       }}
-      layout="horizontal"
-      style={{ maxWidth: 600 }}
+      layout='vertical'
+      style={{
+        maxWidth: 600,
+        padding: "20px 24px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        height: "100vh",
+      }}
       onFinish={onFinish}
+      className='bg-white font-medium'
     >
-      <Form.Item label="Radio" name="Radio">
-        <Radio.Group>
-          <Radio value="apple"> Apple </Radio>
-          <Radio value="pear"> Pear </Radio>
-        </Radio.Group>
+      <Form.Item label='Category' name='category'>
+        <Select placeholder='Birthday AD' style={{ height: "55px" }}>
+          <Select.Option value='demo'>Birthday AD</Select.Option>
+        </Select>
       </Form.Item>
-      <Form.Item label="Input" name="Input">
-        <Input />
+      <Form.Item label='Vote Title' name='title'>
+        <Input placeholder='Title' className='h-14' />
       </Form.Item>
-      <Form.Item label="Select" name="Select">
-        <Select>
-          <Select.Option value="demo">Demo</Select.Option>
-        </Select>
+      <Form.Item label='Image' name='image'>
+        <div className='flex h-44 w-full items-center justify-center rounded-lg bg-[#F5F5F5]'>
+          <Upload name='file' listType='picture-card' showUploadList={false}>
+            <FontAwesomeIcon
+              icon={faCamera}
+              className='text-xl text-gray-400'
+            />
+          </Upload>
+        </div>
       </Form.Item>
-      <Form.Item label="TreeSelect" name="TreeSelect">
-        <TreeSelect
-          treeData={[
-            {
-              title: "Light",
-              value: "light",
-              children: [{ title: "Bamboo", value: "bamboo" }],
-            },
-          ]}
+      <Form.Item label='Description' name='description'>
+        <TextArea
+          placeholder='Please write down a description of the event'
+          rows={8}
         />
       </Form.Item>
-      <Form.Item label="Cascader" name="Cascader">
-        <Cascader
-          options={[
-            {
-              value: "zhejiang",
-              label: "Zhejiang",
-              children: [
-                {
-                  value: "hangzhou",
-                  label: "Hangzhou",
-                },
-              ],
-            },
-          ]}
+      <Form.Item label='Start' name='date'>
+        <DatePicker
+          format='YYYY-MM-DD'
+          placeholder='2024-09-06'
+          className='h-14 w-full'
         />
       </Form.Item>
-      <Form.Item label="DatePicker" name="DatePicker">
-        <DatePicker />
-      </Form.Item>
-      <Form.Item label="RangePicker" name="RangePicker">
-        <RangePicker />
-      </Form.Item>
-      <Form.Item label="InputNumber" name="InputNumber">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item label="TextArea" name="TextArea">
-        <TextArea rows={4} />
-      </Form.Item>
-      <Form.Item label="Switch" name="Switch" valuePropName="checked">
-        <Switch />
-      </Form.Item>
-      <Form.Item label="Button" name="Button">
-        <Button>Button</Button>
-      </Form.Item>
-      <Form.Item label="Slider" name="Slider">
-        <Slider />
-      </Form.Item>
-      <Form.Item label="ColorPicker" name="ColorPicker">
-        <ColorPicker />
-      </Form.Item>
-      <div className="flex w-full items-center justify-center">
-        <Button type="primary" htmlType="submit">
-          Submit
+
+      {/* Spacer to push the button down */}
+      <div className='flex-grow'></div>
+
+      <div className='mb-4 flex w-full items-center justify-center'>
+        <Button
+          className='min-h-14 w-full bg-[#2F54EB]'
+          type='primary'
+          htmlType='submit'
+        >
+          <p className='text-xl'>Create Vote</p>
         </Button>
       </div>
     </Form>
diff --git a/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx b/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx
index b52c417..a11e48f 100644
--- a/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx
+++ b/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx
@@ -2,11 +2,9 @@ import { HeaderAtom } from "~/components/Atoms/HeaderAtom/HeaderAtom";
 
 type Props = {
   title: string;
-  onClickLeftIcon: () => void;
+  onClickLeftIcon?: () => void;
 };
 
 export const PageWithFormHeaderModule = (props: Props) => {
-  return (
-    <HeaderAtom title={props.title} onClickLeftIcon={props.onClickLeftIcon} />
-  );
+  return <HeaderAtom title={props.title} />;
 };
diff --git a/src/components/Modules/Vote/VoteBannerModule.tsx b/src/components/Modules/Vote/VoteBannerModule.tsx
new file mode 100644
index 0000000..2039732
--- /dev/null
+++ b/src/components/Modules/Vote/VoteBannerModule.tsx
@@ -0,0 +1,8 @@
+export const VoteBannerModule = () => {
+  return (
+    <div className='mb-4 bg-[#F0F5FF] p-2 p-5 text-left text-lg text-black'>
+      <span className='font-semibold text-blue-600'>10 FAO</span> will be
+      deducted when voting is generated (Amount : 9 FAO)
+    </div>
+  );
+};
diff --git a/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx b/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx
index edff0ac..751833e 100644
--- a/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx
+++ b/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx
@@ -1,5 +1,6 @@
 import { PageWithFormHeaderModule } from "~/components/Modules/PageWithForm/PageWithFormHeaderModule";
 import { PageWithFormFormModule } from "~/components/Modules/PageWithForm/PageWithFormFormModule";
+import { VoteBannerModule } from "~/components/Modules/Vote/VoteBannerModule";
 import { Layout } from "antd";
 import { Content, Header } from "antd/es/layout/layout";
 
@@ -14,11 +15,13 @@ type Props = {
 
 export const PageWithFormTemplate = (props: Props) => {
   return (
-    <Layout style={{ height: "100%" }}>
+    <Layout style={{ height: "100%", backgroundColor: "#FFFFFF" }}>
       <Header style={{ padding: 0, height: 50 }}>
         <PageWithFormHeaderModule {...props.pageWithFormHeaderModuleProps} />
       </Header>
       <Content style={{ overflow: "auto" }}>
+        {/* Vote Info */}
+        <VoteBannerModule />
         <PageWithFormFormModule {...props.pageWithFormFormModuleProps} />
       </Content>
     </Layout>