diff --git a/apps/app/components/core/image-picker-popover.tsx b/apps/app/components/core/image-picker-popover.tsx
index 9a3d5ff2f..8b2edf3fb 100644
--- a/apps/app/components/core/image-picker-popover.tsx
+++ b/apps/app/components/core/image-picker-popover.tsx
@@ -65,7 +65,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-gray-700"
+        className="rounded-md border border-brand-base bg-brand-surface-2 px-2 py-1 text-xs text-brand-secondary"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -79,7 +79,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md bg-brand-surface-2 shadow-lg">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-brand-base bg-brand-surface-2 shadow-lg">
           <div className="h-96 w-80 overflow-auto rounded border border-brand-base bg-brand-surface-2 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
             <Tab.Group>
               <Tab.List as="span" className="inline-block rounded bg-brand-surface-2 p-1">
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 1b82210bd..94b088133 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -231,7 +231,6 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                           error={errors.name}
                           register={register}
                           className="text-xl"
-                          mode="transparent"
                           validations={{
                             required: "Name is required",
                             maxLength: {
@@ -243,46 +242,32 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                       </div>
                     </div>
 
-                    <div>
-                      <Input
-                        id="identifier"
-                        name="identifier"
-                        type="text"
-                        mode="transparent"
-                        className="text-sm"
-                        placeholder="Enter Project Identifier"
-                        error={errors.identifier}
-                        register={register}
-                        onChange={() => setIsChangeIdentifierRequired(false)}
-                        validations={{
-                          required: "Identifier is required",
-                          validate: (value) =>
-                            /^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
-                          minLength: {
-                            value: 1,
-                            message: "Identifier must at least be of 1 character",
-                          },
-                          maxLength: {
-                            value: 5,
-                            message: "Identifier must at most be of 5 characters",
-                          },
-                        }}
-                      />
-                    </div>
-
-                    <div>
-                      <TextArea
-                        id="description"
-                        name="description"
-                        mode="transparent"
-                        className="text-sm"
-                        placeholder="Enter description"
-                        error={errors.description}
-                        register={register}
-                      />
-                    </div>
-
-                    <div className="w-40">
+                    <div className="grid grid-cols-4 gap-4">
+                      <div className="col-span-3">
+                        <Input
+                          id="identifier"
+                          name="identifier"
+                          type="text"
+                          className="text-sm"
+                          placeholder="Enter Project Identifier"
+                          error={errors.identifier}
+                          register={register}
+                          onChange={() => setIsChangeIdentifierRequired(false)}
+                          validations={{
+                            required: "Identifier is required",
+                            validate: (value) =>
+                              /^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
+                            minLength: {
+                              value: 1,
+                              message: "Identifier must at least be of 1 character",
+                            },
+                            maxLength: {
+                              value: 5,
+                              message: "Identifier must at most be of 5 characters",
+                            },
+                          }}
+                        />
+                      </div>
                       <Controller
                         name="network"
                         control={control}
@@ -307,9 +292,20 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                         )}
                       />
                     </div>
+
+                    <div>
+                      <TextArea
+                        id="description"
+                        name="description"
+                        className="text-sm"
+                        placeholder="Enter description"
+                        error={errors.description}
+                        register={register}
+                      />
+                    </div>
                   </div>
 
-                  <div className="mt-5 flex justify-end gap-2 border-t-2 px-4 py-3">
+                  <div className="mt-5 flex justify-end gap-2 border-t-2 border-brand-base px-4 py-3">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Adding project..." : "Add Project"}