diff --git a/frontend/src/Components/RejectionMail/RejectionMail.stories.tsx b/frontend/src/Components/RejectionMail/RejectionMail.stories.tsx
deleted file mode 100644
index d8bdda98a..000000000
--- a/frontend/src/Components/RejectionMail/RejectionMail.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { RejectionMail } from './RejectionMail';
-
-export default {
-  title: 'Components/RejectionMail',
-  component: RejectionMail,
-} as ComponentMeta<typeof RejectionMail>;
-
-const Template: ComponentStory<typeof RejectionMail> = () => <RejectionMail />;
-
-export const Basic = Template.bind({});
diff --git a/frontend/src/Components/RejectionMail/RejectionMail.tsx b/frontend/src/Components/RejectionMail/RejectionMail.tsx
deleted file mode 100644
index b57b96b36..000000000
--- a/frontend/src/Components/RejectionMail/RejectionMail.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { t } from 'i18next';
-import { useState } from 'react';
-import { useParams } from 'react-router';
-import { toast } from 'react-toastify';
-//import { postRejectionMail } from '~/api';
-import { KEY } from '~/i18n/constants';
-import { Button } from '../Button';
-import { InputField } from '../InputField';
-import { TextAreaField } from '../TextAreaField';
-
-export function RejectionMail() {
-  const [text, setText] = useState('');
-  const [subject, setSubject] = useState('');
-  const recruitmentId = useParams().recruitmentId;
-
-  function handleSubmit() {
-    if (recruitmentId) {
-      //postRejectionMail(recruitmentId, { subject, text });
-      toast.success(t(KEY.common_save_successful));
-    } else {
-      toast.error(t(KEY.common_something_went_wrong));
-      console.error('Recruitment id cannot be null');
-    }
-  }
-
-  return (
-    <>
-      <label>{t(KEY.common_email_subject)}</label>
-      <InputField type="text" value={subject} onChange={setSubject} />
-      <label>{t(KEY.common_email)}</label>
-      <TextAreaField value={text} onChange={setText} />
-      <Button theme="green" onClick={handleSubmit}>
-        Submit
-      </Button>
-    </>
-  );
-}
diff --git a/frontend/src/Components/RejectionMail/index.ts b/frontend/src/Components/RejectionMail/index.ts
deleted file mode 100644
index 145523fe1..000000000
--- a/frontend/src/Components/RejectionMail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { RejectionMail } from './RejectionMail';
diff --git a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletContainer/AppletContainer.tsx b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletContainer/AppletContainer.tsx
index 8eea77d3d..5a55d6116 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletContainer/AppletContainer.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletContainer/AppletContainer.tsx
@@ -75,8 +75,10 @@ export function AppletContainer({ recruitmentId }: Props) {
           <AppletCard
             title={lowerCapitalize(t(KEY.recruitment_rejection_email))}
             description={t(KEY.recruitment_applet_rejection_mail_description)}
-            url="#"
-            disabled={true}
+            url={reverse({
+              pattern: ROUTES.frontend.admin_recruitment_gang_overview_rejection_email,
+              urlParams: { recruitmentId },
+            })}
           />
         </>
       ),
