diff --git a/__tests__/components/waves/memes/submission/details/ArtworkDetails.test.tsx b/__tests__/components/waves/memes/submission/details/ArtworkDetails.test.tsx
index 41d52eef10..da0525a71d 100644
--- a/__tests__/components/waves/memes/submission/details/ArtworkDetails.test.tsx
+++ b/__tests__/components/waves/memes/submission/details/ArtworkDetails.test.tsx
@@ -19,8 +19,8 @@ describe('ArtworkDetails', () => {
         onDescriptionBlur={onDescriptionBlur}
       />
     );
-    const title = screen.getByLabelText('Artwork Title');
-    const desc = screen.getByLabelText('Description');
+    const title = screen.getByLabelText(/Artwork Title/);
+    const desc = screen.getByLabelText(/Description/);
     await user.clear(title);
     await user.type(title, 'new');
     await user.tab();
@@ -37,11 +37,34 @@ describe('ArtworkDetails', () => {
     const { rerender } = render(
       <ArtworkDetails title="one" description="two" onTitleChange={() => {}} onDescriptionChange={() => {}} />
     );
-    const title = screen.getByLabelText('Artwork Title') as HTMLInputElement;
+    const title = screen.getByLabelText(/Artwork Title/) as HTMLInputElement;
     expect(title.value).toBe('one');
     rerender(
       <ArtworkDetails title="three" description="two" onTitleChange={() => {}} onDescriptionChange={() => {}} />
     );
     expect(title.value).toBe('three');
   });
+
+  it('uses neutral required markers and subtle success rings for filled fields', () => {
+    render(
+      <ArtworkDetails
+        title="Filled title"
+        description="Filled description"
+        onTitleChange={() => {}}
+        onDescriptionChange={() => {}}
+      />
+    );
+
+    const requiredMarkers = screen.getAllByText('*');
+    requiredMarkers.forEach((marker) => {
+      expect(marker).toHaveClass('tw-text-iron-500');
+    });
+
+    expect(screen.getByLabelText(/Artwork Title/)).toHaveClass(
+      'tw-ring-emerald-500/30'
+    );
+    expect(screen.getByLabelText(/Description/)).toHaveClass(
+      'tw-ring-emerald-500/30'
+    );
+  });
 });
diff --git a/__tests__/components/waves/memes/traits/DropdownTrait.test.tsx b/__tests__/components/waves/memes/traits/DropdownTrait.test.tsx
index 9ea4336012..1efc766478 100644
--- a/__tests__/components/waves/memes/traits/DropdownTrait.test.tsx
+++ b/__tests__/components/waves/memes/traits/DropdownTrait.test.tsx
@@ -1,36 +1,91 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DropdownTrait } from '@/components/waves/memes/traits/DropdownTrait';
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DropdownTrait } from "@/components/waves/memes/traits/DropdownTrait";
 
