diff --git a/src/www/ui_components/server-rename-dialog.js b/src/www/ui_components/server-rename-dialog.js
index b02e1c29e4..2efed30e4f 100644
--- a/src/www/ui_components/server-rename-dialog.js
+++ b/src/www/ui_components/server-rename-dialog.js
@@ -14,6 +14,7 @@
   limitations under the License.
 */
 
+import '@material/mwc-textfield';
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
@@ -21,23 +22,19 @@ import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
 Polymer({
   _template: html`
     <style>
-      h3 {
-        margin-bottom: 0;
-      }
-      paper-input {
+      mwc-textfield {
         margin-top: 0;
-        --paper-input-container-focus-color: var(--medium-green);
       }
     </style>
     <paper-dialog id="renameDialog" with-backdrop="">
       <h3>[[localize('server-rename')]]</h3>
-      <paper-input id="serverNameInput" always-float-label="" maxlength="100" tabindex="0"></paper-input>
+      <mwc-textfield id="serverNameInput" maxlength="100" tabindex="0"></mwc-textfield>
       <div class="buttons">
         <paper-button dialog-dismiss="">[[localize('cancel')]]</paper-button>
         <paper-button dialog-confirm="" on-tap="_saveRename">[[localize('save')]]</paper-button>
       </div>
     </paper-dialog>
-`,
+  `,
 
   is: 'server-rename-dialog',
 
@@ -50,7 +47,7 @@ Polymer({
     __serverId: String,
   },
 
-  open: function(serverName, serverId) {
+  open: function (serverName, serverId) {
     // Store the initial serverName so we can know if it changed, and
     // store the serverId so we can emit the rename request event.
     this.__serverName = serverName;
@@ -63,10 +60,10 @@ Polymer({
     });
   },
 
-  _saveRename: function() {
+  _saveRename: function () {
     const newName = this.$.serverNameInput.value;
     if (newName !== this.__serverName) {
       this.fire('RenameRequested', {serverId: this.__serverId, newName: newName});
     }
-  }
+  },
 });
diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts
index 5e8a95dd13..d65fa84ae8 100644
--- a/src/www/views/contact_view/index.spec.ts
+++ b/src/www/views/contact_view/index.spec.ts
@@ -56,7 +56,7 @@ describe('ContactView client variant', () => {
     radioButton.click();
     await nextFrame();
 
-    const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
+    const exitCard = el.shadowRoot!.querySelector('.exit')!;
     expect(exitCard.textContent).toContain('experiencing high support volume');
   });
 
@@ -68,7 +68,7 @@ describe('ContactView client variant', () => {
     el.reset();
     await nextFrame();
 
-    const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
+    const exitCard = el.shadowRoot!.querySelector('.exit')!;
     expect(exitCard).toBeNull();
   });
 
@@ -128,7 +128,7 @@ describe('ContactView client variant', () => {
         issue.click();
         await nextFrame();
 
-        const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
+        const exitCard = el.shadowRoot!.querySelector('.exit')!;
         expect(exitCard.textContent).toContain(expectedMsg);
       });
     }
@@ -190,7 +190,7 @@ describe('ContactView client variant', () => {
 
         await nextFrame();
 
-        expect(el.shadowRoot?.querySelector('h1')?.textContent).toContain('Tell us how we can help.');
+        expect(el.shadowRoot?.querySelector('p.intro')?.textContent).toContain('Tell us how we can help.');
         expect(el.shadowRoot?.querySelector('support-form')).toBeNull();
       });
     });
diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
index 4bd195b026..2b0b0c209c 100644
--- a/src/www/views/contact_view/index.ts
+++ b/src/www/views/contact_view/index.ts
@@ -26,7 +26,6 @@ import {Radio} from '@material/mwc-radio';
 import {SingleSelectedEvent} from '@material/mwc-list/mwc-list';
 
 import './support_form';
-import {CardType} from '../shared/card';
 import {IssueType, UNSUPPORTED_ISSUE_TYPE_HELPPAGES} from './issue_type';
 import {AppType} from './app_type';
 import {FormValues, SupportForm, ValidFormValues} from './support_form';
@@ -45,15 +44,20 @@ export class ContactView extends LitElement {
   static styles = [
     css`
       :host {
+        background: #fff;
         color: var(--outline-text-color);
-        display: block;
         font-family: var(--outline-font-family);
-        margin: 0 auto;
-        max-width: var(--contact-view-max-width);
         padding: var(--contact-view-gutter, var(--outline-gutter));
         width: 100%;
       }
 
+      main {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: var(--contact-view-max-width);
+      }
+
       mwc-circular-progress {
         left: 50%;
         position: absolute;
@@ -66,17 +70,13 @@ export class ContactView extends LitElement {
         margin-bottom: var(--contact-view-gutter, var(--outline-gutter));
       }
 
-      outline-card {
-        width: 100%;
-      }
-
       p {
         margin-top: .25rem;
       }
 
       ol {
         list-style-type: none;
-        margin: .25rem 0;
+        margin: 1.5rem 0;
         padding-inline-start: 0;
       }
 
@@ -89,8 +89,9 @@ export class ContactView extends LitElement {
          * this issue.
          */
         --mdc-menu-max-height: 200px;
-        --mdc-menu-max-width: calc(100vw - calc(var(--outline-gutter) * 4));
+        --mdc-menu-max-width: min(calc(100vw - calc(var(--outline-gutter) * 4)), var(--contact-view-max-width));
         margin-top: 1rem;
+        max-width: var(--contact-view-max-width);
         width: 100%;
       }
 
@@ -99,6 +100,7 @@ export class ContactView extends LitElement {
       }
 
       mwc-list-item {
+        line-height: 1.25rem;
         /**
          * The default styling of list items that wrap to 3+ lines is bad, and
          * our items here are quite long and tend to wrap that much. To allow
@@ -231,7 +233,7 @@ export class ContactView extends LitElement {
   }
 
   private get renderIntroTemplate(): TemplateResult {
-    return html`<h1 class="intro">${this.localize('contact-view-intro')}</h1>`;
+    return html`<p class="intro">${this.localize('contact-view-intro')}</p>`;
   }
 
   private get renderForm(): TemplateResult | typeof nothing {
@@ -253,14 +255,14 @@ export class ContactView extends LitElement {
     `;
   }
 
-  render() {
+  private get renderMainContent(): TemplateResult {
     switch (this.step) {
       case Step.FORM: {
         return html` ${this.renderIntroTemplate} ${this.renderForm} `;
       }
 
       case Step.EXIT: {
-        return html` <outline-card class="exit" .type=${CardType.Elevated}> ${this.exitTemplate} </outline-card> `;
+        return html` <p class="exit">${this.exitTemplate}</p>`;
       }
 
       case Step.ISSUE_WIZARD:
@@ -268,46 +270,47 @@ export class ContactView extends LitElement {
         return html`
           ${this.renderIntroTemplate}
 
-          <outline-card .type=${CardType.Elevated}>
-            <p>${this.localize('contact-view-open-ticket')}</p>
-
-            <ol>
-              ${this.openTicketSelectionOptions.map(
-                element => html`
-                  <li>
-                    <mwc-formfield .label=${this.localize(element.labelMsg)}>
-                      <mwc-radio
-                        name="open-ticket"
-                        .value="${element.value}"
-                        required
-                        @change=${this.selectHasOpenTicket}
-                        ${ref(element.ref)}
-                      >
-                      </mwc-radio>
-                    </mwc-formfield>
-                  </li>
-                `
-              )}
-            </ol>
-
-            <mwc-select
-              .label=${this.localize('contact-view-issue')}
-              outlined
-              ?hidden=${!this.showIssueSelector}
-              ?fixedMenuPosition=${true}
-              @selected="${this.selectIssue}"
-            >
-              ${ContactView.ISSUES[this.variant].map(value => {
-                return html`
-                  <mwc-list-item value="${value}">
-                    <span>${this.localize(`contact-view-issue-${value}`)}</span>
-                  </mwc-list-item>
-                `;
-              })}
-            </mwc-select>
-          </outline-card>
+          <p>${this.localize('contact-view-open-ticket')}</p>
+
+          <ol>
+            ${this.openTicketSelectionOptions.map(
+              element => html`
+                <li>
+                  <mwc-formfield .label=${this.localize(element.labelMsg)}>
+                    <mwc-radio
+                      name="open-ticket"
+                      .value="${element.value}"
+                      required
+                      @change=${this.selectHasOpenTicket}
+                      ${ref(element.ref)}
+                    >
+                    </mwc-radio>
+                  </mwc-formfield>
+                </li>
+              `
+            )}
+          </ol>
+
+          <mwc-select
+            .label=${this.localize('contact-view-issue')}
+            ?hidden=${!this.showIssueSelector}
+            ?fixedMenuPosition=${true}
+            @selected="${this.selectIssue}"
+          >
+            ${ContactView.ISSUES[this.variant].map(value => {
+              return html`
+                <mwc-list-item value="${value}">
+                  <span>${this.localize(`contact-view-issue-${value}`)}</span>
+                </mwc-list-item>
+              `;
+            })}
+          </mwc-select>
         `;
       }
     }
   }
+
+  render() {
+    return html`<main>${this.renderMainContent}</main>`;
+  }
 }
diff --git a/src/www/views/contact_view/support_form/index.ts b/src/www/views/contact_view/support_form/index.ts
index aea0eb49fc..2eb421f7d8 100644
--- a/src/www/views/contact_view/support_form/index.ts
+++ b/src/www/views/contact_view/support_form/index.ts
@@ -22,7 +22,6 @@ import '@material/mwc-button';
 import '@material/mwc-select';
 import '@material/mwc-textarea';
 import '@material/mwc-textfield';
-import {CardType} from '../../shared/card';
 import {AppType} from '../app_type';
 import {TextField} from '@material/mwc-textfield';
 import {SelectedDetail} from '@material/mwc-menu/mwc-menu-base';
@@ -57,10 +56,7 @@ export class SupportForm extends LitElement {
     css`
       :host {
         font-family: var(--outline-font-family);
-      }
-
-      outline-card {
-        min-width: 100%;
+        width: 100%;
       }
 
       mwc-select {
@@ -78,6 +74,11 @@ export class SupportForm extends LitElement {
         font-size: 0.8rem;
         text-align: end;
       }
+
+      .actions {
+        display: flex;
+        justify-content: end;
+      }
     `,
   ];
 
@@ -159,7 +160,6 @@ export class SupportForm extends LitElement {
         .value=${live(this.values.cloudProvider ?? '')}
         .disabled=${this.disabled}
         required
-        outlined
         @selected=${(e: CustomEvent<SelectedDetail<number>>) => {
           if (e.detail.index !== -1) {
             this.values.cloudProvider = providers[e.detail.index].value;
@@ -183,7 +183,6 @@ export class SupportForm extends LitElement {
         .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
         .disabled=${this.disabled}
         required
-        outlined
         @input=${this.handleTextInput}
         @blur=${this.checkFormValidity}
       ></mwc-textfield>
@@ -193,61 +192,56 @@ export class SupportForm extends LitElement {
   render() {
     return html`
       <form ${ref(this.formRef)} @submit=${this.submit}>
-        <outline-card .type=${CardType.Elevated}>
-          <mwc-textfield
-            name="email"
-            type="email"
-            .label=${this.localize('support-form-email')}
-            .value=${live(this.values.email ?? '')}
-            .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
-            autoValidate
-            .validationMessage=${this.localize('support-form-email-invalid')}
-            .disabled=${this.disabled}
-            required
-            outlined
-            @input=${this.handleTextInput}
-            @blur=${this.checkFormValidity}
-          ></mwc-textfield>
-
-          ${this.renderCloudProviderInputField} ${this.renderAccessKeySourceInputField}
-
-          <mwc-textfield
-            name="subject"
-            .label=${this.localize('support-form-subject')}
-            .value=${live(this.values.subject ?? '')}
-            .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
-            .disabled=${this.disabled}
-            required
-            outlined
-            @input=${this.handleTextInput}
-            @blur=${this.checkFormValidity}
-          ></mwc-textfield>
-          <mwc-textarea
-            name="description"
-            .label=${this.localize('support-form-description')}
-            .value=${live(this.values.description ?? '')}
-            rows="5"
-            .maxLength=${SupportForm.MAX_LENGTH_DESCRIPTION}
-            .disabled=${this.disabled}
-            required
-            outlined
-            @input=${this.handleTextInput}
-            @blur=${this.checkFormValidity}
-          >
-          </mwc-textarea>
-
-          <p>* = ${this.localize('support-form-required-field')}</p>
-
-          <span slot="card-actions">
-            <mwc-button .label=${this.localize('cancel')} .disabled=${this.disabled} @click=${this.cancel}></mwc-button>
-            <mwc-button
-              type="submit"
-              .label=${this.localize('submit')}
-              .disabled=${!this.valid || this.disabled}
-              @click=${this.submit}
-            ></mwc-button>
-          </span>
-        </outline-card>
+        <mwc-textfield
+          name="email"
+          type="email"
+          .label=${this.localize('support-form-email')}
+          .value=${live(this.values.email ?? '')}
+          .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
+          autoValidate
+          .validationMessage=${this.localize('support-form-email-invalid')}
+          .disabled=${this.disabled}
+          required
+          @input=${this.handleTextInput}
+          @blur=${this.checkFormValidity}
+        ></mwc-textfield>
+
+        ${this.renderCloudProviderInputField} ${this.renderAccessKeySourceInputField}
+
+        <mwc-textfield
+          name="subject"
+          .label=${this.localize('support-form-subject')}
+          .value=${live(this.values.subject ?? '')}
+          .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
+          .disabled=${this.disabled}
+          required
+          @input=${this.handleTextInput}
+          @blur=${this.checkFormValidity}
+        ></mwc-textfield>
+        <mwc-textarea
+          name="description"
+          .label=${this.localize('support-form-description')}
+          .value=${live(this.values.description ?? '')}
+          rows="5"
+          .maxLength=${SupportForm.MAX_LENGTH_DESCRIPTION}
+          .disabled=${this.disabled}
+          required
+          @input=${this.handleTextInput}
+          @blur=${this.checkFormValidity}
+        >
+        </mwc-textarea>
+
+        <p>* = ${this.localize('support-form-required-field')}</p>
+
+        <span class="actions">
+          <mwc-button .label=${this.localize('cancel')} .disabled=${this.disabled} @click=${this.cancel}></mwc-button>
+          <mwc-button
+            type="submit"
+            .label=${this.localize('submit')}
+            .disabled=${!this.valid || this.disabled}
+            @click=${this.submit}
+          ></mwc-button>
+        </span>
       </form>
     `;
   }
diff --git a/src/www/views/shared/card/index.ts b/src/www/views/shared/card/index.ts
deleted file mode 100644
index 9141a25849..0000000000
--- a/src/www/views/shared/card/index.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {html, css, LitElement, unsafeCSS} from 'lit';
-import {customElement, property, queryAssignedNodes, state} from 'lit/decorators.js';
-
-/** The card style types available. */
-export enum CardType {
-  Elevated = 'elevated',
-  Outlined = 'outlined',
-}
-
-@customElement('outline-card')
-export class Card extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-        font-family: var(--outline-font-family);
-      }
-
-      :host([type='${unsafeCSS(CardType.Elevated)}']) {
-        background: var(--outline-card-background);
-        border-radius: var(--outline-corner);
-        box-shadow: var(--outline-elevation);
-      }
-
-      :host([type='${unsafeCSS(CardType.Outlined)}']) {
-        border: var(--outline-hairline);
-      }
-
-      article {
-        padding: var(--outline-gutter);
-      }
-
-      footer {
-        background: var(--outline-card-footer);
-        border-top: var(--outline-hairline);
-        box-sizing: border-box;
-        padding: var(--outline-mini-gutter) var(--outline-gutter);
-        text-align: end;
-      }
-    `,
-  ];
-
-  @property({type: String, reflect: true})
-  type: CardType = CardType.Outlined;
-
-  @queryAssignedNodes({slot: 'card-actions', flatten: true})
-  private cardActionItems!: Array<Node>;
-
-  @state()
-  private hasActions = false;
-
-  private onCardActionsSlotChange() {
-    this.hasActions = !!this.cardActionItems.length;
-  }
-
-  render() {
-    return html`
-      <article>
-        <slot></slot>
-      </article>
-      <footer ?hidden=${!this.hasActions}>
-        <slot name="card-actions" @slotchange=${this.onCardActionsSlotChange}></slot>
-      </footer>
-    `;
-  }
-}
diff --git a/src/www/views/shared/card/stories.ts b/src/www/views/shared/card/stories.ts
deleted file mode 100644
index dda6385022..0000000000
--- a/src/www/views/shared/card/stories.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright 2023 The Outline Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* tslint:disable */
-
-import {TemplateResult, html, nothing} from 'lit';
-
-import '@material/mwc-button';
-
-import './index';
-import {CardType} from './index';
-
-export default {
-  title: 'Shared/Card',
-  component: 'outline-card',
-  argTypes: {
-    variant: {
-      description: 'Style variant of the card.',
-      defaultValue: CardType.Elevated,
-      options: Object.values(CardType),
-      control: {
-        type: 'radio',
-        defaultValue: CardType.Elevated,
-      },
-    },
-    withActions: {
-      description: 'Show action button.',
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-        defaultValue: true,
-      },
-    },
-  },
-};
-
-function getFooter(withActions: boolean): TemplateResult | typeof nothing {
-  return withActions
-    ? html`
-        <mwc-button slot="card-actions">Confirm</mwc-button>
-      `
-    : nothing;
-}
-
-export const Example = ({variant, withActions}: {variant: CardType; withActions: boolean}) =>
-  html`
-    <outline-card .type=${variant}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio turpis, mattis nec elit nec, dapibus
-      malesuada ligula. ${getFooter(withActions)}
-    </outline-card>
-  `;