diff --git a/apps/service-catalog/app/actions/public-services/actions.ts b/apps/service-catalog/app/actions/public-services/actions.ts
index 70248bf5e..e2b5bc273 100644
--- a/apps/service-catalog/app/actions/public-services/actions.ts
+++ b/apps/service-catalog/app/actions/public-services/actions.ts
@@ -1,8 +1,11 @@
 'use server';
 
-import { getAllPublicServices } from '@catalog-frontend/data-access';
+import { createPublicService, getAllPublicServices } from '@catalog-frontend/data-access';
+import { ServiceToBeCreated } from '@catalog-frontend/types';
 import { authOptions, validateSession } from '@catalog-frontend/utils';
 import { getServerSession } from 'next-auth';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
 
 export async function getPublicServices(catalogId: string) {
   const session = await getServerSession(authOptions);
@@ -18,3 +21,33 @@ export async function getPublicServices(catalogId: string) {
     return;
   }
 }
+
+export async function createNewPublicService(catalogId: string, formData: FormData) {
+  const newPublicService: ServiceToBeCreated = {
+    catalogId: catalogId,
+    title: {
+      nb: formData.get('title.nb'),
+    },
+    description: {
+      nb: formData.get('description.nb'),
+    },
+  };
+
+  const session = await getServerSession(authOptions);
+  await validateSession(session);
+  let success = false;
+  try {
+    const response = await createPublicService(newPublicService, catalogId, `${session?.accessToken}`);
+    if (response.status !== 201) {
+      throw new Error();
+    }
+    success = true;
+  } catch (error) {
+    return;
+  } finally {
+    if (success) {
+      revalidatePath(`/catalogs/${catalogId}/public-services`);
+      redirect(`/catalogs/${catalogId}/public-services`);
+    }
+  }
+}
diff --git a/apps/service-catalog/app/catalogs/[catalogId]/public-services/new/page.tsx b/apps/service-catalog/app/catalogs/[catalogId]/public-services/new/page.tsx
index ce6804adb..909d46adc 100644
--- a/apps/service-catalog/app/catalogs/[catalogId]/public-services/new/page.tsx
+++ b/apps/service-catalog/app/catalogs/[catalogId]/public-services/new/page.tsx
@@ -1,13 +1,13 @@
-import { FormFieldCard } from '@catalog-frontend/ui';
+import { Params } from 'next/dist/shared/lib/router/utils/route-matcher';
+import ServiceForm from '../../../../components/service-form';
+import { Heading } from '@digdir/design-system-react';
 