-jest.mock('components/waves/memes/traits/TraitWrapper', () => ({
-  TraitWrapper: ({ children }: any) => <div data-testid="wrapper">{children}</div>
+jest.mock("components/waves/memes/traits/TraitWrapper", () => ({
+  TraitWrapper: ({ children, labelRightAdornment }: any) => (
+    <div data-testid="wrapper">
+      <div data-testid="label-adornment">{labelRightAdornment}</div>
+      {children}
+    </div>
+  ),
 }));
 
-describe('DropdownTrait', () => {
-  const traits = { rarity: 'Common' } as any;
-  const options = ['Common', 'Rare'];
+describe("DropdownTrait", () => {
+  const traits = { rarity: "Common" } as any;
+  const options = ["Common", "Rare"];
 
-  it('updates value on change and blur', () => {
+  it("updates value on change and blur", () => {
     const updateText = jest.fn();
     const onBlur = jest.fn();
     render(
-      <DropdownTrait label="Rarity" field="rarity" traits={traits} updateText={updateText} options={options} onBlur={onBlur} />
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={traits}
+        updateText={updateText}
+        options={options}
+        onBlur={onBlur}
+      />
     );
-    const select = screen.getByRole('combobox');
-    fireEvent.change(select, { target: { value: 'Rare' } });
-    expect(updateText).toHaveBeenCalledWith('rarity', 'Rare');
+    const select = screen.getByRole("combobox");
+    fireEvent.change(select, { target: { value: "Rare" } });
+    expect(updateText).toHaveBeenCalledWith("rarity", "Rare");
     fireEvent.blur(select);
-    expect(onBlur).toHaveBeenCalledWith('rarity');
+    expect(onBlur).toHaveBeenCalledWith("rarity");
   });
 
-  it('syncs when traits change', () => {
+  it("syncs when traits change", () => {
     const { rerender } = render(
-      <DropdownTrait label="Rarity" field="rarity" traits={traits} updateText={jest.fn()} options={options} />
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={traits}
+        updateText={jest.fn()}
+        options={options}
+      />
     );
-    const select = screen.getByRole('combobox') as HTMLSelectElement;
-    expect(select.value).toBe('Common');
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("Common");
+    expect(select).toHaveClass("tw-ring-emerald-500/30");
     rerender(
-      <DropdownTrait label="Rarity" field="rarity" traits={{ rarity: 'Rare' } as any} updateText={jest.fn()} options={options} />
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={{ rarity: "Rare" } as any}
+        updateText={jest.fn()}
+        options={options}
+      />
     );
-    expect(select.value).toBe('Rare');
+    expect(select.value).toBe("Rare");
+    expect(select).toHaveClass("tw-ring-emerald-500/30");
+  });
+
+  it("uses muted text for the empty option and bright text for a selected option", () => {
+    const updateText = jest.fn();
+    render(
+      <DropdownTrait
+        label="Rarity"
+        field="rarity"
+        traits={{ rarity: "" } as any}
+        updateText={updateText}
+        options={options}
+      />
+    );
+
+    const select = screen.getByRole("combobox");
+    const iconContainer = screen.getByTestId("label-adornment")
+      .firstElementChild as HTMLElement;
+    expect((select as HTMLSelectElement).style.color).toBe(
+      "rgb(132, 132, 144)"
+    );
+    expect(iconContainer).toHaveClass("tw-hidden");
+
+    fireEvent.change(select, { target: { value: "Rare" } });
+
+    expect((select as HTMLSelectElement).style.color).toBe(
+      "rgb(239, 239, 241)"
+    );
+    expect(iconContainer).not.toHaveClass("tw-hidden");
+    expect(updateText).toHaveBeenCalledWith("rarity", "Rare");
   });
 });
diff --git a/__tests__/components/waves/memes/traits/TextTrait.test.tsx b/__tests__/components/waves/memes/traits/TextTrait.test.tsx
index f0b85e1659..22f99bf97e 100644
--- a/__tests__/components/waves/memes/traits/TextTrait.test.tsx
+++ b/__tests__/components/waves/memes/traits/TextTrait.test.tsx
@@ -42,8 +42,10 @@ test("syncs input when traits change", () => {
   );
   const input = screen.getByRole("textbox") as HTMLInputElement;
   expect(input.value).toBe("one");
+  expect(input).toHaveClass("tw-ring-emerald-500/30");
   rerender(
-    <TextTrait label="Label" field="title" traits={{ title: "two" } as any} updateText={updateText} />
+    <TextTrait label="Label" field="title" traits={{ title: "" } as any} updateText={updateText} />
   );
-  expect(input.value).toBe("two");
+  expect(input.value).toBe("");
+  expect(input).toHaveClass("tw-ring-iron-700");
 });
diff --git a/__tests__/components/waves/memes/traits/TraitWrapper.test.tsx b/__tests__/components/waves/memes/traits/TraitWrapper.test.tsx
new file mode 100644
index 0000000000..03ae5ee21a
--- /dev/null
+++ b/__tests__/components/waves/memes/traits/TraitWrapper.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { TraitWrapper } from "@/components/waves/memes/traits/TraitWrapper";
+
+describe("TraitWrapper", () => {
+  it("shows a neutral required marker for standard fields", () => {
+    render(
+      <TraitWrapper label="Label">
+        <input />
+      </TraitWrapper>
+    );
+
+    const requiredMarker = screen.getByText("*");
+    expect(requiredMarker).toHaveClass("tw-text-iron-500");
+  });
+
+  it("shows a neutral required marker for boolean fields", () => {
+    render(
+      <TraitWrapper label="Toggle" isBoolean>
+        <button type="button">Yes</button>
+      </TraitWrapper>
+    );
+
+    const requiredMarker = screen.getByText("*");
+    expect(requiredMarker).toHaveClass("tw-text-iron-500");
+  });
+
+  it("hides the required marker for read-only fields", () => {
+    render(
+      <TraitWrapper label="Read Only" readOnly>
+        <input />
+      </TraitWrapper>
+    );
+
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+});
diff --git a/components/waves/memes/MemesArtSubmissionFile.tsx b/components/waves/memes/MemesArtSubmissionFile.tsx
index 93e7323994..1b8c44030a 100644
--- a/components/waves/memes/MemesArtSubmissionFile.tsx
+++ b/components/waves/memes/MemesArtSubmissionFile.tsx
@@ -12,6 +12,8 @@ import { motion } from "framer-motion";
 import { AuthContext } from "@/components/auth/Auth";
 import { TabToggle } from "@/components/common/TabToggle";
 import SandboxedExternalIframe from "@/components/common/SandboxedExternalIframe";
+import type { CommonSelectItem } from "@/components/utils/select/CommonSelect";
+import CommonTabs from "@/components/utils/select/tabs/CommonTabs";
 
 import FilePreview from "./file-upload/components/FilePreview";
 import UploadArea from "./file-upload/components/UploadArea";
@@ -28,12 +30,17 @@ import {
   ALLOWED_INTERACTIVE_MEDIA_MIME_TYPES,
   DEFAULT_INTERACTIVE_MEDIA_MIME_TYPE,
   INTERACTIVE_MEDIA_PROVIDERS,
+  type InteractiveMediaProvider,
 } from "./submission/constants/media";
 
 const renderPreviewMessage = (primary: string, secondary: string) => (
-  <div className="tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-center tw-gap-3 tw-px-4 tw-text-center tw-text-sm tw-text-iron-400">
-    <span>{primary}</span>
-    <span className="tw-text-iron-500">{secondary}</span>
+  <div className="tw-flex tw-h-full tw-w-full tw-flex-col tw-items-center tw-justify-center tw-p-6 tw-text-center">
+    <span className="tw-mb-2 tw-text-sm tw-font-medium tw-tracking-wide tw-text-iron-300">
+      {primary}
+    </span>
+    <span className="tw-text-xs tw-font-medium tw-tracking-wide tw-text-iron-500">
+      {secondary}
+    </span>
   </div>
 );
 
@@ -164,25 +171,25 @@ const MemesArtSubmissionFile: React.FC<MemesArtSubmissionFileProps> = ({
     [setMediaSource, onExternalMimeTypeChange]
   );
 
-  const providerOptions = useMemo(
+  const providerOptions = useMemo<
+    readonly CommonSelectItem<InteractiveMediaProvider>[]
+  >(
     () =>
       INTERACTIVE_MEDIA_PROVIDERS.map((provider) => ({
         key: provider.key,
         label: provider.label,
-        panelId: `memes-art-submission-provider-${provider.key}`,
+        value: provider.key,
       })),
     []
   );
 
   const handleProviderSelect = useCallback(
-    (key: string) => {
-      if (key === externalProvider) {
+    (provider: InteractiveMediaProvider) => {
+      if (provider === externalProvider) {
         return;
       }
 
-      if (key === "ipfs" || key === "arweave") {
-        onExternalProviderChange(key);
-      }
+      onExternalProviderChange(provider);
     },
     [externalProvider, onExternalProviderChange]
   );
@@ -262,166 +269,179 @@ const MemesArtSubmissionFile: React.FC<MemesArtSubmissionFileProps> = ({
   }, [externalMimeType]);
 
   return (
-    <div className="tw-flex tw-min-h-0 tw-flex-col tw-gap-4 lg:tw-h-full">
-      <div className="tw-w-full tw-max-w-md tw-rounded-lg tw-border tw-border-iron-800 tw-bg-iron-950 tw-p-1">
+    <div className="tw-flex tw-min-h-0 tw-flex-col lg:tw-h-full">
+      <div className="tw-mb-4 tw-flex-shrink-0 tw-border-0 tw-border-b tw-border-solid tw-border-iron-800/60">
         <TabToggle
           options={tabOptions}
           activeKey={mediaSource}
           onSelect={handleTabSelect}
-          fullWidth
         />
       </div>
-
-      {showUploadUi ? (
-        <motion.div
-          id="memes-art-submission-upload-panel"
-          ref={dropAreaRef}
-          {...(!artworkUploaded && !prefersReducedMotion
-            ? { whileHover: { scale: 1.002 } }
-            : {})}
-          className={`tw-group tw-relative tw-min-h-[280px] tw-w-full tw-overflow-hidden tw-rounded-xl tw-bg-gradient-to-br tw-from-iron-900 tw-to-iron-950 sm:tw-min-h-[340px] lg:tw-h-full lg:tw-min-h-0 ${
-            visualState === "dragging"
-              ? "tw-border-2 tw-border-primary-500/60"
-              : ""
-          } ${visualState === "invalid" ? "tw-border-2 tw-border-red/60" : ""} ${
-            visualState === "idle" && !artworkUploaded
-              ? "hover:tw-border hover:tw-border-iron-700/80"
-              : ""
-          } tw-transition-all tw-duration-300 ${artworkUploaded ? "" : "tw-cursor-pointer"} `}
-          onDragEnter={handleDragEnter}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onClick={!artworkUploaded ? handleAreaClick : undefined}
-          role={artworkUploaded ? undefined : "button"}
-          tabIndex={artworkUploaded ? -1 : 0}
-          aria-label="Upload artwork"
-          onKeyDown={handleKeyDown}
-          aria-describedby={error ? "file-upload-error" : undefined}
-          data-testid="artwork-upload-area"
-        >
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept={SUBMISSION_FILE_INPUT_ACCEPT}
-            className="tw-hidden"
-            onChange={handleFileInputChange}
-            data-testid="artwork-file-input"
-          />
-
-          {!browserSupport.supported && browserSupport.reason && (
-            <BrowserWarning reason={browserSupport.reason} />
-          )}
-
-          {!artworkUploaded ? (
-            <UploadArea
-              visualState={visualState}
-              error={error}
-              hasRecoveryOption={state.hasRecoveryOption}
-              onRetry={handleRetry}
-            />
-          ) : (
-            <FilePreview
-              url={previewUrl}
-              file={currentFile}
-              onRemove={handleRemoveFile}
-              videoCompatibility={videoCompatibility}
-              isCheckingCompatibility={isCheckingCompatibility}
-            />
-          )}
-        </motion.div>
-      ) : (
-        <div
-          id="memes-art-submission-interactive-panel"
-          className={`tw-flex tw-min-h-[280px] tw-flex-col tw-gap-4 tw-rounded-xl tw-border tw-border-iron-800 tw-bg-gradient-to-br tw-from-iron-900 tw-to-iron-950 tw-p-4 sm:tw-min-h-[340px] lg:tw-min-h-0 lg:tw-flex-1`}
-        >
-          <div className="tw-flex tw-flex-col tw-gap-2">
-            <span className="tw-text-sm tw-font-medium tw-text-iron-200">
-              Hosting Network
-            </span>
-            <div className="tw-inline-flex tw-rounded-lg tw-border tw-border-iron-800 tw-bg-iron-900 tw-p-1">
-              <TabToggle
-                options={providerOptions}
-                activeKey={externalProvider}
-                onSelect={handleProviderSelect}
-              />
-            </div>
-          </div>
-
-          <div className="tw-flex tw-flex-col tw-gap-2">
-            <label
-              htmlFor="memes-interactive-media-hash"
-              className="tw-text-sm tw-font-medium tw-text-iron-200"
-            >
-              Content Hash or Path
-            </label>
+      <div
+        className={`tw-min-h-0 tw-flex-1 tw-overflow-hidden ${
+          showUploadUi
+            ? ""
+            : "tw-pb-4 desktop-hover:hover:tw-scrollbar-thumb-iron-300 lg:tw-overflow-y-auto lg:tw-scrollbar-thin lg:tw-scrollbar-track-iron-800 lg:tw-scrollbar-thumb-iron-500"
+        }`}
+      >
+        {showUploadUi ? (
+          <motion.div
+            id="memes-art-submission-upload-panel"
+            ref={dropAreaRef}
+            {...(!artworkUploaded && !prefersReducedMotion
+              ? { whileHover: { scale: 1.002 } }
+              : {})}
+            className={`tw-group tw-relative tw-min-h-[280px] tw-w-full tw-overflow-hidden tw-rounded-xl tw-bg-gradient-to-br tw-from-iron-900 tw-to-iron-950 sm:tw-min-h-[340px] lg:tw-h-full lg:tw-min-h-0 ${
+              visualState === "dragging"
+                ? "tw-border-2 tw-border-primary-500/60"
+                : ""
+            } ${visualState === "invalid" ? "tw-border-2 tw-border-red/60" : ""} ${
+              visualState === "idle" && !artworkUploaded
+                ? "hover:tw-border hover:tw-border-iron-700/80"
+                : ""
+            } tw-transition-all tw-duration-300 ${artworkUploaded ? "" : "tw-cursor-pointer"} `}
+            onDragEnter={handleDragEnter}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={!artworkUploaded ? handleAreaClick : undefined}
+            role={artworkUploaded ? undefined : "button"}
+            tabIndex={artworkUploaded ? -1 : 0}
+            aria-label="Upload artwork"
+            onKeyDown={handleKeyDown}
+            aria-describedby={error ? "file-upload-error" : undefined}
+            data-testid="artwork-upload-area"
+          >
             <input
-              id="memes-interactive-media-hash"
-              type="text"
-              autoComplete="off"
-              className="tw-w-full tw-rounded-lg tw-border tw-border-iron-700 tw-bg-iron-900 tw-px-3 tw-py-2 tw-text-sm tw-text-iron-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-600"
-              placeholder="bafy.../index.html"
-              value={externalHash}
-              onChange={(event) => onExternalHashChange(event.target.value)}
-              aria-invalid={Boolean(externalError)}
+              ref={fileInputRef}
+              type="file"
+              accept={SUBMISSION_FILE_INPUT_ACCEPT}
+              className="tw-hidden"
+              onChange={handleFileInputChange}
+              data-testid="artwork-file-input"
             />
-            {externalError && (
-              <p className="tw-text-red-400 tw-text-xs">{externalError}</p>
-            )}
-            {externalConstructedUrl && !externalError && (
-              <p className="tw-text-xs tw-text-iron-400">
-                Resulting URL{" "}
-                <span className="tw-text-iron-100">
-                  {externalConstructedUrl}
-                </span>
-              </p>
+
+            {!browserSupport.supported && browserSupport.reason && (
+              <BrowserWarning reason={browserSupport.reason} />
             )}
-          </div>
 
-          <div className="tw-flex tw-flex-col tw-gap-2">
-            <span className="tw-text-sm tw-font-medium tw-text-iron-200">
-              Media Type
-            </span>
-            <div className="tw-flex tw-w-full tw-items-center tw-justify-between tw-rounded-lg tw-border tw-border-iron-700 tw-bg-iron-900 tw-px-3 tw-py-2 tw-text-sm tw-text-iron-200">
-              <span>{mediaTypeLabel}</span>
-              <span className="tw-text-xs tw-text-iron-500">
-                Fixed to interactive HTML (text/html)
+            {!artworkUploaded ? (
+              <UploadArea
+                visualState={visualState}
+                error={error}
+                hasRecoveryOption={state.hasRecoveryOption}
+                onRetry={handleRetry}
+              />
+            ) : (
+              <FilePreview
+                url={previewUrl}
+                file={currentFile}
+                onRemove={handleRemoveFile}
+                videoCompatibility={videoCompatibility}
+                isCheckingCompatibility={isCheckingCompatibility}
+              />
+            )}
+          </motion.div>
+        ) : (
+          <div
+            id="memes-art-submission-interactive-panel"
+            className={`tw-flex tw-min-h-[280px] tw-flex-col tw-gap-6 tw-p-4 sm:tw-min-h-[340px] lg:tw-min-h-full`}
+          >
+            <div className="tw-flex tw-flex-col tw-gap-2">
+              <span className="tw-text-sm tw-font-medium tw-text-iron-200">
+                Hosting Network
               </span>
+              <div className="tw-w-fit tw-max-w-full">
+                <CommonTabs
+                  items={providerOptions}
+                  activeItem={externalProvider}
+                  filterLabel="Select hosting network"
+                  setSelected={handleProviderSelect}
+                  size="sm"
+                  fill={false}
+                />
+              </div>
             </div>
-          </div>
 
-          <div className="tw-flex tw-items-center">
-            <button
-              type="button"
-              onClick={onClearExternalMedia}
-              className="tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-900 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-iron-200 tw-transition hover:tw-bg-iron-800 disabled:tw-cursor-not-allowed disabled:tw-opacity-40"
-              disabled={!externalHash}
-            >
-              Clear Hash
-            </button>
-          </div>
+            <div className="tw-flex tw-flex-col tw-gap-2">
+              <label
+                htmlFor="memes-interactive-media-hash"
+                className="tw-text-sm tw-font-medium tw-text-iron-200"
+              >
+                Content Hash or Path
+              </label>
+              <input
+                id="memes-interactive-media-hash"
+                type="text"
+                autoComplete="off"
+                className="tw-form-input tw-w-full tw-cursor-text tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-3 tw-py-2.5 tw-text-base sm:tw-text-sm tw-font-normal tw-text-iron-100 tw-outline-none tw-ring-1 tw-ring-iron-700 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 desktop-hover:hover:tw-ring-iron-650"
+                placeholder="bafy.../index.html"
+                value={externalHash}
+                onChange={(event) => onExternalHashChange(event.target.value)}
+                aria-invalid={Boolean(externalError)}
+              />
+              {externalError && (
+                <p className="tw-mb-0 tw-text-xs tw-font-medium tw-text-iron-400">
+                  {externalError}
+                </p>
+              )}
+              {externalConstructedUrl && !externalError && (
+                <p className="tw-text-xs tw-text-iron-400">
+                  Resulting URL{" "}
+                  <span className="tw-text-iron-100">
+                    {externalConstructedUrl}
+                  </span>
+                </p>
+              )}
+            </div>
+
+            <div className="tw-flex tw-flex-col tw-gap-y-4">
+              <div className="tw-flex tw-flex-col tw-gap-2">
+                <span className="tw-text-sm tw-font-medium tw-text-iron-200">
+                  Media Type
+                </span>
+                <div className="tw-flex tw-w-full tw-items-center tw-justify-between tw-border-x-0 tw-border-b tw-border-t-0 tw-border-solid tw-border-iron-700 tw-py-2 tw-text-sm tw-text-iron-200">
+                  <span>{mediaTypeLabel}</span>
+                  <span className="tw-text-xs tw-font-medium tw-text-iron-500">
+                    Fixed to interactive HTML (text/html)
+                  </span>
+                </div>
+              </div>
+
+              <div className="tw-flex tw-items-center">
+                <button
+                  type="button"
+                  onClick={onClearExternalMedia}
+                  className="tw-rounded-md tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-iron-200 tw-transition disabled:tw-cursor-not-allowed disabled:tw-opacity-40 desktop-hover:hover:tw-bg-iron-800"
+                  disabled={!externalHash}
+                >
+                  Clear Hash
+                </button>
+              </div>
 
-          <div className="tw-flex tw-min-h-[260px] tw-flex-1 tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-iron-800 tw-bg-iron-950 sm:tw-min-h-[320px] lg:tw-min-h-[360px]">
-            {isExternalMediaValid ? (
-              <SandboxedExternalIframe
-                key={externalPreviewUrl}
-                src={externalPreviewUrl}
-                title="Interactive artwork preview"
-                className="tw-bg-transparent"
-                containerClassName="tw-flex-1 tw-flex tw-flex-col"
-                fallback={renderPreviewMessage(
-                  "Preview unavailable for unapproved domains or file types.",
-                  "Only ipfs.io or arweave.net HTML documents can be embedded."
+              <div className="tw-flex tw-min-h-[260px] tw-flex-1 tw-flex-col tw-overflow-hidden tw-rounded-lg tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-950 sm:tw-min-h-[320px] lg:tw-min-h-[360px]">
+                {isExternalMediaValid ? (
+                  <SandboxedExternalIframe
+                    key={externalPreviewUrl}
+                    src={externalPreviewUrl}
+                    title="Interactive artwork preview"
+                    className="tw-bg-transparent"
+                    containerClassName="tw-flex-1 tw-flex tw-flex-col"
+                    fallback={renderPreviewMessage(
+                      "Preview unavailable for unapproved domains or file types.",
+                      "Only ipfs.io or arweave.net HTML documents can be embedded."
+                    )}
+                  />
+                ) : (
+                  <div className="tw-flex tw-h-full tw-flex-1 tw-items-center tw-justify-center">
+                    {previewFallback}
+                  </div>
                 )}
-              />
-            ) : (
-              <div className="tw-flex tw-flex-1 tw-flex-col">
-                {previewFallback}
               </div>
-            )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 };
diff --git a/components/waves/memes/MemesArtSubmissionModal.tsx b/components/waves/memes/MemesArtSubmissionModal.tsx
index 9c78353e8d..254947fabc 100644
--- a/components/waves/memes/MemesArtSubmissionModal.tsx
+++ b/components/waves/memes/MemesArtSubmissionModal.tsx
@@ -42,7 +42,7 @@ const MemesArtSubmissionModal: React.FC<MemesArtSubmissionModalProps> = ({
               exit={{ opacity: 0 }}
               transition={{ duration: 0.25, ease: "easeOut" }}
               data-testid="memes-art-submission-modal-panel"
-              className="tw-flex tw-h-[100dvh] tw-max-h-[100dvh] tw-w-full tw-flex-col md:tw-h-full md:tw-max-h-none"
+              className="tw-flex tw-h-[100dvh] tw-max-h-[100dvh] tw-w-full tw-max-w-screen-xl tw-flex-col md:tw-h-full md:tw-max-h-none"
               ref={modalRef}
               onClick={(e) => {
                 e.stopPropagation();
diff --git a/components/waves/memes/MemesArtSubmissionTraits.tsx b/components/waves/memes/MemesArtSubmissionTraits.tsx
index 775156e004..52f1fab937 100644
--- a/components/waves/memes/MemesArtSubmissionTraits.tsx
+++ b/components/waves/memes/MemesArtSubmissionTraits.tsx
@@ -15,6 +15,8 @@ interface MemesArtSubmissionTraitsProps {
     | undefined;
   readonly onFieldBlur?: ((field: keyof TraitsData) => void) | undefined;
   readonly readOnlyOverrides?: Partial<Record<keyof TraitsData, boolean>>;
+  readonly showRequiredMarkers?: boolean | undefined;
+  readonly size?: "default" | "sm" | undefined;
 }
 
 /**
@@ -29,6 +31,8 @@ const MemesArtSubmissionTraits: React.FC<MemesArtSubmissionTraitsProps> = ({
   validationErrors = {},
   onFieldBlur,
   readOnlyOverrides,
+  showRequiredMarkers = false,
+  size,
 }) => {
   const { connectedProfile } = useAuth();
 
@@ -63,42 +67,99 @@ const MemesArtSubmissionTraits: React.FC<MemesArtSubmissionTraitsProps> = ({
   );
 
   return (
-    <div className="tw-flex tw-flex-col tw-gap-y-1">
+    <div className="tw-flex tw-flex-col">
       {showTitle && (
-        <h2 className="tw-mb-4 tw-text-lg tw-font-semibold tw-text-iron-100 sm:tw-text-xl">
+        <h2 className="tw-mb-5 tw-text-base tw-font-semibold tw-tracking-tight tw-text-iron-100">
           Artwork Traits
         </h2>
       )}
 
-      <div className="tw-flex tw-flex-col tw-gap-y-8">
-        {formSections.map((section, sectionIndex) => (
-          <Section key={`section-${sectionIndex}`} title={section.title}>
-            <div className="tw-flex tw-flex-col tw-gap-6">
-              {section.fields.map((field, fieldIndex) => {
-                const readOnlyOverride = readOnlyOverrides?.[field.field];
-                const traitFieldOverrideProps =
-                  readOnlyOverride === undefined
-                    ? {}
-                    : { readOnlyOverride: Boolean(readOnlyOverride) };
-                return (
-                  <TraitField
-                    key={`field-${field.field}-${fieldIndex}`}
-                    definition={field}
-                    {...traitFieldOverrideProps}
-                    traits={traits}
-                    updateText={updateText}
-                    updateNumber={updateNumber}
-                    updateBoolean={updateBoolean}
-                    error={validationErrors[field.field]}
-                    onBlur={
-                      onFieldBlur ? () => onFieldBlur(field.field) : undefined
-                    }
-                  />
-                );
-              })}
-            </div>
-          </Section>
-        ))}
+      <div className="tw-flex tw-flex-col tw-gap-y-10">
+        {formSections.map((section) => {
+          const sectionKey =
+            section.title ||
+            section.fields.map((field) => field.field).join("|");
+
+          const renderField = (field: (typeof section.fields)[number]) => {
+            const readOnlyOverride = readOnlyOverrides?.[field.field];
+            const traitFieldOverrideProps =
+              readOnlyOverride === undefined
+                ? {}
+                : { readOnlyOverride: Boolean(readOnlyOverride) };
+            return (
+              <TraitField
+                key={field.field}
+                definition={field}
+                {...traitFieldOverrideProps}
+                traits={traits}
+                updateText={updateText}
+                updateNumber={updateNumber}
+                updateBoolean={updateBoolean}
+                error={validationErrors[field.field]}
+                onBlur={
+                  onFieldBlur ? () => onFieldBlur(field.field) : undefined
+                }
+                showRequiredMarkers={showRequiredMarkers}
+                size={size}
+              />
+            );
+          };
+
+          // Basic Information: artist + seizeArtistProfile side-by-side, memeName below
+          if (section.title === "Basic Information") {
+            const artistField = section.fields.find(
+              (f) => f.field === "artist"
+            );
+            const profileField = section.fields.find(
+              (f) => f.field === "seizeArtistProfile"
+            );
+            const remainingFields = section.fields.filter(
+              (f) => f.field !== "artist" && f.field !== "seizeArtistProfile"
+            );
+
+            return (
+              <Section key={sectionKey} title={section.title}>
+                <div className="tw-flex tw-flex-col tw-gap-x-6 tw-gap-y-8">
+                  <div className="tw-grid tw-grid-cols-1 tw-gap-x-5 tw-gap-y-8 sm:tw-grid-cols-2">
+                    {artistField && renderField(artistField)}
+                    {profileField && renderField(profileField)}
+                  </div>
+                  {remainingFields.map((field) => renderField(field))}
+                </div>
+              </Section>
+            );
+          }
+
+          // Card Points: all 4 fields in one row
+          if (section.title === "Card Points") {
+            return (
+              <Section key={sectionKey} title={section.title}>
+                <div className="tw-grid tw-grid-cols-2 tw-gap-4 sm:tw-grid-cols-4">
+                  {section.fields.map((field) => renderField(field))}
+                </div>
+              </Section>
+            );
+          }
+
+          // Card Attributes: 2-column grid for boolean toggles
+          if (section.title === "Card Attributes") {
+            return (
+              <Section key={sectionKey} title={section.title}>
+                <div className="tw-grid tw-grid-cols-1 tw-gap-4 sm:tw-grid-cols-2">
+                  {section.fields.map((field) => renderField(field))}
+                </div>
+              </Section>
+            );
+          }
+
+          return (
+            <Section key={sectionKey} title={section.title}>
+              <div className="tw-grid tw-grid-cols-1 tw-gap-x-5 tw-gap-y-8 sm:tw-grid-cols-2">
+                {section.fields.map((field) => renderField(field))}
+              </div>
+            </Section>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/components/waves/memes/file-upload/components/FilePreview.tsx b/components/waves/memes/file-upload/components/FilePreview.tsx
index 17e2845468..a55e8bf417 100644
--- a/components/waves/memes/file-upload/components/FilePreview.tsx
+++ b/components/waves/memes/file-upload/components/FilePreview.tsx
@@ -150,7 +150,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         <button
           onClick={onRemove}
           className="tw-border tw-border-solid tw-border-iron-800 hover:tw-ring-iron-650 hover:tw-bg-iron-700 hover:tw-border-iron-700 tw-ring-1 tw-ring-iron-700 tw-rounded-lg tw-bg-iron-800 tw-px-2.5 tw-py-1.5 tw-text-xs tw-font-semibold tw-text-iron-300 tw-flex tw-items-center tw-justify-center tw-gap-x-2 tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 tw-transition tw-duration-300 tw-ease-out"
-          aria-label="Replace uploaded file"
+          aria-label="Change uploaded file"
           tabIndex={0}
           data-testid="artwork-replace-button"
         >
@@ -158,7 +158,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
             icon={faArrowsRotate}
             className="tw-w-3.5 tw-h-3.5 tw-flex-shrink-0"
           />
-          Replace
+          Change
         </button>
       </div>
     </motion.div>
diff --git a/components/waves/memes/file-upload/components/FileTypeIndicator.tsx b/components/waves/memes/file-upload/components/FileTypeIndicator.tsx
index 7c9f007087..ad72a1ec23 100644
--- a/components/waves/memes/file-upload/components/FileTypeIndicator.tsx
+++ b/components/waves/memes/file-upload/components/FileTypeIndicator.tsx
@@ -1,10 +1,17 @@
+import type { SubmissionMediaCategory } from '@/constants/submission-media.constants';
+import {
+  CubeIcon,
+  FilmIcon,
+  PhotoIcon,
+} from '@heroicons/react/24/outline';
 import React from 'react';
 
 /**
  * Props for the FileTypeIndicator component
  */
 interface FileTypeIndicatorProps {
-  readonly format: string;
+  readonly kind: SubmissionMediaCategory;
+  readonly label: string;
 }
 
 /**
@@ -16,12 +23,30 @@ interface FileTypeIndicatorProps {
  * @param props Component props
  * @returns JSX Element
  */
-const FileTypeIndicator: React.FC<FileTypeIndicatorProps> = ({ format }) => (
-  <span 
-    className="tw-px-3 tw-py-1.5 tw-rounded-full tw-bg-iron-900/50 tw-backdrop-blur tw-border tw-border-iron-800/50"
-  >
-    {format}
-  </span>
-);
+const ICON_BY_KIND: Record<SubmissionMediaCategory, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
+  image: PhotoIcon,
+  video: FilmIcon,
+  interactive: CubeIcon,
+};
 
-export default FileTypeIndicator;
\ No newline at end of file
+const FileTypeIndicator: React.FC<FileTypeIndicatorProps> = ({
+  kind,
+  label,
+}) => {
+  const Icon = ICON_BY_KIND[kind];
+
+  return (
+    <span
+      className="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-1.5 tw-text-[10px] tw-font-semibold tw-text-iron-400 tw-tracking-wider tw-bg-iron-800/50 tw-border tw-border-iron-800 tw-rounded-full tw-border-solid"
+    >
+      <Icon
+        className="tw-size-4 tw-flex-shrink-0 tw-text-iron-500"
+        aria-hidden="true"
+      />
+      <span className="tw-whitespace-nowrap">{label}</span>
+    </span>
+
+  );
+};
+
+export default FileTypeIndicator;
diff --git a/components/waves/memes/file-upload/components/UploadArea.tsx b/components/waves/memes/file-upload/components/UploadArea.tsx
index cbc459e92c..11c303e7c0 100644
--- a/components/waves/memes/file-upload/components/UploadArea.tsx
+++ b/components/waves/memes/file-upload/components/UploadArea.tsx
@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import type { UploadAreaProps } from '../reducers/types';
 import ErrorMessage from './ErrorMessage';
 import FileTypeIndicator from './FileTypeIndicator';
-import { SUBMISSION_UI_FORMAT_CATEGORIES } from '@/constants/submission-media.constants';
+import { SUBMISSION_UI_FORMAT_GROUPS } from '@/constants/submission-media.constants';
 
 /**
  * Upload Area Component
@@ -77,10 +77,14 @@ const UploadArea: React.FC<UploadAreaProps> = ({
     </div>
 
     {/* File type indicators */}
-    <div className="tw-absolute tw-bottom-6 tw-left-6 tw-right-6">
-      <div className="tw-flex tw-justify-center tw-gap-3 tw-text-xs tw-text-iron-500">
-        {SUBMISSION_UI_FORMAT_CATEGORIES.map((format) => (
-          <FileTypeIndicator key={format} format={format} />
+    <div className="tw-absolute tw-bottom-5 tw-left-4 tw-right-4 sm:tw-bottom-6">
+      <div className="tw-flex tw-flex-wrap tw-justify-center tw-gap-3 sm:tw-gap-4">
+        {SUBMISSION_UI_FORMAT_GROUPS.map((formatGroup) => (
+          <FileTypeIndicator
+            key={formatGroup.kind}
+            kind={formatGroup.kind}
+            label={formatGroup.label}
+          />
         ))}
       </div>
     </div>
@@ -112,4 +116,4 @@ const UploadArea: React.FC<UploadAreaProps> = ({
   </div>
 );
 
-export default UploadArea;
\ No newline at end of file
+export default UploadArea;
diff --git a/components/waves/memes/submission/MemesArtSubmissionContainer.tsx b/components/waves/memes/submission/MemesArtSubmissionContainer.tsx
index cfecf82926..4529758f3f 100644
--- a/components/waves/memes/submission/MemesArtSubmissionContainer.tsx
+++ b/components/waves/memes/submission/MemesArtSubmissionContainer.tsx
@@ -298,22 +298,13 @@ const MemesArtSubmissionContainer: FC<MemesArtSubmissionContainerProps> = ({
 
   return (
     <div className="tw-flex tw-h-full tw-flex-col">
-      <div className="tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-iron-800 tw-bg-iron-950 tw-backdrop-blur">
-        <div className="tw-absolute tw-inset-0 tw-overflow-hidden tw-rounded-xl">
-          <div className="tw-absolute -tw-right-1/4 -tw-top-1/4 tw-h-1/2 tw-w-1/2 tw-bg-primary-500/[0.03] tw-blur-3xl" />
-          <div className="tw-absolute -tw-left-1/4 tw-top-1/4 tw-h-1/2 tw-w-2/3 tw-bg-purple-500/[0.02] tw-blur-3xl" />
-          <div className="tw-absolute -tw-bottom-1/4 -tw-left-1/4 tw-h-1/2 tw-w-1/2 tw-bg-iron-500/[0.03] tw-blur-3xl" />
-        </div>
+      <div className="tw-relative tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-950 tw-backdrop-blur">
         <div className="tw-relative tw-z-10 tw-flex tw-h-full tw-flex-col">
-          <div className="tw-px-4 md:tw-px-8">
+          <div className="tw-border-x-0 tw-border-b tw-border-t-0 tw-border-solid tw-border-iron-800 tw-px-4 tw-pb-6 md:tw-px-8">
             <div
-              className={`tw-flex tw-w-full tw-flex-shrink-0 tw-justify-between tw-border tw-border-x-0 tw-border-t-0 tw-border-solid tw-border-iron-800 tw-pb-4 tw-pt-6 lg:tw-mb-0 lg:tw-border-b-0 lg:tw-pb-6 lg:tw-pt-8 ${
-                form.currentStep === SubmissionStep.AGREEMENT
-                  ? "tw-mx-auto tw-max-w-6xl"
-                  : ""
-              }`}
+              className="tw-flex tw-w-full tw-items-center tw-flex-shrink-0 tw-justify-between tw-pt-6 lg:tw-border-b-0"
             >
-              <motion.h3 className="tw-text-2xl tw-font-semibold tw-text-iron-100 lg:tw-text-3xl">
+              <motion.h3 className="tw-text-xl tw-font-semibold tw-tracking-tight tw-text-iron-100 md:tw-text-2xl tw-mb-0">
                 Submit Work to The Memes
               </motion.h3>
               <motion.button
diff --git a/components/waves/memes/submission/components/AdditionalMediaUpload.tsx b/components/waves/memes/submission/components/AdditionalMediaUpload.tsx
index 8181ee4419..951b723952 100644
--- a/components/waves/memes/submission/components/AdditionalMediaUpload.tsx
+++ b/components/waves/memes/submission/components/AdditionalMediaUpload.tsx
@@ -225,14 +225,14 @@ const AdditionalMediaUpload: FC<AdditionalMediaUploadProps> = ({
   ) => (
     <div className="tw-flex tw-flex-col tw-gap-y-2">
       <div className="tw-flex tw-items-center tw-justify-between">
-        <span className="tw-text-sm tw-font-medium tw-text-iron-300">
+        <span className="tw-text-sm tw-font-medium tw-text-iron-200">
           {title}
         </span>
         <button
           type="button"
           disabled={upload.items.length >= maxItems || upload.isUploading}
           onClick={() => inputRef.current?.click()}
-          className="tw-flex tw-cursor-pointer tw-items-center tw-gap-x-1.5 tw-border-0 tw-bg-transparent tw-text-sm tw-font-semibold tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out disabled:tw-cursor-not-allowed disabled:tw-opacity-50 desktop-hover:hover:tw-text-primary-300"
+          className="tw-flex tw-w-max tw-cursor-pointer tw-items-center tw-gap-x-1 tw-border-0 tw-bg-transparent tw-text-[13px] tw-font-semibold tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out disabled:tw-cursor-not-allowed disabled:tw-opacity-50 desktop-hover:hover:tw-text-primary-400"
           aria-label={`Add ${title}`}
         >
           <PlusIcon className="tw-h-4 tw-w-4 tw-flex-shrink-0" />
@@ -266,7 +266,7 @@ const AdditionalMediaUpload: FC<AdditionalMediaUploadProps> = ({
 
   return (
     <FormSection title="Supplemental Media & Commentary">
-      <div className="tw-flex tw-flex-col tw-gap-y-8">
+      <div className="tw-flex tw-flex-col tw-gap-y-6">
         {requiresPreviewImage && (
           <div className="tw-flex tw-flex-col tw-gap-y-2">
             {renderMediaSection(
@@ -309,17 +309,20 @@ const AdditionalMediaUpload: FC<AdditionalMediaUploadProps> = ({
         <div className="tw-flex tw-flex-col tw-gap-y-6">
           <div className="tw-flex tw-flex-col tw-gap-y-1">
             <TraitWrapper
-              label="About the Artist *"
+              label="About the Artist"
               id="about-artist"
               error={errors?.aboutArtist}
               isFieldFilled={!!aboutArtist.trim()}
+              showRequiredMarker={true}
+              labelTone="muted"
               className="tw-pb-0"
             >
               <textarea
                 placeholder="Tell us about yourself as an artist..."
                 value={aboutArtist}
                 onChange={(e) => onAboutArtistChange(e.target.value)}
-                className={`tw-form-textarea tw-min-h-[120px] tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-ring-primary-400 ${
+                aria-required="true"
+                className={`tw-form-textarea tw-min-h-[120px] tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-ring-primary-400 sm:tw-text-sm ${
                   errors?.aboutArtist ? "tw-ring-red" : "tw-ring-iron-700"
                 }`}
               />
@@ -329,17 +332,20 @@ const AdditionalMediaUpload: FC<AdditionalMediaUploadProps> = ({
 
           <div className="tw-flex tw-flex-col tw-gap-y-1">
             <TraitWrapper
-              label="Artwork Commentary *"
+              label="Artwork Commentary"
               id="artwork-commentary"
               error={errors?.artworkCommentary}
               isFieldFilled={!!artworkCommentary.trim()}
+              showRequiredMarker={true}
+              labelTone="muted"
               className="tw-pb-0"
             >
               <textarea
-                placeholder="Tell us more about the artwork..."
+                placeholder="Artwork commentary"
                 value={artworkCommentary}
                 onChange={(e) => onArtworkCommentaryChange(e.target.value)}
-                className={`tw-form-textarea tw-min-h-[120px] tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-ring-primary-400 ${
+                aria-required="true"
+                className={`tw-form-textarea tw-min-h-[120px] tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-ring-primary-400 sm:tw-text-sm ${
                   errors?.artworkCommentary ? "tw-ring-red" : "tw-ring-iron-700"
                 }`}
               />
diff --git a/components/waves/memes/submission/components/AirdropConfig.tsx b/components/waves/memes/submission/components/AirdropConfig.tsx
index f787d587c8..eefaa08d84 100644
--- a/components/waves/memes/submission/components/AirdropConfig.tsx
+++ b/components/waves/memes/submission/components/AirdropConfig.tsx
@@ -124,41 +124,43 @@ const AirdropConfig: React.FC<AirdropConfigProps> = ({
 
   const getSummaryBarClasses = () => {
     if (isExactlyAllocated)
-      return "tw-bg-green/10 tw-border tw-border-green/30";
+      return "tw-border tw-border-[#0d402b] tw-bg-[#062417]";
     if (isOverAllocated) return "tw-bg-red/10 tw-border tw-border-red/30";
-    return "tw-bg-iron-800/50 tw-border tw-border-iron-700";
+    return "tw-border tw-border-iron-800 tw-bg-iron-900/70";
   };
 
   const getTotalTextColorClass = () => {
     if (isOverAllocated) return "tw-text-red";
-    if (isExactlyAllocated) return "tw-text-green";
+    if (isExactlyAllocated) return "tw-text-emerald-500";
     return "tw-text-iron-100";
   };
 
   return (
     <FormSection title="Airdrop Distribution">
       <div
-        className={`tw-mb-4 tw-flex tw-items-center tw-justify-between tw-rounded-lg tw-px-4 tw-py-3 ${getSummaryBarClasses()}`}
+        className={`tw-mb-6 tw-flex tw-items-center tw-justify-between tw-gap-x-4 tw-rounded-lg tw-border-solid tw-px-4 tw-py-3 ${getSummaryBarClasses()}`}
       >
-        <span className="tw-text-sm tw-text-iron-300">
+        <span className="tw-text-[13px] tw-font-medium tw-text-iron-400">
           Total allocated:{" "}
-          <span className={`tw-font-bold ${getTotalTextColorClass()}`}>
+          <span
+            className={`tw-px-0.5 tw-font-bold ${getTotalTextColorClass()}`}
+          >
             {totalAllocated}
           </span>{" "}
           / {AIRDROP_TOTAL}
         </span>
         {isOverAllocated && (
-          <span className="tw-text-sm tw-font-medium tw-text-red">
+          <span className="tw-text-[13px] tw-font-semibold tw-text-red">
             {Math.abs(remaining)} over limit
           </span>
         )}
         {isUnderAllocated && (
-          <span className="tw-text-sm tw-text-iron-400">
+          <span className="tw-text-[13px] tw-font-medium tw-text-iron-400">
             {remaining} remaining
           </span>
         )}
         {isExactlyAllocated && (
-          <span className="tw-text-sm tw-font-medium tw-text-green">
+          <span className="tw-text-[13px] tw-font-semibold tw-text-emerald-500">
             Complete
           </span>
         )}
@@ -172,12 +174,13 @@ const AirdropConfig: React.FC<AirdropConfigProps> = ({
           const isValid = !!entry.address && !error && !isLoading;
 
           return (
-            <div key={entry.id} className="tw-flex tw-items-start tw-gap-x-3">
+            <div key={entry.id} className="tw-flex tw-items-start tw-gap-x-4">
               <TraitWrapper
-                label="Wallet Address *"
+                label="Wallet Address"
                 id={`airdrop-${index}-address`}
                 error={error}
                 isFieldFilled={isValid}
+                labelTone="muted"
                 className="tw-flex-1 tw-pb-0"
               >
                 <EnsAddressInput
@@ -188,17 +191,18 @@ const AirdropConfig: React.FC<AirdropConfigProps> = ({
                     handleLoadingChange(entry.id, loading)
                   }
                   onError={(hasError) => handleEnsError(entry.id, hasError)}
-                  className={`tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-bg-iron-900 focus:tw-text-iron-100 ${
+                  className={`tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-bg-iron-900 focus:tw-text-iron-100 sm:tw-text-sm ${
                     error ? "tw-ring-red" : "tw-ring-iron-700"
                   } focus:tw-ring-primary-400`}
                 />
               </TraitWrapper>
 
               <TraitWrapper
-                label="Count *"
+                label="Count"
                 id={`airdrop-${index}-count`}
                 isFieldFilled={!!entry.count}
-                className="tw-w-24 tw-pb-0"
+                labelTone="muted"
+                className="tw-w-[120px] tw-pb-0"
               >
                 <input
                   type="number"
@@ -206,7 +210,7 @@ const AirdropConfig: React.FC<AirdropConfigProps> = ({
                   max={AIRDROP_TOTAL}
                   value={entry.count || ""}
                   onChange={(e) => handleCountChange(index, e.target.value)}
-                  className="tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 tw-ring-iron-700 focus:tw-ring-primary-400"
+                  className="tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 tw-ring-iron-700 focus:tw-ring-primary-400 sm:tw-text-sm"
                 />
               </TraitWrapper>
 
@@ -214,10 +218,10 @@ const AirdropConfig: React.FC<AirdropConfigProps> = ({
                 <button
                   type="button"
                   onClick={() => handleRemoveEntry(index)}
-                  className="tw-mt-2 tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-2 tw-text-iron-400 tw-transition-colors tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-rose-400"
+                  className="-tw-ml-2 tw-flex tw-cursor-pointer tw-items-center tw-self-center tw-border-0 tw-bg-transparent tw-p-2 tw-text-iron-400 tw-transition-colors tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-rose-400"
                   aria-label={`Remove address ${index + 1}`}
                 >
-                  <TrashIcon className="tw-size-5 tw-flex-shrink-0" />
+                  <TrashIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0" />
                 </button>
               )}
             </div>
@@ -228,10 +232,10 @@ const AirdropConfig: React.FC<AirdropConfigProps> = ({
       <button
         type="button"
         onClick={handleAddEntry}
-        className="tw-mt-4 tw-flex tw-cursor-pointer tw-items-center tw-gap-x-1.5 tw-border-0 tw-bg-transparent tw-text-sm tw-font-semibold tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-primary-300"
+        className="-tw-ml-2 tw-mt-3 tw-flex tw-cursor-pointer tw-items-center tw-gap-x-1 tw-border-0 tw-bg-transparent tw-text-[13px] tw-font-semibold tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-primary-400"
       >
         <PlusIcon className="tw-size-4 tw-flex-shrink-0" />
-        Add Address
+        <span>Add Address</span>
       </button>
 
       {entries.length === 1 && !firstEntry?.address && (
diff --git a/components/waves/memes/submission/components/AllowlistBatchManager.tsx b/components/waves/memes/submission/components/AllowlistBatchManager.tsx
index edd9bcc730..2c70ec2356 100644
--- a/components/waves/memes/submission/components/AllowlistBatchManager.tsx
+++ b/components/waves/memes/submission/components/AllowlistBatchManager.tsx
@@ -52,21 +52,23 @@ const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({
 
   return (
     <FormSection title="Allowlist Configuration">
-      <MetadataLengthHint status={allowlistLengthStatus} className="tw-mb-3" />
+      <MetadataLengthHint status={allowlistLengthStatus} className="tw-mb-4" />
       <div className="tw-flex tw-flex-col tw-gap-y-6">
         {batches.length === 0 ? (
-          <div className="tw-py-2 tw-text-sm tw-italic tw-text-iron-500">
+          <div className="-tw-mt-1 tw-mb-1 tw-text-[13px] tw-italic tw-text-iron-500">
             No allowlist batches added.
           </div>
         ) : (
           batches.map((batch, index) => (
-            <div key={batch.id} className="tw-flex tw-items-start tw-gap-x-3">
+            <div key={batch.id} className="tw-flex tw-items-start tw-gap-x-4">
               {/* Contract Address */}
               <TraitWrapper
-                label="Contract Address *"
+                label="Contract Address"
                 id={`batch-${index}-contract`}
                 error={errors?.[index]?.contract}
                 isFieldFilled={!!batch.contract && !errors?.[index]?.contract}
+                showRequiredMarker={true}
+                labelTone="muted"
                 className="tw-flex-1 tw-pb-0"
               >
                 <input
@@ -76,7 +78,7 @@ const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({
                   onChange={(e) =>
                     handleBatchChange(index, "contract", e.target.value)
                   }
-                  className={`tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 ${
+                  className={`tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 sm:tw-text-sm ${
                     errors?.[index]?.contract
                       ? "tw-ring-red"
                       : "tw-ring-iron-700"
@@ -92,6 +94,7 @@ const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({
                 isFieldFilled={
                   !!batch.token_ids_raw && !errors?.[index]?.token_ids
                 }
+                labelTone="muted"
                 className="tw-flex-1 tw-pb-0"
               >
                 <input
@@ -101,7 +104,7 @@ const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({
                   onChange={(e) =>
                     handleBatchChange(index, "token_ids_raw", e.target.value)
                   }
-                  className={`tw-truncat tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 ${
+                  className={`tw-truncat tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 sm:tw-text-sm ${
                     errors?.[index]?.token_ids
                       ? "tw-ring-red"
                       : "tw-ring-iron-700"
@@ -113,10 +116,10 @@ const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({
               <button
                 type="button"
                 onClick={() => handleRemoveBatch(index)}
-                className="tw-mt-2 tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-2 tw-text-iron-400 tw-transition-colors tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-rose-400"
+                className="-tw-ml-2 tw-flex tw-cursor-pointer tw-items-center tw-self-center tw-border-0 tw-bg-transparent tw-p-2 tw-text-iron-400 tw-transition-colors tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-rose-400"
                 aria-label={`Remove Batch ${index + 1}`}
               >
-                <TrashIcon className="tw-size-5 tw-flex-shrink-0" />
+                <TrashIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0" />
               </button>
             </div>
           ))
@@ -127,7 +130,7 @@ const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({
       <button
         type="button"
         onClick={handleAddBatch}
-        className="tw-mt-4 tw-flex tw-cursor-pointer tw-items-center tw-gap-x-1.5 tw-border-0 tw-bg-transparent tw-text-sm tw-font-semibold tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-primary-300"
+        className="-tw-ml-2 tw-mt-3 tw-flex tw-w-max tw-cursor-pointer tw-items-center tw-gap-x-1 tw-border-0 tw-bg-transparent tw-text-[13px] tw-font-semibold tw-text-primary-400 tw-transition tw-duration-300 tw-ease-out desktop-hover:hover:tw-text-primary-400"
       >
         <PlusIcon className="tw-size-4 tw-flex-shrink-0" />
         Add Batch
diff --git a/components/waves/memes/submission/components/PaymentConfig.tsx b/components/waves/memes/submission/components/PaymentConfig.tsx
index de8fc5ec22..8163db91d9 100644
--- a/components/waves/memes/submission/components/PaymentConfig.tsx
+++ b/components/waves/memes/submission/components/PaymentConfig.tsx
@@ -44,9 +44,7 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
       onPaymentInfoChange({
         ...paymentInfo,
         has_designated_payee: checked,
-        designated_payee_name: checked
-          ? (paymentInfo.designated_payee_name ?? "")
-          : "",
+        designated_payee_name: checked ? paymentInfo.designated_payee_name : "",
       });
     },
     [paymentInfo, onPaymentInfoChange]
@@ -62,9 +60,9 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
     [paymentInfo, onPaymentInfoChange]
   );
 
-  const address = paymentInfo.payment_address ?? "";
-  const hasDesignatedPayee = paymentInfo.has_designated_payee ?? false;
-  const designatedPayeeName = paymentInfo.designated_payee_name ?? "";
+  const address = paymentInfo.payment_address;
+  const hasDesignatedPayee = paymentInfo.has_designated_payee;
+  const designatedPayeeName = paymentInfo.designated_payee_name;
   const addressError = getAddressError(address);
   const isAddressValid = !!address && !addressError && !isLoading;
 
@@ -74,27 +72,29 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
       : null;
 
   return (
-    <FormSection title="Payment">
-      <p className="-tw-mt-1 tw-mb-3 tw-text-sm tw-text-iron-500">
+    <FormSection title="Payment" contentClassName="-tw-mt-3">
+      <p className="tw-mb-5 tw-text-[13px] tw-text-iron-400">
         Address to receive split of minting proceeds.
       </p>
       <MetadataLengthHint
         status={paymentInfoLengthStatus}
-        className="-tw-mt-2 tw-mb-3"
+        className="tw-mb-4"
       />
 
       <div className="tw-mb-5">
-        <label className="tw-flex tw-cursor-pointer tw-items-center tw-gap-3">
+        <label className="tw-group tw-flex tw-w-max tw-cursor-pointer tw-items-center tw-gap-3">
           <input
             type="checkbox"
             checked={hasDesignatedPayee}
             onChange={handleDesignatedPayeeToggle}
             aria-label="Designated Payee"
-            className="tw-h-4 tw-w-4 tw-cursor-pointer tw-rounded tw-border-iron-700 tw-bg-iron-900 tw-text-primary-400 focus:tw-ring-primary-400 focus:tw-ring-offset-0"
+            className="tw-form-checkbox tw-h-4 tw-w-4 tw-cursor-pointer tw-rounded tw-border tw-border-solid tw-border-iron-600 tw-bg-iron-800 tw-text-primary-400 focus:tw-ring-primary-400 focus:tw-ring-offset-0 desktop-hover:group-hover:tw-border-iron-400"
           />
-          <span className="tw-text-sm">
-            <span className="tw-text-iron-300">Designated Payee</span>
-            <span className="tw-ml-1 tw-text-iron-500">
+          <span className="tw-text-[13px] tw-text-iron-400">
+            <span className="tw-font-medium tw-text-iron-200 tw-transition-colors desktop-hover:group-hover:tw-text-white">
+              Designated Payee
+            </span>
+            <span className="tw-ml-1 tw-text-iron-400">
               — proceeds will be paid to a third party
             </span>
           </span>
@@ -103,10 +103,11 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
 
       {hasDesignatedPayee && (
         <TraitWrapper
-          label="Designated Payee Name *"
+          label="Designated Payee Name"
           id="designated-payee-name"
           error={designatedPayeeNameError}
           isFieldFilled={!!designatedPayeeName.trim()}
+          showRequiredMarker={true}
           className="tw-pb-8"
         >
           <input
@@ -115,7 +116,7 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
             onChange={handleDesignatedPayeeNameChange}
             placeholder="Enter designated payee name"
             autoFocus
-            className={`tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-4 tw-py-3 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-bg-iron-900 focus:tw-text-iron-100 ${
+            className={`tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-4 tw-py-3 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-bg-iron-900 focus:tw-text-iron-100 sm:tw-text-sm ${
               designatedPayeeNameError ? "tw-ring-red" : "tw-ring-iron-700"
             } focus:tw-ring-primary-400`}
           />
@@ -124,13 +125,13 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
 
       <TraitWrapper
         label={
-          hasDesignatedPayee
-            ? "Designated Payee Address *"
-            : "Payment Address *"
+          hasDesignatedPayee ? "Designated Payee Address" : "Payment Address"
         }
         id="payment-address"
         error={addressError}
         isFieldFilled={isAddressValid}
+        showRequiredMarker={true}
+        labelTone="muted"
         className="tw-pb-0"
       >
         <EnsAddressInput
@@ -139,7 +140,7 @@ const PaymentConfig: React.FC<PaymentConfigProps> = ({
           onAddressChange={handleAddressChange}
           onLoadingChange={setIsLoading}
           onError={setHasEnsError}
-          className={`tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-bg-iron-900 focus:tw-text-iron-100 ${
+          className={`tw-form-input tw-w-full tw-truncate tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 focus:tw-bg-iron-900 focus:tw-text-iron-100 sm:tw-text-sm ${
             addressError ? "tw-ring-red" : "tw-ring-iron-700"
           } focus:tw-ring-primary-400`}
         />
diff --git a/components/waves/memes/submission/details/ArtworkDetails.tsx b/components/waves/memes/submission/details/ArtworkDetails.tsx
index 5c32cee456..93e8092659 100644
--- a/components/waves/memes/submission/details/ArtworkDetails.tsx
+++ b/components/waves/memes/submission/details/ArtworkDetails.tsx
@@ -14,8 +14,30 @@ interface ArtworkDetailsProps {
   readonly descriptionError?: string | null | undefined;
   readonly onTitleBlur?: (() => void) | undefined;
   readonly onDescriptionBlur?: (() => void) | undefined;
+  readonly showRequiredMarkers?: boolean | undefined;
+  readonly size?: "default" | "sm" | undefined;
 }
 
+const getFieldStateClass = (hasError: boolean, isFilled: boolean): string => {
+  if (hasError) {
+    return "tw-ring-red";
+  }
+
+  if (isFilled) {
+    return "tw-ring-emerald-600/45 desktop-hover:hover:tw-ring-emerald-600/55 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400";
+  }
+
+  return "tw-ring-iron-700 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 desktop-hover:hover:tw-ring-iron-650";
+};
+
+const getLabelStateClass = (hasError: boolean): string => {
+  if (hasError) {
+    return "tw-text-red";
+  }
+
+  return "group-focus-visible-within:tw-text-primary-400 tw-text-iron-300";
+};
+
 /**
  * ArtworkDetails - Component for the artwork title and description fields
  *
@@ -30,6 +52,8 @@ const ArtworkDetails: React.FC<ArtworkDetailsProps> = ({
   descriptionError,
   onTitleBlur,
   onDescriptionBlur,
+  showRequiredMarkers = false,
+  size = "default",
 }) => {
   // Refs to track input elements directly
   const titleRef = useRef<HTMLInputElement>(null);
@@ -99,24 +123,40 @@ const ArtworkDetails: React.FC<ArtworkDetailsProps> = ({
     () => description.trim().length > 0,
     [description]
   );
+  const titleStateClass = getFieldStateClass(
+    Boolean(titleError),
+    isTitleFilled
+  );
+  const descriptionStateClass = getFieldStateClass(
+    Boolean(descriptionError),
+    isDescriptionFilled
+  );
+  const titleLabelStateClass = getLabelStateClass(Boolean(titleError));
+  const descriptionLabelStateClass = getLabelStateClass(
+    Boolean(descriptionError)
+  );
 
   return (
     <FormSection
       title="Artwork Details"
-      titleClassName="tw-text-lg sm:tw-text-xl tw-font-semibold tw-text-iron-100 tw-mb-4 sm:tw-mb-6"
+      titleClassName="tw-text-base tw-font-semibold tw-text-iron-100 tw-tracking-tight tw-mb-2"
     >
-      <div className="tw-grid tw-grid-cols-1 tw-gap-6">
+      <div className="tw-grid tw-grid-cols-1 tw-gap-8">
         <div className="tw-group tw-relative">
           <div className="tw-relative">
             <label
               htmlFor="field-title"
-              className={`tw-absolute -tw-top-2 tw-left-3 tw-z-10 tw-bg-iron-900 tw-px-1 tw-text-xs tw-font-medium tw-transition-all ${
-                titleError
-                  ? "tw-text-red"
-                  : "group-focus-visible-within:tw-text-primary-400 tw-text-iron-300"
-              }`}
+              className={`tw-absolute -tw-top-2 tw-left-3 tw-z-10 tw-bg-iron-900 tw-px-1 tw-font-medium tw-transition-all ${size === "sm" ? "tw-text-[11px]" : "tw-text-xs"} ${titleLabelStateClass}`}
             >
               Artwork Title
+              {showRequiredMarkers && (
+                <>
+                  {" "}
+                  <span aria-hidden="true" className="tw-text-iron-500">
+                    *
+                  </span>
+                </>
+              )}
             </label>
 
             <div className="tw-relative tw-rounded-xl tw-bg-iron-950 tw-transition-all tw-duration-200">
@@ -132,17 +172,25 @@ const ArtworkDetails: React.FC<ArtworkDetailsProps> = ({
                 aria-invalid={!!titleError}
                 aria-describedby={titleError ? "title-error" : undefined}
                 data-field="title"
-                className={`tw-form-input tw-w-full tw-cursor-text tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-4 tw-py-3.5 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 ${
-                  titleError
-                    ? "tw-ring-red"
-                    : "tw-ring-iron-700 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 desktop-hover:hover:tw-ring-iron-650"
-                } ${isTitleFilled && !titleError ? "tw-pr-10" : ""} `}
+                className={`tw-form-input tw-w-full tw-cursor-text tw-rounded-lg tw-border-0 tw-bg-iron-900 ${size === "sm" ? "tw-px-3 tw-py-2.5" : "tw-px-4 tw-py-3.5"} tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 sm:tw-text-sm ${titleStateClass} ${
+                  isTitleFilled && !titleError ? "tw-pr-10" : ""
+                } `}
               />
 
               {/* Title checkmark */}
               {isTitleFilled && !titleError && (
-                <div className="tw-pointer-events-none tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-transform">
-                  <CheckCircleIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-emerald-500" />
+                <div
+                  className={`tw-pointer-events-none tw-absolute tw-inset-y-0 tw-flex tw-items-center ${
+                    size === "sm" ? "tw-right-2.5" : "tw-right-3"
+                  }`}
+                >
+                  <CheckCircleIcon
+                    className={`tw-flex-shrink-0 tw-text-emerald-500 ${
+                      size === "sm"
+                        ? "tw-h-[18px] tw-w-[18px]"
+                        : "tw-h-5 tw-w-5"
+                    }`}
+                  />
                 </div>
               )}
             </div>
@@ -155,13 +203,17 @@ const ArtworkDetails: React.FC<ArtworkDetailsProps> = ({
           <div className="tw-relative">
             <label
               htmlFor="field-description"
-              className={`tw-absolute -tw-top-2 tw-left-3 tw-z-10 tw-bg-iron-900 tw-px-1 tw-text-xs tw-font-medium tw-transition-all ${
-                descriptionError
-                  ? "tw-text-red"
-                  : "group-focus-visible-within:tw-text-primary-400 tw-text-iron-300"
-              }`}
+              className={`tw-absolute -tw-top-2 tw-left-3 tw-z-10 tw-bg-iron-900 tw-px-1 tw-font-medium tw-transition-all ${size === "sm" ? "tw-text-[11px]" : "tw-text-xs"} ${descriptionLabelStateClass}`}
             >
               Description
+              {showRequiredMarkers && (
+                <>
+                  {" "}
+                  <span aria-hidden="true" className="tw-text-iron-500">
+                    *
+                  </span>
+                </>
+              )}
             </label>
 
             <div className="tw-relative tw-rounded-xl tw-bg-iron-950 tw-transition-all tw-duration-200">
@@ -179,17 +231,27 @@ const ArtworkDetails: React.FC<ArtworkDetailsProps> = ({
                   descriptionError ? "description-error" : undefined
                 }
                 data-field="description"
-                className={`tw-form-textarea tw-w-full tw-cursor-text tw-overflow-hidden tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-4 tw-py-3.5 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 ${
-                  descriptionError
-                    ? "tw-ring-red"
-                    : "tw-ring-iron-700 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 desktop-hover:hover:tw-ring-iron-650"
-                } ${isDescriptionFilled && !descriptionError ? "tw-pr-10" : ""} `}
+                className={`tw-form-textarea tw-w-full tw-cursor-text tw-overflow-hidden tw-rounded-lg tw-border-0 tw-bg-iron-900 ${size === "sm" ? "tw-px-3 tw-py-2.5" : "tw-px-4 tw-py-3.5"} tw-text-base tw-text-iron-100 tw-outline-none tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 sm:tw-text-sm ${descriptionStateClass} ${
+                  isDescriptionFilled && !descriptionError ? "tw-pr-10" : ""
+                } `}
               />
 
               {/* Description checkmark */}
               {isDescriptionFilled && !descriptionError && (
-                <div className="tw-pointer-events-none tw-absolute tw-right-3 tw-top-3">
-                  <CheckCircleIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-emerald-500" />
+                <div
+                  className={`tw-pointer-events-none tw-absolute ${
+                    size === "sm"
+                      ? "tw-right-2.5 tw-top-2.5"
+                      : "tw-right-3 tw-top-3"
+                  }`}
+                >
+                  <CheckCircleIcon
+                    className={`tw-flex-shrink-0 tw-text-emerald-500 ${
+                      size === "sm"
+                        ? "tw-h-[18px] tw-w-[18px]"
+                        : "tw-h-5 tw-w-5"
+                    }`}
+                  />
                 </div>
               )}
             </div>
diff --git a/components/waves/memes/submission/preview/MemesSubmissionPreviewScreen.tsx b/components/waves/memes/submission/preview/MemesSubmissionPreviewScreen.tsx
index 3f4aaf8df8..6852e79eb4 100644
--- a/components/waves/memes/submission/preview/MemesSubmissionPreviewScreen.tsx
+++ b/components/waves/memes/submission/preview/MemesSubmissionPreviewScreen.tsx
@@ -30,7 +30,7 @@ export function MemesSubmissionPreviewScreen({
       exit={{ opacity: 0, y: -20 }}
       className="tw-mx-auto tw-flex tw-h-full tw-max-w-6xl tw-flex-col tw-pb-8"
     >
-      <div className="tw-flex-1 tw-space-y-10 tw-overflow-y-auto tw-px-4 tw-py-2 tw-scrollbar-thin tw-scrollbar-track-iron-900 tw-scrollbar-thumb-iron-700">
+      <div className="tw-flex-1 tw-space-y-10 tw-overflow-y-auto tw-px-4 tw-py-2 tw-pt-8 tw-scrollbar-thin tw-scrollbar-track-iron-900 tw-scrollbar-thumb-iron-700">
         <div className="tw-space-y-1">
           <h4 className="tw-mb-0 tw-text-base tw-font-semibold tw-text-iron-100">
             Submission Preview
diff --git a/components/waves/memes/submission/steps/AdditionalInfoStep.tsx b/components/waves/memes/submission/steps/AdditionalInfoStep.tsx
index cb4191c715..ae8c98739a 100644
--- a/components/waves/memes/submission/steps/AdditionalInfoStep.tsx
+++ b/components/waves/memes/submission/steps/AdditionalInfoStep.tsx
@@ -157,15 +157,13 @@ const AdditionalInfoStep: FC<AdditionalInfoStepProps> = ({
     // Every entry with a valid address must have count > 0
     const hasEntryWithAddressButNoCount = airdropEntries.some(
       (e) =>
-        e.address &&
-        validateStrictAddress(e.address) &&
-        (!e.count || e.count <= 0)
+        e.address.length > 0 && validateStrictAddress(e.address) && e.count <= 0
     );
     if (hasEntryWithAddressButNoCount) return false;
 
     // All provided addresses must be valid (even if count is 0)
     const hasInvalidAddress = airdropEntries.some(
-      (e) => e.address && !validateStrictAddress(e.address)
+      (e) => e.address.length > 0 && !validateStrictAddress(e.address)
     );
     if (hasInvalidAddress) return false;
 
@@ -210,93 +208,97 @@ const AdditionalInfoStep: FC<AdditionalInfoStepProps> = ({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      className="tw-mx-auto tw-flex tw-h-full tw-max-w-4xl tw-flex-col tw-pb-8"
+      className="tw-flex tw-h-full tw-w-full tw-flex-col"
     >
-      <div className="tw-flex-1 tw-space-y-12 tw-overflow-y-auto tw-px-4 tw-py-2 tw-scrollbar-thin tw-scrollbar-track-iron-900 tw-scrollbar-thumb-iron-700">
-        <p className="tw-text-sm tw-text-iron-400">
+      <div className="tw-mx-auto tw-w-full tw-max-w-4xl tw-flex-1 tw-overflow-y-auto tw-px-4 tw-pb-8 tw-pt-8 tw-scrollbar-thin tw-scrollbar-track-iron-900 tw-scrollbar-thumb-iron-700 md:tw-px-8">
+        <p className="tw-mb-8 tw-text-sm tw-text-iron-400">
           Complete the following details for distribution and storytelling
           purposes.
         </p>
 
-        <AirdropConfig
-          entries={airdropEntries}
-          onEntriesChange={onAirdropEntriesChange}
-          airdropLengthStatus={metadataStatuses["airdrop_config"]}
-        />
+        <div className="tw-flex tw-flex-col tw-gap-y-10">
+          <AirdropConfig
+            entries={airdropEntries}
+            onEntriesChange={onAirdropEntriesChange}
+            airdropLengthStatus={metadataStatuses["airdrop_config"]}
+          />
 
-        <PaymentConfig
-          paymentInfo={paymentInfo}
-          onPaymentInfoChange={onPaymentInfoChange}
-          paymentInfoLengthStatus={metadataStatuses["payment_info"]}
-        />
+          <PaymentConfig
+            paymentInfo={paymentInfo}
+            onPaymentInfoChange={onPaymentInfoChange}
+            paymentInfoLengthStatus={metadataStatuses["payment_info"]}
+          />
 
-        <AllowlistBatchManager
-          batches={allowlistBatches}
-          onBatchesChange={onBatchesChange}
-          allowlistLengthStatus={metadataStatuses["allowlist_batches"]}
-          errors={allowlistBatches.map((batch) => {
-            const contractError = getContractError(batch.contract);
-            const tokenIdsError = getTokenIdsError(batch.token_ids_raw);
-            return {
-              ...(contractError ? { contract: contractError } : {}),
-              ...(tokenIdsError ? { token_ids: tokenIdsError } : {}),
-            };
-          })}
-        />
+          <AllowlistBatchManager
+            batches={allowlistBatches}
+            onBatchesChange={onBatchesChange}
+            allowlistLengthStatus={metadataStatuses["allowlist_batches"]}
+            errors={allowlistBatches.map((batch) => {
+              const contractError = getContractError(batch.contract);
+              const tokenIdsError = getTokenIdsError(batch.token_ids_raw);
+              return {
+                ...(contractError ? { contract: contractError } : {}),
+                ...(tokenIdsError ? { token_ids: tokenIdsError } : {}),
+              };
+            })}
+          />
 
-        <AdditionalMediaUpload
-          supportingMedia={supportingMedia}
-          artworkCommentary={artworkCommentary}
-          aboutArtist={aboutArtist}
-          previewImage={previewImage}
-          promoVideo={promoVideo}
-          requiresPreviewImage={requiresPreviewImage}
-          requiresPromoVideoOption={requiresPromoVideoOption}
-          previewRequiredMediaType={previewRequiredMediaType}
-          onSupportingMediaChange={onSupportingMediaChange}
-          onPreviewImageChange={onPreviewImageChange}
-          onPromoVideoChange={onPromoVideoChange}
-          onArtworkCommentaryChange={onArtworkCommentaryChange}
-          onAboutArtistChange={onAboutArtistChange}
-          aboutArtistLengthStatus={
-            aboutArtistStatus?.isWarning && !aboutArtistStatus.isError
-              ? aboutArtistStatus
-              : undefined
-          }
-          artworkCommentaryLengthStatus={
-            commentaryStatus?.isWarning && !commentaryStatus.isError
-              ? commentaryStatus
-              : undefined
-          }
-          additionalMediaLengthStatus={metadataStatuses["additional_media"]}
-          errors={{
-            ...(aboutArtistError ? { aboutArtist: aboutArtistError } : {}),
-            ...(artworkCommentaryError
-              ? { artworkCommentary: artworkCommentaryError }
-              : {}),
-          }}
-        />
+          <AdditionalMediaUpload
+            supportingMedia={supportingMedia}
+            artworkCommentary={artworkCommentary}
+            aboutArtist={aboutArtist}
+            previewImage={previewImage}
+            promoVideo={promoVideo}
+            requiresPreviewImage={requiresPreviewImage}
+            requiresPromoVideoOption={requiresPromoVideoOption}
+            previewRequiredMediaType={previewRequiredMediaType}
+            onSupportingMediaChange={onSupportingMediaChange}
+            onPreviewImageChange={onPreviewImageChange}
+            onPromoVideoChange={onPromoVideoChange}
+            onArtworkCommentaryChange={onArtworkCommentaryChange}
+            onAboutArtistChange={onAboutArtistChange}
+            aboutArtistLengthStatus={
+              aboutArtistStatus?.isWarning && !aboutArtistStatus.isError
+                ? aboutArtistStatus
+                : undefined
+            }
+            artworkCommentaryLengthStatus={
+              commentaryStatus?.isWarning && !commentaryStatus.isError
+                ? commentaryStatus
+                : undefined
+            }
+            additionalMediaLengthStatus={metadataStatuses["additional_media"]}
+            errors={{
+              ...(aboutArtistError ? { aboutArtist: aboutArtistError } : {}),
+              ...(artworkCommentaryError
+                ? { artworkCommentary: artworkCommentaryError }
+                : {}),
+            }}
+          />
+        </div>
       </div>
 
-      <div className="tw-mt-auto tw-flex tw-items-center tw-justify-between tw-border-t tw-border-iron-800 tw-px-4 tw-pt-6">
-        <SecondaryButton onClicked={onBack} disabled={isSubmitting}>
-          Back
-        </SecondaryButton>
-        <div className="tw-flex tw-items-center tw-gap-2">
-          <SecondaryButton
-            onClicked={onPreview}
-            disabled={!formValid || isSubmitting}
-          >
-            Preview
+      <div className="tw-mt-auto tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-800 tw-bg-iron-950 tw-py-3">
+        <div className="tw-mx-auto tw-flex tw-w-full tw-max-w-4xl tw-items-center tw-justify-between tw-px-4 md:tw-px-8">
+          <SecondaryButton onClicked={onBack} disabled={isSubmitting}>
+            Back
           </SecondaryButton>
-          <PrimaryButton
-            onClicked={onSubmit}
-            disabled={!formValid}
-            loading={isSubmitting}
-            padding="tw-px-6 tw-py-3"
-          >
-            Submit Artwork
-          </PrimaryButton>
+          <div className="tw-flex tw-items-center tw-gap-2">
+            <SecondaryButton
+              onClicked={onPreview}
+              disabled={!formValid || isSubmitting}
+            >
+              Preview
+            </SecondaryButton>
+            <PrimaryButton
+              onClicked={onSubmit}
+              disabled={!formValid}
+              loading={isSubmitting}
+              padding="tw-px-6 tw-py-3"
+            >
+              Submit Artwork
+            </PrimaryButton>
+          </div>
         </div>
       </div>
     </motion.div>
diff --git a/components/waves/memes/submission/steps/AgreementStep.tsx b/components/waves/memes/submission/steps/AgreementStep.tsx
index fb4aee05af..4d46078423 100644
--- a/components/waves/memes/submission/steps/AgreementStep.tsx
+++ b/components/waves/memes/submission/steps/AgreementStep.tsx
@@ -17,10 +17,10 @@ const AgreementStep: React.FC<AgreementStepProps> = ({
   onContinue,
 }) => {
   return (
-    <div className="tw-h-full tw-flex tw-flex-col tw-relative">
-      <div className="tw-flex-1 tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 desktop-hover:hover:tw-scrollbar-thumb-iron-300 tw-overflow-x-hidden tw-px-4 md:tw-px-8 tw-pt-2 tw-pb-6">
-        <div className="tw-max-w-6xl tw-mx-auto">
-          <div className="tw-text-iron-300 tw-text-base tw-space-y-2">
+    <div className="tw-relative tw-flex tw-h-full tw-flex-col">
+      <div className="tw-flex-1 tw-overflow-y-auto tw-overflow-x-hidden tw-px-4 tw-pb-6 tw-pt-2 tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300 md:tw-px-8">
+        <div className="tw-mx-auto tw-max-w-5xl">
+          <div className="tw-mt-6 tw-max-w-4xl tw-space-y-2 tw-text-base tw-text-iron-300">
             <p className="tw-mb-0">
               Before you submit your work to The Memes, we would like to make
               sure we are all on the same page about what this means for you and
@@ -32,33 +32,33 @@ const AgreementStep: React.FC<AgreementStepProps> = ({
               to one of the team members before you submit!
             </p>
           </div>
-          <div className="tw-mt-6 tw-flex tw-flex-col tw-bg-iron-900 tw-rounded-xl tw-p-4 lg:tw-p-6 tw-ring-1 tw-ring-iron-800">
+          <div className="tw-mt-6 tw-flex tw-flex-col tw-rounded-xl tw-bg-iron-900 tw-p-4 tw-ring-1 tw-ring-iron-800 lg:tw-p-6">
             <AgreementStepAgreement text={wave.participation.terms ?? ""} />
           </div>
         </div>
       </div>
-      <div className="tw-bg-iron-950 tw-border-t tw-border-iron-800 tw-border-solid tw-border-b-0 tw-border-x-0">
-        <div className="tw-px-4 md:tw-px-8 tw-py-4">
-          <div className="tw-max-w-6xl tw-mx-auto tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-between tw-gap-4">
+      <div className="tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-800 tw-bg-iron-950">
+        <div className="tw-px-4 tw-py-4 md:tw-px-8">
+          <div className="tw-mx-auto tw-flex tw-max-w-5xl tw-flex-col tw-items-center tw-justify-between tw-gap-4 md:tw-flex-row">
             <button
               onClick={() => setAgreements(!agreements)}
-              className="tw-flex tw-items-start tw-py-3 tw-px-4 tw-gap-3 tw-text-left tw-bg-iron-900/50 tw-rounded-lg tw-border-none tw-ring-1 tw-ring-iron-800 desktop-hover:hover:tw-ring-iron-700 tw-transition-all tw-flex-1"
+              className="tw-flex tw-flex-1 tw-items-start tw-gap-3 tw-rounded-lg tw-border-none tw-bg-iron-900/50 tw-px-4 tw-py-3 tw-text-left tw-ring-1 tw-ring-iron-800 tw-transition-all desktop-hover:hover:tw-ring-iron-700"
               aria-label={
                 agreements ? "Uncheck terms agreement" : "Check terms agreement"
               }
             >
               <div
-                className={`tw-w-5 tw-h-5 tw-flex-shrink-0 tw-rounded tw-border tw-border-solid tw-transition-all tw-duration-300 ${
+                className={`tw-h-5 tw-w-5 tw-flex-shrink-0 tw-rounded tw-border tw-border-solid tw-transition-all tw-duration-300 ${
                   agreements
-                    ? "tw-bg-primary-500 tw-border-primary-500 tw-shadow-[0_0_0_4px_rgba(139,92,246,0.1)]"
-                    : "tw-bg-iron-800 tw-border-iron-700"
+                    ? "tw-border-primary-500 tw-bg-primary-500 tw-shadow-[0_0_0_4px_rgba(139,92,246,0.1)]"
+                    : "tw-border-iron-700 tw-bg-iron-800"
                 } tw-flex tw-items-center tw-justify-center`}
               >
                 {agreements && (
                   <svg
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
-                    className="tw-w-3 tw-h-3 tw-text-white tw-flex-shrink-0"
+                    className="tw-h-3 tw-w-3 tw-flex-shrink-0 tw-text-white"
                     viewBox="0 0 20 20"
                     fill="currentColor"
                   >
diff --git a/components/waves/memes/submission/steps/ArtworkStep.tsx b/components/waves/memes/submission/steps/ArtworkStep.tsx
index 3ab184b07d..baaa98c0fa 100644
--- a/components/waves/memes/submission/steps/ArtworkStep.tsx
+++ b/components/waves/memes/submission/steps/ArtworkStep.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import PrimaryButton from "@/components/utils/button/PrimaryButton";
+import SecondaryButton from "@/components/utils/button/SecondaryButton";
 import MemesArtSubmissionFile from "@/components/waves/memes/MemesArtSubmissionFile";
 import MemesArtSubmissionTraits from "@/components/waves/memes/MemesArtSubmissionTraits";
 import React, { useCallback, useMemo } from "react";
@@ -331,6 +332,8 @@ const ArtworkStep: React.FC<ArtworkStepProps> = ({
       descriptionError={validation.errors.description}
       onTitleBlur={() => handleFieldBlur("title")}
       onDescriptionBlur={() => handleFieldBlur("description")}
+      showRequiredMarkers={true}
+      size="sm"
     />
   );
 
@@ -340,6 +343,8 @@ const ArtworkStep: React.FC<ArtworkStepProps> = ({
       setTraits={setTraits}
       validationErrors={validation.errors}
       onFieldBlur={handleFieldBlur}
+      showRequiredMarkers={true}
+      size="sm"
     />
   );
 
@@ -350,13 +355,11 @@ const ArtworkStep: React.FC<ArtworkStepProps> = ({
         className="tw-min-h-0 tw-w-full tw-flex-1 tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300 lg:tw-overflow-hidden"
       >
         <div className="tw-flex tw-min-h-full tw-w-full tw-flex-col lg:tw-h-full lg:tw-min-h-0 lg:tw-flex-row">
-          <div className="tw-w-full tw-px-4 tw-pb-6 desktop-hover:hover:tw-scrollbar-thumb-iron-300 lg:tw-min-h-0 lg:tw-w-1/2 lg:tw-overflow-y-auto lg:tw-pb-0 lg:tw-pl-8 lg:tw-pr-4 lg:tw-scrollbar-thin lg:tw-scrollbar-track-iron-800 lg:tw-scrollbar-thumb-iron-500">
-            <div className="lg:tw-h-full lg:tw-min-h-[520px]">
-              {renderMediaSubmissionPanel()}
-            </div>
+          <div className="tw-flex tw-w-full tw-flex-col tw-px-4 tw-pt-4 md:tw-pl-8 lg:tw-min-h-0 lg:tw-w-1/2 lg:tw-pr-4">
+            {renderMediaSubmissionPanel()}
           </div>
 
-          <div className="tw-w-full tw-px-4 tw-pb-6 desktop-hover:hover:tw-scrollbar-thumb-iron-300 lg:tw-min-h-0 lg:tw-w-1/2 lg:tw-overflow-y-auto lg:tw-pl-4 lg:tw-pr-8 lg:tw-scrollbar-thin lg:tw-scrollbar-track-iron-800 lg:tw-scrollbar-thumb-iron-500">
+          <div className="tw-w-full tw-px-4 tw-pb-6 tw-pt-6 desktop-hover:hover:tw-scrollbar-thumb-iron-300 md:tw-pl-6 md:tw-pr-8 lg:tw-min-h-0 lg:tw-w-1/2 lg:tw-overflow-y-auto lg:tw-scrollbar-thin lg:tw-scrollbar-track-iron-800 lg:tw-scrollbar-thumb-iron-500">
             <div className="tw-flex tw-flex-col tw-gap-y-6">
               {renderArtworkDetailsPanel()}
               {renderArtworkTraitsPanel()}
@@ -365,10 +368,8 @@ const ArtworkStep: React.FC<ArtworkStepProps> = ({
         </div>
       </div>
 
-      {/* Action Buttons - Fixed at bottom */}
       <div className="tw-border-x-0 tw-border-b-0 tw-border-t tw-border-solid tw-border-iron-800 tw-bg-iron-950 tw-py-3">
         <div className="tw-px-4 md:tw-px-8">
-          {/* Submission Progress - Only shown when active */}
           {submissionPhase !== "idle" && (
             <div className="tw-mb-4">
               <SubmissionProgress
@@ -380,37 +381,26 @@ const ArtworkStep: React.FC<ArtworkStepProps> = ({
             </div>
           )}
 
-          {/* Action buttons row */}
           <div className="tw-flex tw-items-center tw-justify-end tw-gap-x-3">
-            {/* Cancel button - always visible, but disabled during upload/processing and hidden on success */}
             {onCancel && submissionPhase !== "success" ? (
-              <button
-                onClick={
-                  submissionPhase === "uploading" ||
-                  submissionPhase === "processing"
-                    ? undefined
-                    : onCancel
-                }
+              <SecondaryButton
+                onClicked={onCancel}
                 disabled={
                   submissionPhase === "uploading" ||
                   submissionPhase === "processing"
                 }
-                className="tw-rounded-lg tw-border tw-border-solid tw-border-iron-800 tw-bg-iron-800 tw-px-3.5 tw-py-3 tw-text-sm tw-font-semibold tw-text-iron-300 tw-shadow-sm tw-ring-1 tw-ring-iron-700 tw-transition tw-duration-300 tw-ease-out focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 disabled:tw-cursor-not-allowed disabled:tw-opacity-50 desktop-hover:hover:tw-border-iron-700 desktop-hover:hover:tw-bg-iron-700 desktop-hover:hover:tw-ring-iron-650"
-                type="button"
               >
                 Cancel
-              </button>
+              </SecondaryButton>
             ) : (
               /* Keep this invisible div when button is not shown to maintain layout */
               <div></div>
             )}
 
-            {/* Submit button */}
             <div
               className={`tw-transition-all tw-duration-300 ${getButtonClass()}`}
             >
               <PrimaryButton
-                padding="tw-py-3 tw-px-3.5"
                 onClicked={handleSubmit}
                 loading={
                   isSubmitting &&
diff --git a/components/waves/memes/submission/ui/FormSection.tsx b/components/waves/memes/submission/ui/FormSection.tsx
index b9c9c0bf0f..4907e43405 100644
--- a/components/waves/memes/submission/ui/FormSection.tsx
+++ b/components/waves/memes/submission/ui/FormSection.tsx
@@ -17,15 +17,15 @@ interface FormSectionProps {
 const FormSection: React.FC<FormSectionProps> = ({
   title,
   children,
-  titleClassName = "tw-text-lg tw-font-semibold tw-text-iron-100",
+  titleClassName = "tw-text-base tw-font-semibold tw-tracking-tight tw-text-iron-100",
   contentClassName = "",
   headerRight,
 }) => {
   return (
     <div>
-      <div className="tw-flex tw-justify-between tw-items-center tw-mb-4">
+      <div className="tw-mb-4 tw-flex tw-items-center tw-justify-between">
         <div className={titleClassName}>{title}</div>
-        {headerRight && <div>{headerRight}</div>}
+        {headerRight !== undefined && <div>{headerRight}</div>}
       </div>
       <div className={contentClassName}>{children}</div>
     </div>
diff --git a/components/waves/memes/traits/BooleanTrait.tsx b/components/waves/memes/traits/BooleanTrait.tsx
index 01b873ccab..e1cef7d27e 100644
--- a/components/waves/memes/traits/BooleanTrait.tsx
+++ b/components/waves/memes/traits/BooleanTrait.tsx
@@ -123,14 +123,10 @@ export const BooleanTrait: React.FC<BooleanTraitProps> = React.memo(
         id={`field-${field}`}
         isFieldFilled={isFieldFilled}
       >
-        <div
-          ref={uiStateRef}
-          className="tw-flex tw-w-full tw-gap-3"
-          data-field={field}
-        >
+        <div ref={uiStateRef} className="tw-flex tw-gap-1" data-field={field}>
           <button
             onClick={handleYesClick}
-            className={`yes-button tw-flex-1 tw-rounded-lg tw-border-0 tw-px-3 tw-py-2 tw-text-sm tw-shadow-sm tw-ring-1 tw-ring-inset tw-transition-all ${
+            className={`yes-button tw-rounded-md tw-border-0 tw-px-3.5 tw-py-1.5 tw-text-[11px] tw-font-semibold tw-shadow-sm tw-ring-1 tw-ring-inset tw-transition-all ${
               traits[field]
                 ? "tw-bg-primary-400/30 tw-text-primary-300 tw-ring-primary-400/60"
                 : "tw-bg-iron-800/50 tw-text-iron-400 tw-ring-iron-700/50"
@@ -141,7 +137,7 @@ export const BooleanTrait: React.FC<BooleanTraitProps> = React.memo(
           </button>
           <button
             onClick={handleNoClick}
-            className={`no-button tw-flex-1 tw-rounded-lg tw-border-0 tw-px-3 tw-py-2 tw-text-sm tw-shadow-sm tw-ring-1 tw-ring-inset tw-transition-all ${
+            className={`no-button tw-rounded-md tw-border-0 tw-px-3.5 tw-py-1.5 tw-text-[11px] tw-font-semibold tw-shadow-sm tw-ring-1 tw-ring-inset tw-transition-all ${
               traits[field] === false
                 ? "tw-bg-primary-400/30 tw-text-primary-300 tw-ring-primary-400/60"
                 : "tw-bg-iron-800/50 tw-text-iron-400 tw-ring-iron-700/50"
diff --git a/components/waves/memes/traits/DropdownTrait.tsx b/components/waves/memes/traits/DropdownTrait.tsx
index b772dc3f01..81990e9086 100644
--- a/components/waves/memes/traits/DropdownTrait.tsx
+++ b/components/waves/memes/traits/DropdownTrait.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import type { TraitsData } from "../submission/types/TraitsData";
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
 import React, { useCallback, useRef } from "react";
+import type { TraitsData } from "../submission/types/TraitsData";
 import { TraitWrapper } from "./TraitWrapper";
 
 interface DropdownTraitProps {
@@ -13,32 +14,92 @@ interface DropdownTraitProps {
   readonly options: readonly string[];
   readonly traits: TraitsData;
   readonly updateText: (field: keyof TraitsData, value: string) => void;
+  readonly showRequiredMarker?: boolean | undefined;
+  readonly size?: "default" | "sm" | undefined;
 }
 
+const SELECT_PLACEHOLDER_COLOR = "#848490";
+const SELECT_VALUE_COLOR = "#EFEFF1";
+const EMPTY_RING_CLASSES = ["tw-ring-iron-700", "desktop-hover:hover:tw-ring-iron-650"];
+const FILLED_RING_CLASSES = [
+  "tw-ring-emerald-600/45",
+  "desktop-hover:hover:tw-ring-emerald-600/55",
+];
+const getSelectTextColor = (value: string) =>
+  value.trim().length > 0 ? SELECT_VALUE_COLOR : SELECT_PLACEHOLDER_COLOR;
+
 /**
  * Simplified DropdownTrait component with direct state management
  */
 export const DropdownTrait: React.FC<DropdownTraitProps> = React.memo(
-  ({ label, field, traits, updateText, options, className, error, onBlur }) => {
-    // Create ref for select element
+  ({
+    label,
+    field,
+    traits,
+    updateText,
+    options,
+    className,
+    error,
+    onBlur,
+    showRequiredMarker = false,
+    size = "default",
+  }) => {
     const selectRef = useRef<HTMLSelectElement>(null);
+    const successIconRef = useRef<HTMLSpanElement>(null);
+    const currentValue = (traits[field] as string) || "";
+    const isFieldFilled = currentValue.trim().length > 0;
+    const showSuccessIcon = isFieldFilled && !error;
+
+    const syncSuccessIconVisibility = useCallback(
+      (value: string, hasError: boolean) => {
+        successIconRef.current?.classList.toggle(
+          "tw-hidden",
+          value.trim().length === 0 || hasError
+        );
+      },
+      []
+    );
+
+    const syncSelectVisualState = useCallback(
+      (element: HTMLSelectElement, value: string, hasError: boolean) => {
+        element.style.color = getSelectTextColor(value);
+        element.classList.remove(
+          ...EMPTY_RING_CLASSES,
+          ...FILLED_RING_CLASSES,
+          "tw-ring-red"
+        );
+
+        if (hasError) {
+          element.classList.add("tw-ring-red");
+        } else if (value.trim().length > 0) {
+          element.classList.add(...FILLED_RING_CLASSES);
+        } else {
+          element.classList.add(...EMPTY_RING_CLASSES);
+        }
+
+        syncSuccessIconVisibility(value, hasError);
+      },
+      [syncSuccessIconVisibility]
+    );
 
-    // Update select value when traits change
     React.useEffect(() => {
-      const value = (traits[field] as string) || "";
-      if (selectRef.current && value !== selectRef.current.value) {
-        selectRef.current.value = value;
+      if (selectRef.current && currentValue !== selectRef.current.value) {
+        selectRef.current.value = currentValue;
+      }
+      if (selectRef.current) {
+        syncSelectVisualState(selectRef.current, currentValue, Boolean(error));
       }
-    }, [traits, field]);
+    }, [currentValue, error, syncSelectVisualState]);
 
     // Handle change events
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLSelectElement>) => {
         const newValue = e.target.value;
+        syncSelectVisualState(e.target, newValue, Boolean(error));
         // For dropdowns, we can update immediately
         updateText(field, newValue);
       },
-      [field, updateText]
+      [error, field, syncSelectVisualState, updateText]
     );
 
     // Handle blur events
@@ -49,11 +110,8 @@ export const DropdownTrait: React.FC<DropdownTraitProps> = React.memo(
       }
     }, [onBlur, field]);
 
-    // Check if field is filled (option selected, not empty default)
-    const isFieldFilled = React.useMemo(() => {
-      const currentValue = (traits[field] as string) || "";
-      return currentValue.trim().length > 0;
-    }, [traits, field]);
+    const paddingClass =
+      size === "sm" ? "tw-px-3 tw-py-2.5" : "tw-px-4 tw-py-3.5";
 
     return (
       <TraitWrapper
@@ -61,34 +119,37 @@ export const DropdownTrait: React.FC<DropdownTraitProps> = React.memo(
         className={className}
         error={error}
         isFieldFilled={isFieldFilled}
+        showRequiredMarker={showRequiredMarker}
+        labelRightAdornment={
+          <span
+            ref={successIconRef}
+            className={showSuccessIcon ? "" : "tw-hidden"}
+          >
+            <CheckCircleIcon className="tw-h-3.5 tw-w-3.5 tw-flex-shrink-0 tw-text-emerald-500" />
+          </span>
+        }
+        size={size}
       >
         <select
           ref={selectRef}
-          defaultValue={(traits[field] as string) || ""}
+          defaultValue={currentValue}
           onChange={handleChange}
           onBlur={handleBlur}
-          className={`tw-form-select tw-w-full tw-bg-iron-900 tw-border-0 tw-outline-none tw-rounded-lg tw-px-4 tw-py-3.5 
-          tw-text-sm tw-text-iron-100 tw-cursor-pointer tw-transition-all tw-duration-500 tw-ease-in-out
-          tw-ring-1 ${
-            error
-              ? "tw-ring-red"
-              : "tw-ring-iron-700 desktop-hover:hover:tw-ring-iron-650 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400"
-          }
-          tw-appearance-none
-          [&>option]:tw-bg-iron-950 [&>option]:tw-text-iron-100
-          ${isFieldFilled && !error ? "tw-pr-10" : ""}`}
-          style={{
-            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E")`,
-            backgroundPosition: "right 0.5rem center",
-            backgroundRepeat: "no-repeat",
-            backgroundSize: "1.5em 1.5em",
-          }}
+          className={`tw-form-select tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-outline-none ${paddingClass} tw-cursor-pointer tw-text-base sm:tw-text-sm tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 tw-appearance-none [&>option]:tw-bg-iron-950 [&>option]:tw-text-iron-100`}
+          style={{ color: getSelectTextColor(currentValue) }}
         >
-          <option value="" className="tw-bg-iron-950">
+          <option
+            value=""
+            className="tw-bg-iron-950"
+            style={{ color: SELECT_PLACEHOLDER_COLOR }}>
             Select {label}
           </option>
           {options.map((option) => (
-            <option key={option} value={option} className="tw-bg-iron-950">
+            <option
+              key={option}
+              value={option}
+              className="tw-bg-iron-950"
+              style={{ color: SELECT_VALUE_COLOR }}>
               {option}
             </option>
           ))}
diff --git a/components/waves/memes/traits/NumberTrait.tsx b/components/waves/memes/traits/NumberTrait.tsx
index 345522c41b..2c64e159d3 100644
--- a/components/waves/memes/traits/NumberTrait.tsx
+++ b/components/waves/memes/traits/NumberTrait.tsx
@@ -16,6 +16,8 @@ interface NumberTraitProps {
   readonly max: number;
   readonly traits: TraitsData;
   readonly updateNumber: (field: keyof TraitsData, value: number) => void;
+  readonly showRequiredMarker?: boolean | undefined;
+  readonly size?: "default" | "sm" | undefined;
 }
 
 /**
@@ -34,6 +36,8 @@ export const NumberTrait: React.FC<NumberTraitProps> = React.memo(
     className,
     error,
     onBlur,
+    showRequiredMarker = false,
+    size = "default",
   }) => {
     // Use a ref for direct DOM access
     const inputRef = useRef<HTMLInputElement>(null);
@@ -167,6 +171,7 @@ export const NumberTrait: React.FC<NumberTraitProps> = React.memo(
     const isFieldFilled = useMemo(() => {
       const n = Number.parseFloat(currentInputValue);
       if (!Number.isFinite(n)) return false;
+      if (n === 0) return false;
       if (min !== undefined && n < min) return false;
       if (max !== undefined && n > max) return false;
       return true;
@@ -176,9 +181,14 @@ export const NumberTrait: React.FC<NumberTraitProps> = React.memo(
     let stateClassName: string;
     if (readOnly) {
       stateClassName =
-        "tw-bg-iron-800 tw-opacity-70 tw-cursor-not-allowed tw-text-iron-500";
+        isFieldFilled
+          ? "tw-bg-iron-800 tw-ring-emerald-700/40 tw-opacity-70 tw-cursor-not-allowed tw-text-iron-500"
+          : "tw-bg-iron-800 tw-ring-iron-700 tw-opacity-70 tw-cursor-not-allowed tw-text-iron-500";
     } else if (error) {
       stateClassName = "tw-bg-iron-900 tw-ring-red tw-cursor-text";
+    } else if (isFieldFilled) {
+      stateClassName =
+        "tw-bg-iron-900 tw-ring-emerald-600/45 desktop-hover:hover:tw-ring-emerald-600/55 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 tw-cursor-text";
     } else {
       stateClassName =
         "tw-bg-iron-900 tw-ring-iron-700 desktop-hover:hover:tw-ring-iron-650 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 tw-cursor-text";
@@ -194,6 +204,8 @@ export const NumberTrait: React.FC<NumberTraitProps> = React.memo(
         className={className}
         error={error}
         isFieldFilled={isFieldFilled}
+        showRequiredMarker={showRequiredMarker}
+        size={size}
       >
         <input
           ref={inputRef}
@@ -205,7 +217,7 @@ export const NumberTrait: React.FC<NumberTraitProps> = React.memo(
           readOnly={readOnly}
           min={min}
           max={max}
-          className={`tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-px-4 tw-py-3.5 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 [&::-webkit-inner-spin-button]:tw-appearance-none [&::-webkit-outer-spin-button]:tw-appearance-none ${stateClassName} ${paddingClassName}`}
+          className={`tw-form-input tw-w-full tw-rounded-lg tw-border-0 ${size === "sm" ? "tw-px-3 tw-py-2.5" : "tw-px-4 tw-py-3.5"} tw-text-base sm:tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 [&::-webkit-inner-spin-button]:tw-appearance-none [&::-webkit-outer-spin-button]:tw-appearance-none ${stateClassName} ${paddingClassName}`}
           style={{
             MozAppearance: "textfield",
             WebkitAppearance: "none",
diff --git a/components/waves/memes/traits/Section.tsx b/components/waves/memes/traits/Section.tsx
index 63c2221f81..c29f1544c3 100644
--- a/components/waves/memes/traits/Section.tsx
+++ b/components/waves/memes/traits/Section.tsx
@@ -12,13 +12,12 @@ interface SectionProps {
  */
 const SectionComponent: React.FC<SectionProps> = ({ title, children }) => {
   return (
-    <div className="tw-space-y-5">
-      <div className="tw-flex tw-items-center tw-gap-3">
-        <div className="-tw-mt-2 tw-h-0.5 tw-w-8 tw-bg-gradient-to-r tw-from-iron-700 tw-to-transparent tw-rounded-full"></div>
-        <h3 className="tw-text-sm tw-font-medium tw-text-iron-400 tw-uppercase tw-tracking-wider">
+    <div className="tw-space-y-6">
+      <div className="tw-flex tw-items-center tw-gap-5">
+        <h3 className="tw-whitespace-nowrap tw-text-[11px] tw-font-semibold tw-uppercase tw-tracking-wider tw-text-iron-500 tw-mb-0">
           {title}
         </h3>
-        <div className="-tw-mt-2 tw-flex-1 tw-h-0.5 tw-bg-gradient-to-r tw-from-iron-800 tw-to-transparent tw-rounded-full"></div>
+        <div className="tw-h-px tw-flex-1 tw-bg-iron-800/80"></div>
       </div>
       {children}
     </div>
diff --git a/components/waves/memes/traits/TextTrait.tsx b/components/waves/memes/traits/TextTrait.tsx
index ace5656c61..82ef20962b 100644
--- a/components/waves/memes/traits/TextTrait.tsx
+++ b/components/waves/memes/traits/TextTrait.tsx
@@ -15,6 +15,8 @@ type TextTraitProps = {
   readonly className?: string | undefined;
   readonly error?: string | null | undefined;
   readonly onBlur?: ((field: keyof TraitsData) => void) | undefined;
+  readonly showRequiredMarker?: boolean | undefined;
+  readonly size?: "default" | "sm" | undefined;
 };
 
 /**
@@ -32,6 +34,8 @@ export const TextTrait: React.FC<TextTraitProps> = React.memo(
     className,
     error,
     onBlur,
+    showRequiredMarker = false,
+    size = "default",
   }) => {
     const currentTraitValue = ((traits[field] as string) ?? "").toString();
     // Use a ref to track the input element
@@ -103,9 +107,14 @@ export const TextTrait: React.FC<TextTraitProps> = React.memo(
       let stateClassName: string;
       if (readOnly) {
         stateClassName =
-          "tw-bg-iron-700 tw-opacity-70 tw-cursor-not-allowed tw-text-iron-300";
+          isFieldFilled
+            ? "tw-bg-iron-700 tw-ring-emerald-700/40 tw-text-iron-300 tw-opacity-70 tw-cursor-not-allowed"
+            : "tw-bg-iron-700 tw-ring-iron-700 tw-text-iron-300 tw-opacity-70 tw-cursor-not-allowed";
       } else if (error) {
         stateClassName = "tw-bg-iron-900 tw-ring-red tw-cursor-text";
+      } else if (isFieldFilled) {
+        stateClassName =
+          "tw-bg-iron-900 tw-ring-emerald-600/45 desktop-hover:hover:tw-ring-emerald-600/55 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 tw-cursor-text";
       } else {
         stateClassName =
           "tw-bg-iron-900 tw-ring-iron-700 desktop-hover:hover:tw-ring-iron-650 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 tw-cursor-text";
@@ -114,8 +123,10 @@ export const TextTrait: React.FC<TextTraitProps> = React.memo(
       // Determine padding for checkmark
       const paddingClassName = isFieldFilled && !error ? "tw-pr-10" : "";
 
-      return `tw-form-input tw-font-normal tw-w-full tw-rounded-lg tw-px-4 tw-py-3.5 tw-text-sm tw-text-iron-100 tw-transition-all tw-duration-500 tw-ease-in-out tw-border-0 tw-outline-none placeholder:tw-text-iron-500 tw-ring-1 ${stateClassName} ${paddingClassName}`;
-    }, [readOnly, error, isFieldFilled]);
+      const paddingBase =
+        size === "sm" ? "tw-px-3 tw-py-2.5" : "tw-px-4 tw-py-3.5";
+      return `tw-form-input tw-font-normal tw-w-full tw-rounded-lg ${paddingBase} tw-text-base sm:tw-text-sm tw-text-iron-100 tw-transition-all tw-duration-500 tw-ease-in-out tw-border-0 tw-outline-none placeholder:tw-text-iron-500 tw-ring-1 ${stateClassName} ${paddingClassName}`;
+    }, [readOnly, error, isFieldFilled, size]);
 
     return (
       <TraitWrapper
@@ -124,6 +135,8 @@ export const TextTrait: React.FC<TextTraitProps> = React.memo(
         className={className}
         error={error}
         isFieldFilled={isFieldFilled}
+        showRequiredMarker={showRequiredMarker}
+        size={size}
       >
         <input
           ref={inputRef}
@@ -147,7 +160,9 @@ export const TextTrait: React.FC<TextTraitProps> = React.memo(
       prevProps.readOnly === nextProps.readOnly &&
       prevProps.placeholder === nextProps.placeholder &&
       prevProps.traits[prevProps.field] === nextProps.traits[nextProps.field] &&
-      prevProps.error === nextProps.error
+      prevProps.error === nextProps.error &&
+      prevProps.showRequiredMarker === nextProps.showRequiredMarker &&
+      prevProps.size === nextProps.size
     );
   }
 );
diff --git a/components/waves/memes/traits/TraitField.tsx b/components/waves/memes/traits/TraitField.tsx
index 6a3027acf5..bfc6595a03 100644
--- a/components/waves/memes/traits/TraitField.tsx
+++ b/components/waves/memes/traits/TraitField.tsx
@@ -16,6 +16,8 @@ interface TraitFieldProps {
   readonly error?: string | null | undefined;
   readonly onBlur?: (() => void) | undefined;
   readonly readOnlyOverride?: boolean;
+  readonly showRequiredMarkers?: boolean | undefined;
+  readonly size?: "default" | "sm" | undefined;
 }
 
 // Create the component
@@ -28,6 +30,8 @@ const TraitFieldComponent: React.FC<TraitFieldProps> = ({
   error,
   onBlur,
   readOnlyOverride,
+  showRequiredMarkers = false,
+  size,
 }) => {
   const effectiveReadOnly =
     readOnlyOverride === undefined ? definition.readOnly : readOnlyOverride;
@@ -42,6 +46,8 @@ const TraitFieldComponent: React.FC<TraitFieldProps> = ({
         placeholder={definition.placeholder}
         error={error}
         onBlur={onBlur}
+        showRequiredMarker={showRequiredMarkers}
+        size={size}
       />
     );
   }
@@ -58,6 +64,8 @@ const TraitFieldComponent: React.FC<TraitFieldProps> = ({
         max={definition.max}
         error={error}
         onBlur={onBlur}
+        showRequiredMarker={showRequiredMarkers}
+        size={size}
       />
     );
   }
@@ -74,6 +82,8 @@ const TraitFieldComponent: React.FC<TraitFieldProps> = ({
         options={definition.options}
         error={error}
         onBlur={onBlur}
+        showRequiredMarker={showRequiredMarkers}
+        size={size}
       />
     );
   }
@@ -141,8 +151,17 @@ const arePropsEqual = (
     }
   }
 
+  const sizeMatches = prevProps.size === nextProps.size;
+  const requiredMarkerMatches =
+    prevProps.showRequiredMarkers === nextProps.showRequiredMarkers;
+
   return (
-    fieldMatches && definitionMatches && readOnlyOverrideMatches && errorMatches
+    fieldMatches &&
+    definitionMatches &&
+    readOnlyOverrideMatches &&
+    errorMatches &&
+    requiredMarkerMatches &&
+    sizeMatches
   );
 };
 
diff --git a/components/waves/memes/traits/TraitWrapper.tsx b/components/waves/memes/traits/TraitWrapper.tsx
index c729491828..22a893fd14 100644
--- a/components/waves/memes/traits/TraitWrapper.tsx
+++ b/components/waves/memes/traits/TraitWrapper.tsx
@@ -11,6 +11,10 @@ interface TraitWrapperProps {
   readonly error?: string | null | undefined;
   readonly id?: string | undefined;
   readonly isFieldFilled?: boolean | undefined;
+  readonly labelRightAdornment?: React.ReactNode;
+  readonly showRequiredMarker?: boolean | undefined;
+  readonly labelTone?: "default" | "muted" | undefined;
+  readonly size?: "default" | "sm" | undefined;
 }
 
 export const TraitWrapper: React.FC<TraitWrapperProps> = ({
@@ -22,14 +26,22 @@ export const TraitWrapper: React.FC<TraitWrapperProps> = ({
   error,
   id,
   isFieldFilled = false,
+  labelRightAdornment,
+  showRequiredMarker = false,
+  labelTone = "default",
+  size = "default",
 }) => {
   const fieldId = id ?? `field-${label.toLowerCase().replace(/\s+/g, "-")}`;
   const errorId = error ? `${fieldId}-error` : undefined;
+  const hasLabelRightAdornment =
+    labelRightAdornment !== undefined && labelRightAdornment !== null;
 
   const hasError = !!error && !readOnly;
 
   let labelClassName =
-    "tw-text-iron-300 group-focus-visible-within:tw-text-primary-400";
+    labelTone === "muted"
+      ? "tw-text-iron-400 group-focus-visible-within:tw-text-primary-400"
+      : "tw-text-iron-300 group-focus-visible-within:tw-text-primary-400";
   if (readOnly) {
     labelClassName = "tw-text-iron-500";
   } else if (hasError) {
@@ -39,60 +51,67 @@ export const TraitWrapper: React.FC<TraitWrapperProps> = ({
   if (isBoolean) {
     return (
       <div className={`tw-group tw-relative ${className ?? ""}`}>
-        <div className="tw-flex tw-items-center tw-justify-between tw-gap-4">
+        <div className="tw-flex tw-items-center tw-justify-between tw-rounded-lg tw-border tw-border-solid tw-border-iron-700/60 tw-bg-iron-900 tw-px-4 tw-py-2.5">
           <label
             htmlFor={fieldId}
-            className="tw-w-40 tw-flex-shrink-0 tw-cursor-pointer tw-text-sm tw-font-medium tw-text-iron-300"
+            className="tw-min-w-0 tw-flex-1 tw-cursor-pointer tw-truncate tw-text-sm tw-font-medium tw-text-iron-300"
           >
             {label}
           </label>
-          <div className="tw-max-w-xs tw-flex-1">{children}</div>
+          <div className="tw-flex-shrink-0">{children}</div>
         </div>
       </div>
     );
   }
 
-  const hasPaddingOverride = className?.includes("tw-pb-");
-  const basePadding = hasPaddingOverride ? "" : "tw-pb-8";
-
   return (
-    <div className={`tw-group tw-relative ${basePadding} ${className ?? ""}`}>
+    <div className={`tw-group tw-relative ${className ?? ""}`}>
       <div className="tw-relative">
         <label
           htmlFor={fieldId}
-          className={`tw-absolute -tw-top-2 tw-left-3 tw-z-10 tw-rounded-sm tw-bg-iron-900 tw-px-1 tw-text-xs tw-font-medium tw-transition-all ${labelClassName}`}
+          className={`tw-absolute -tw-top-2 tw-left-3 tw-z-10 tw-rounded-sm tw-bg-iron-900 tw-px-1 tw-font-medium tw-transition-all ${hasLabelRightAdornment ? "tw-flex tw-items-center tw-gap-1" : ""} ${size === "sm" ? "tw-text-[11px]" : "tw-text-xs"} ${labelClassName}`}
         >
-          {label}
+          <span className="tw-inline-flex tw-items-center tw-gap-0.5">
+            <span>{label}</span>
+            {showRequiredMarker && !readOnly && (
+              <span aria-hidden="true" className="tw-text-iron-500">
+                *
+              </span>
+            )}
+          </span>
+          {labelRightAdornment}
         </label>
 
         <div className="tw-relative tw-rounded-xl tw-bg-iron-950 tw-transition-all tw-duration-200">
           {React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
+            if (React.isValidElement<Record<string, unknown>>(child)) {
               return React.cloneElement(child, {
+                ...child.props,
                 id: fieldId,
                 "aria-invalid": hasError,
                 "aria-describedby": errorId,
-                ...(child.props || {}),
-              } as any);
+              });
             }
             return child;
           })}
 
-          {isFieldFilled && !hasError && (
-            <div className="tw-pointer-events-none tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-transform">
-              <CheckCircleIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-emerald-500" />
+          {!hasLabelRightAdornment && isFieldFilled && !hasError && (
+            <div
+              className={`tw-pointer-events-none tw-absolute tw-inset-y-0 tw-flex tw-items-center ${
+                size === "sm" ? "tw-right-2.5" : "tw-right-3"
+              }`}
+            >
+              <CheckCircleIcon
+                className={`tw-flex-shrink-0 tw-text-emerald-500 ${
+                  size === "sm" ? "tw-h-[18px] tw-w-[18px]" : "tw-h-5 tw-w-5"
+                }`}
+              />
             </div>
           )}
         </div>
       </div>
 
-      {hasPaddingOverride ? (
-        <ValidationError error={error} id={errorId} className="tw-mt-1" />
-      ) : (
-        <div className="tw-absolute tw-bottom-0 tw-left-0 tw-right-0">
-          <ValidationError error={error} id={errorId} className="tw-mt-0" />
-        </div>
-      )}
+      <ValidationError error={error} id={errorId} className="tw-mt-1" />
     </div>
   );
 };
diff --git a/constants/submission-media.constants.ts b/constants/submission-media.constants.ts
index a127da9a2a..9a39b82658 100644
--- a/constants/submission-media.constants.ts
+++ b/constants/submission-media.constants.ts
@@ -1,5 +1,10 @@
 export type SubmissionMediaCategory = "image" | "video" | "interactive";
 
+interface SubmissionUiFormatGroup {
+  kind: SubmissionMediaCategory;
+  label: string;
+}
+
 interface SubmissionMediaType {
   mimeType: string;
   format: string;
@@ -75,12 +80,10 @@ export const SUBMISSION_INTERACTIVE_MIME_TYPES = SUBMISSION_MEDIA_TYPES.filter(
 export const SUBMISSION_FILE_INPUT_ACCEPT =
   "image/png,image/jpeg,image/jpg,image/gif,video/mp4,video/quicktime,.mov,model/gltf-binary,model/gltf+json,application/octet-stream,.glb,.gltf";
 
-export const SUBMISSION_UI_FORMAT_CATEGORIES = [
-  "PNG",
-  "JPG",
-  "GIF",
-  "VIDEO",
-  "GLB",
+export const SUBMISSION_UI_FORMAT_GROUPS: SubmissionUiFormatGroup[] = [
+  { kind: "image", label: "PNG, JPG, GIF" },
+  { kind: "video", label: "VIDEO" },
+  { kind: "interactive", label: "GLB" },
 ];
 
 const CATEGORY_STYLES: Record<