diff --git a/packages/documentation/cypress/snapshots/components/form-footer.snapshot.ts b/packages/documentation/cypress/snapshots/components/form-footer.snapshot.ts
new file mode 100644
index 0000000000..31594064b4
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/form-footer.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Form footer', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--form-footer');
+    cy.get('.form-footer post-icon', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Form footer', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/components/forms/form-footer/form-footer.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/form-footer/form-footer.snapshot.stories.ts
new file mode 100644
index 0000000000..cc54c62dca
--- /dev/null
+++ b/packages/documentation/src/stories/components/forms/form-footer/form-footer.snapshot.stories.ts
@@ -0,0 +1,50 @@
+import type { StoryObj } from '@storybook/web-components';
+import meta from './form-footer.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const FormFooter: Story = {
+  render: () => {
+    return html`
+      <div class="d-flex flex-column gap-3">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} d-flex flex-column p-3 gap-3">
+              ${bombArgs({
+                leftAction: [true, false],
+              })
+                .map(
+                  args => html`
+                    <div class="form-footer">
+                      ${args.leftAction
+                        ? html`
+                            <button class="btn btn-tertiary">
+                              <post-icon aria-hidden="true" name="3024"></post-icon>Back
+                            </button>
+                          `
+                        : null}
+                      <div class="form-footer-right-actions">
+                        <button class="btn btn-primary">
+                          Send<post-icon aria-hidden="true" name="3020"></post-icon>
+                        </button>
+                        <button class="btn btn-secondary">Cancel</button>
+                      </div>
+                    </div>
+                  `,
+                )}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};
diff --git a/packages/styles/src/components/form-footer.scss b/packages/styles/src/components/form-footer.scss
index 911e130715..99ccaff0a7 100644
--- a/packages/styles/src/components/form-footer.scss
+++ b/packages/styles/src/components/form-footer.scss
@@ -23,6 +23,10 @@ tokens.$default-map: components.$post-form-footer;
   &-right-actions {
     @include utility-mx.responsive-actions();
     gap: tokens.get('post-form-footer', 'post-form-footer-gap');
+
+    @include media-breakpoint-up(md) {
+      margin-left: auto;
+    }
   }
 
   @include media-breakpoint-up(md) {