-export default async function NewPublicServicePage() {
+export default async function NewPublicServicePage({ params }: Params) {
+  const { catalogId } = params;
   return (
-    <div>
-      <h1>Opprett ny offentlig tjeneste</h1>
-      <FormFieldCard
-        title='test'
-        subtitle='tyeye'
-      ></FormFieldCard>
+    <div className='container'>
+      <Heading size='medium'>Informasjon om tjenesten</Heading>
+      <ServiceForm catalogId={catalogId} />
     </div>
   );
 }
diff --git a/apps/service-catalog/app/components/service-form/index.tsx b/apps/service-catalog/app/components/service-form/index.tsx
new file mode 100644
index 000000000..696ce4092
--- /dev/null
+++ b/apps/service-catalog/app/components/service-form/index.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { Tag, Textarea, Textfield } from '@digdir/design-system-react';
+import { Button, FormFieldCard } from '@catalog-frontend/ui';
+
+import { localization } from '@catalog-frontend/utils';
+
+import { Service } from '@catalog-frontend/types';
+
+import styles from './service-form.module.css';
+
+import { TrashIcon } from '@navikt/aksel-icons';
+import { createNewPublicService } from '../../actions/public-services/actions';
+
+type ServiceFormProps = {
+  catalogId: string;
+  service?: Service;
+};
+
+export const ServiceForm = ({ catalogId, service }: ServiceFormProps) => {
+  const createPublicService = createNewPublicService.bind(null, catalogId);
+
+  return (
+    <>
+      <div className='container'>
+        <div className={styles.pageContainer}>
+          <form action={createPublicService}>
+            <div className={styles.formContainer}>
+              <FormFieldCard
+                title={localization.title}
+                subtitle='Egenskapen brukes å til oppgi navn til en tjeneste'
+              >
+                <div>
+                  <Textfield
+                    defaultValue={service?.title.nb}
+                    label={
+                      <div>
+                        <p>Tekst på bokmål</p>
+                        <Tag
+                          variant='secondary'
+                          color='first'
+                          size='small'
+                        >
+                          Må fylles ut
+                        </Tag>
+                      </div>
+                    }
+                    type='text'
+                    name='title.nb'
+                  />
+                </div>
+              </FormFieldCard>
+              <FormFieldCard
+                title={localization.description}
+                subtitle='Egenskapen brukes til å oppgi en tekstlig beskrivelse av tjenesten'
+              >
+                <Textarea name='description.nb' />
+              </FormFieldCard>
+            </div>
+
+            <div>
+              <Button type='submit'>Lagre tjeneste</Button>
+              {service ? (
+                <Button
+                  color='danger'
+                  variant='secondary'
+                >
+                  <TrashIcon fontSize='1.5rem' />
+                  Slett tjeneste
+                </Button>
+              ) : (
+                <Button
+                  color='danger'
+                  variant='secondary'
+                >
+                  Avbryt
+                </Button>
+              )}
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ServiceForm;
diff --git a/apps/service-catalog/app/components/service-form/service-form.module.css b/apps/service-catalog/app/components/service-form/service-form.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/data-access/src/lib/public-services/api/index.tsx b/libs/data-access/src/lib/public-services/api/index.tsx
index c6e4dc483..876ba7577 100644
--- a/libs/data-access/src/lib/public-services/api/index.tsx
+++ b/libs/data-access/src/lib/public-services/api/index.tsx
@@ -1,3 +1,5 @@
+import { Service } from '@catalog-frontend/types';
+
 const path = `${process.env.SERVICE_CATALOG_BASE_URI}`;
 
 export const getAllPublicServices = async (catalogId: string, accessToken: string) => {
@@ -10,3 +12,16 @@ export const getAllPublicServices = async (catalogId: string, accessToken: strin
   };
   return await fetch(resource, options);
 };
+
+export const createPublicService = async (publicService: Partial<Service>, catalogId: string, accessToken: string) => {
+  const resource = `${path}/catalogs/${catalogId}/public-services`;
+  const options = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: JSON.stringify(publicService),
+  };
+  return await fetch(resource, options);
+};
diff --git a/libs/types/src/index.ts b/libs/types/src/index.ts
index 264c69a2a..fb195893b 100644
--- a/libs/types/src/index.ts
+++ b/libs/types/src/index.ts
@@ -13,4 +13,3 @@ export * from './lib/editor';
 export * from './lib/json-patch';
 export * from './lib/change-request';
 export * from './lib/service';
-export * from './lib/params';
diff --git a/libs/types/src/lib/params.ts b/libs/types/src/lib/params.ts
deleted file mode 100644
index b4cb1d180..000000000
--- a/libs/types/src/lib/params.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default interface Params {
-  params: {
-    slug: string[];
-  };
-}
diff --git a/libs/types/src/lib/service.ts b/libs/types/src/lib/service.ts
index 4a697931c..89a7e86e1 100644
--- a/libs/types/src/lib/service.ts
+++ b/libs/types/src/lib/service.ts
@@ -1,7 +1,10 @@
 import { MultiLanguageText } from './language';
 
-export interface Service {
+export interface Service extends ServiceToBeCreated {
   id: string;
+}
+
+export interface ServiceToBeCreated {
   catalogId: string;
   title: MultiLanguageText;
   description?: MultiLanguageText;