diff --git a/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.module.scss b/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.module.scss
new file mode 100644
index 000000000..e40ca61f6
--- /dev/null
+++ b/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.module.scss
@@ -0,0 +1,28 @@
+.subheader {
+  padding: 0.2em;
+  font-size: 1.5em;
+  font-weight: 700;
+}
+
+.subject {
+  font-size: 1.2em;
+  font-weight: 700;
+}
+
+.preview {
+  padding-top: 1em;
+}
+
+.textarea {
+  min-height: 14rem;
+}
+
+.flex_row {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.flex_item {
+  flex-basis: 50%;
+}
diff --git a/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.tsx b/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.tsx
new file mode 100644
index 000000000..676505138
--- /dev/null
+++ b/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.tsx
@@ -0,0 +1,115 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { Button, Form, FormField, FormItem, FormLabel, Input, Textarea } from '~/Components';
+import { FormControl, FormMessage } from '~/Components/Forms/Form';
+import { useTitle } from '~/hooks';
+import { KEY } from '~/i18n/constants';
+import { NON_EMPTY_STRING } from '~/schema/strings';
+import { lowerCapitalize } from '~/utils';
+import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
+import styles from './RecruitmentRejectionMailPage.module.scss';
+
+export function RecruitmentRejectionMailPage() {
+  const { t } = useTranslation();
+  const title = lowerCapitalize(t(KEY.recruitment_rejection_email));
+  useTitle(title);
+
+  const recjectionMailSchema = z.object({
+    subject: NON_EMPTY_STRING,
+    textBeforeName: NON_EMPTY_STRING,
+    content: NON_EMPTY_STRING,
+  });
+
+  const form = useForm<z.infer<typeof recjectionMailSchema>>({
+    resolver: zodResolver(recjectionMailSchema),
+    defaultValues: {
+      subject: '',
+      textBeforeName: '',
+      content: '',
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof recjectionMailSchema>) {
+    // ISSUE #1727 - TODO:
+    // Connect backend rejection mail "SendRejectionMailView" and create a page with overview of the recipients
+  }
+
+  return (
+    <AdminPageLayout title={lowerCapitalize(t(KEY.recruitment_rejection_email))}>
+      <div className={styles.flex_row}>
+        <div className={styles.flex_item}>
+          <h2 className={styles.subheader}>
+            {t(KEY.common_create)} {t(KEY.common_email).toLowerCase()}
+          </h2>
+          <hr />
+        </div>
+        <div className={styles.flex_item}>
+          <h2 className={styles.subheader}>{t(KEY.recruitment_preview)}</h2>
+          <hr />
+        </div>
+      </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+          <div className={styles.flex_row}>
+            <div className={styles.flex_item}>
+              <FormField
+                control={form.control}
+                name="subject"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{`${t(KEY.common_email_subject)}`}</FormLabel>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="textBeforeName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{`${t(KEY.recruitment_text_before_name)}`}</FormLabel>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="content"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{`${t(KEY.common_content)}`}</FormLabel>
+                    <FormControl>
+                      <Textarea className={styles.textarea} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className={styles.flex_item}>
+              <p className={classNames(styles.subject, styles.preview)}>{form.watch('subject')}</p>
+              <p className={styles.preview}>
+                {form.watch('textBeforeName')} {`<${t(KEY.common_firstname)}>`},
+              </p>
+              <pre className={styles.preview}>{form.watch('content')}</pre>
+            </div>
+          </div>
+          <div className={styles.flex_row}>
+            <div className={styles.flex_item}>
+              <Button type="submit">{t(KEY.recruitment_look_at_recipients)}</Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </AdminPageLayout>
+  );
+}
diff --git a/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/index.ts b/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/index.ts
new file mode 100644
index 000000000..111e90c0f
--- /dev/null
+++ b/frontend/src/PagesAdmin/RecruitmentRejectionMailPage/index.ts
@@ -0,0 +1 @@
+export { RecruitmentRejectionMailPage } from './RecruitmentRejectionMailPage';
diff --git a/frontend/src/PagesAdmin/index.ts b/frontend/src/PagesAdmin/index.ts
index 5067cf5bd..980a14d2e 100644
--- a/frontend/src/PagesAdmin/index.ts
+++ b/frontend/src/PagesAdmin/index.ts
@@ -22,6 +22,7 @@ export { RecruitmentOverviewPage } from './RecruitmentOverviewPage';
 export { RecruitmentPositionFormAdminPage } from './RecruitmentPositionFormAdminPage';
 export { RecruitmentPositionOverviewPage } from './RecruitmentPositionOverviewPage';
 export { RecruitmentRecruiterDashboardPage } from './RecruitmentRecruiterDashboardPage';
+export { RecruitmentRejectionMailPage } from './RecruitmentRejectionMailPage';
 export { RecruitmentSeparatePositionFormAdminPage } from './RecruitmentSeparatePositionFormAdminPage';
 export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedApplicantsPage';
 export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWithoutInterviewGangPage';
diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts
index de5c9af31..c8e4b8074 100644
--- a/frontend/src/i18n/constants.ts
+++ b/frontend/src/i18n/constants.ts
@@ -57,6 +57,7 @@ export const KEY = {
   pick_a_date: 'pick_a_date',
 
   // No category:
+  common_content: 'common_content',
   common_url: 'common_url',
   common_manage: 'common_manage',
   common_yes: 'common_yes',
@@ -280,6 +281,9 @@ export const KEY = {
   sulten_reservation_form_find_times: 'sulten_reservation_form_find_times',
 
   // Recruitment:
+  recruitment_look_at_recipients: 'recruitment_look_at_recipients',
+  recruitment_preview: 'recruitment_preview',
+  recruitment_text_before_name: 'recruitment_text_before_name',
   recruitment_tags: 'recruitment_tags',
   recruitment_position: 'recruitment_position',
   recruitment_positions: 'recruitment_positions',
diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
index 019c31fe5..3f0be9892 100644
--- a/frontend/src/i18n/translations.ts
+++ b/frontend/src/i18n/translations.ts
@@ -43,6 +43,7 @@ export const nb = prepareTranslations({
   [KEY.pick_a_date]: 'Velg en dato',
 
   // Other common
+  [KEY.common_content]: 'Innhold',
   [KEY.common_url]: 'URL',
   [KEY.common_manage]: 'Håndter',
   [KEY.common_yes]: 'Ja',
@@ -260,6 +261,9 @@ export const nb = prepareTranslations({
   [KEY.footer_developed_by]: 'Utviklet av MG::Web',
 
   // Recruitment:
+  [KEY.recruitment_look_at_recipients]: 'Gå videre og se gjennom mottakere',
+  [KEY.recruitment_preview]: 'Forhåndsvisning',
+  [KEY.recruitment_text_before_name]: 'Tekst før navn',
   [KEY.recruitment_tags]: 'Tags',
   [KEY.recruitment_position]: 'Stilling',
   [KEY.recruitment_positions]: 'Stillinger',
@@ -546,6 +550,7 @@ export const en = prepareTranslations({
   [KEY.pick_a_date]: 'Pick a date',
 
   // No category:
+  [KEY.common_content]: 'Content',
   [KEY.common_url]: 'URL',
   [KEY.common_manage]: 'Manage',
   [KEY.common_yes]: 'Yes',
@@ -762,6 +767,9 @@ export const en = prepareTranslations({
   [KEY.footer_developed_by]: 'Developed by MG::Web',
 
   // Recruitment:
+  [KEY.recruitment_look_at_recipients]: 'Go ahead and look through recipients',
+  [KEY.recruitment_preview]: 'Preview',
+  [KEY.recruitment_text_before_name]: 'Text before name',
   [KEY.recruitment_tags]: 'Tags',
   [KEY.recruitment_position]: 'Position',
   [KEY.recruitment_positions]: 'Positions',
diff --git a/frontend/src/router/router.tsx b/frontend/src/router/router.tsx
index d03435c86..6251b288e 100644
--- a/frontend/src/router/router.tsx
+++ b/frontend/src/router/router.tsx
@@ -55,6 +55,7 @@ import {
   RecruitmentOverviewPage,
   RecruitmentPositionFormAdminPage,
   RecruitmentPositionOverviewPage,
+  RecruitmentRejectionMailPage,
   RecruitmentSeparatePositionFormAdminPage,
   RecruitmentUnprocessedApplicantsPage,
   RecruitmentUsersWithoutInterviewGangPage,
@@ -431,6 +432,20 @@ export const router = createBrowserRouter(
                   crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
                 }}
               />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_gang_overview_rejection_email}
+                element={
+                  <PermissionRoute
+                    required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]}
+                    element={<RecruitmentRejectionMailPage />}
+                  />
+                }
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{lowerCapitalize(t(KEY.recruitment_rejection_email))}</Link>
+                  ),
+                }}
+              />
               <Route
                 path={ROUTES.frontend.admin_recruitment_recruiter_dashboard}
                 element={<RecruitmentRecruiterDashboardPage />}