diff --git a/backend/src/Designer/Controllers/OptionsController.cs b/backend/src/Designer/Controllers/OptionsController.cs
index 6211e9ffa30..cf1d2d45aaa 100644
--- a/backend/src/Designer/Controllers/OptionsController.cs
+++ b/backend/src/Designer/Controllers/OptionsController.cs
@@ -1,4 +1,5 @@
 using System.Collections.Generic;
+using System.Text.Json;
 using System.Threading;
 using System.Threading.Tasks;
 using Altinn.Studio.Designer.Helpers;
@@ -128,6 +129,32 @@ public async Task<ActionResult> CreateOrOverwriteOptionsList(string org, string
         return Ok(newOptionsList);
     }
 
+    /// <summary>
+    /// Create new options list.
+    /// </summary>
+    /// <param name="org">Unique identifier of the organisation responsible for the app.</param>
+    /// <param name="repo">Application identifier which is unique within an organisation.</param>
+    /// <param name="file">File being uploaded.</param>
+    /// <param name="cancellationToken"><see cref="CancellationToken"/> that observes if operation is cancelled.</param>
+    [HttpPost]
+    [Route("upload")]
+    public async Task<IActionResult> UploadFile(string org, string repo, [FromForm] IFormFile file, CancellationToken cancellationToken)
+    {
+        cancellationToken.ThrowIfCancellationRequested();
+        string developer = AuthenticationHelper.GetDeveloperUserName(HttpContext);
+        string fileName = file.FileName.Replace(".json", "");
+
+        try
+        {
+            List<Option> newOptionsList = await _optionsService.UploadNewOption(org, repo, developer, fileName, file, cancellationToken);
+            return Ok(newOptionsList);
+        }
+        catch (JsonException e)
+        {
+            return BadRequest(e.Message);
+        }
+    }
+
     /// <summary>
     /// Deletes an option list.
     /// </summary>
diff --git a/backend/src/Designer/Infrastructure/GitRepository/AltinnAppGitRepository.cs b/backend/src/Designer/Infrastructure/GitRepository/AltinnAppGitRepository.cs
index a282dfd8157..7299c3c512b 100644
--- a/backend/src/Designer/Infrastructure/GitRepository/AltinnAppGitRepository.cs
+++ b/backend/src/Designer/Infrastructure/GitRepository/AltinnAppGitRepository.cs
@@ -767,12 +767,15 @@ public async Task<string> GetOptionsList(string optionsListId, CancellationToken
         /// <param name="payload">The contents of the new options list as a string</param>
         /// <param name="cancellationToken">A <see cref="CancellationToken"/> that observes if operation is cancelled.</param>
         /// <returns>The new options list as a string.</returns>
-        public async Task<string> CreateOrOverwriteOptionsList(string optionsListId, string payload, CancellationToken cancellationToken = default)
+        public async Task<string> CreateOrOverwriteOptionsList(string optionsListId, List<Option> payload, CancellationToken cancellationToken = default)
         {
             cancellationToken.ThrowIfCancellationRequested();
 
+            var serialiseOptions = new JsonSerializerOptions { WriteIndented = true };
+            string payloadString = JsonSerializer.Serialize(payload, serialiseOptions);
+
             string optionsFilePath = Path.Combine(OptionsFolderPath, $"{optionsListId}.json");
-            await WriteTextByRelativePathAsync(optionsFilePath, payload, true, cancellationToken);
+            await WriteTextByRelativePathAsync(optionsFilePath, payloadString, true, cancellationToken);
             string fileContent = await ReadTextByRelativePathAsync(optionsFilePath, cancellationToken);
 
             return fileContent;
diff --git a/backend/src/Designer/Services/Implementation/OptionsService.cs b/backend/src/Designer/Services/Implementation/OptionsService.cs
index 957fbe9530f..f2e225c2d83 100644
--- a/backend/src/Designer/Services/Implementation/OptionsService.cs
+++ b/backend/src/Designer/Services/Implementation/OptionsService.cs
@@ -1,10 +1,12 @@
 using System.Collections.Generic;
+using System.Linq;
 using System.Text.Json;
 using System.Threading;
 using System.Threading.Tasks;
 using Altinn.Studio.Designer.Models;
 using Altinn.Studio.Designer.Services.Interfaces;
 using LibGit2Sharp;
+using Microsoft.AspNetCore.Http;
 
 namespace Altinn.Studio.Designer.Services.Implementation;
 
@@ -57,13 +59,32 @@ public async Task<List<Option>> CreateOrOverwriteOptionsList(string org, string
         cancellationToken.ThrowIfCancellationRequested();
         var altinnAppGitRepository = _altinnGitRepositoryFactory.GetAltinnAppGitRepository(org, repo, developer);
 
-        string payloadString = JsonSerializer.Serialize(payload, new JsonSerializerOptions() { WriteIndented = true });
-        string updatedOptionsString = await altinnAppGitRepository.CreateOrOverwriteOptionsList(optionsListId, payloadString, cancellationToken);
+        string updatedOptionsString = await altinnAppGitRepository.CreateOrOverwriteOptionsList(optionsListId, payload, cancellationToken);
         var updatedOptions = JsonSerializer.Deserialize<List<Option>>(updatedOptionsString);
 
         return updatedOptions;
     }
 
+    /// <inheritdoc />
+    public async Task<List<Option>> UploadNewOption(string org, string repo, string developer, string optionsListId, IFormFile payload, CancellationToken cancellationToken = default)
+    {
+        cancellationToken.ThrowIfCancellationRequested();
+
+        List<Option> deserializedOptions = JsonSerializer.Deserialize<List<Option>>(payload.OpenReadStream(),
+            new JsonSerializerOptions { WriteIndented = true, AllowTrailingCommas = true });
+
+        IEnumerable<Option> result = deserializedOptions.Where(option => string.IsNullOrEmpty(option.Value) || string.IsNullOrEmpty(option.Label));
+        if (result.Any())
+        {
+            throw new JsonException("Uploaded file is missing one of the following attributes for an option: value or label.");
+        }
+
+        var altinnAppGitRepository = _altinnGitRepositoryFactory.GetAltinnAppGitRepository(org, repo, developer);
+        await altinnAppGitRepository.CreateOrOverwriteOptionsList(optionsListId, deserializedOptions, cancellationToken);
+
+        return deserializedOptions;
+    }
+
     /// <inheritdoc />
     public void DeleteOptionsList(string org, string repo, string developer, string optionsListId)
     {
diff --git a/backend/src/Designer/Services/Interfaces/IOptionsService.cs b/backend/src/Designer/Services/Interfaces/IOptionsService.cs
index 36db10f39ba..12f830bed5f 100644
--- a/backend/src/Designer/Services/Interfaces/IOptionsService.cs
+++ b/backend/src/Designer/Services/Interfaces/IOptionsService.cs
@@ -2,6 +2,7 @@
 using System.Threading;
 using System.Threading.Tasks;
 using Altinn.Studio.Designer.Models;
+using Microsoft.AspNetCore.Http;
 
 namespace Altinn.Studio.Designer.Services.Interfaces;
 
@@ -42,6 +43,18 @@ public interface IOptionsService
     /// <param name="cancellationToken">A <see cref="CancellationToken"/> that observes if operation is cancelled.</param>
     public Task<List<Option>> CreateOrOverwriteOptionsList(string org, string repo, string developer, string optionsListId, List<Option> payload, CancellationToken cancellationToken = default);
 
+    /// <summary>
+    /// Adds a new option to the option list.
+    /// If the file already exists, it will be overwritten.
+    /// </summary>
+    /// <param name="org">Orginisation</param>
+    /// <param name="repo">Repository</param>
+    /// <param name="developer">Username of developer</param>
+    /// <param name="optionsListId">Name of the new options list</param>
+    /// <param name="payload">The options list contents</param>
+    /// <param name="cancellationToken">A <see cref="CancellationToken"/> that observes if operation is cancelled.</param>
+    public Task<List<Option>> UploadNewOption(string org, string repo, string developer, string optionsListId, IFormFile payload, CancellationToken cancellationToken = default);
+
     /// <summary>
     /// Deletes an options list from the app repository.
     /// </summary>
diff --git a/backend/tests/Designer.Tests/Infrastructure/GitRepository/AltinnAppGitRepositoryTests.cs b/backend/tests/Designer.Tests/Infrastructure/GitRepository/AltinnAppGitRepositoryTests.cs
index 321efd0fbd7..a8fdab0af65 100644
--- a/backend/tests/Designer.Tests/Infrastructure/GitRepository/AltinnAppGitRepositoryTests.cs
+++ b/backend/tests/Designer.Tests/Infrastructure/GitRepository/AltinnAppGitRepositoryTests.cs
@@ -336,7 +336,7 @@ public async Task CreateOrOverwriteOptions_WithAppThatHasNoOptionLists_ShouldCre
             string newOptionsListString = JsonSerializer.Serialize(newOptionsList, jsonOptions);
 
             // Act
-            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsListString);
+            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsList);
 
             // Assert
             Assert.Equal(newOptionsListString, savedOptionsList);
@@ -372,7 +372,7 @@ public async Task CreateOrOverwriteOptions_WithAppThatHasOptionLists_ShouldOverw
             string newOptionsListString = JsonSerializer.Serialize(newOptionsList, jsonOptions);
 
             // Act
-            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsListString);
+            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsList);
 
             // Assert
             Assert.Equal(newOptionsListString, savedOptionsList);
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index aa127ebcc6b..760a9ae779f 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -1461,6 +1461,10 @@
   "ux_editor.modal_properties_code_list_read_more": "<0 href=\"{{optionsDocs}}\" >Les mer om kodelister</0>",
   "ux_editor.modal_properties_code_list_read_more_dynamic": "<0 href=\"{{optionsDocs}}\" >Les mer om dynamiske kodelister</0>",
   "ux_editor.modal_properties_code_list_read_more_static": "<0 href=\"{{optionsDocs}}\" >Les mer om statiske kodelister</0>",
+  "ux_editor.modal_properties_code_list_upload": "Last opp din egen kodeliste",
+  "ux_editor.modal_properties_code_list_upload_duplicate_error": "Opplastning feilet. Du prøvde å laste opp en fil som finnes fra før.",
+  "ux_editor.modal_properties_code_list_upload_generic_error": "Opplastning feilet. Filen du lastet opp er ikke satt opp riktig.",
+  "ux_editor.modal_properties_code_list_upload_success": "Filen ble lastet opp.",
   "ux_editor.modal_properties_component_change_id": "Komponent-ID",
   "ux_editor.modal_properties_component_change_id_information": "Ved redigering av komponent ID vil Studio automatisk oppdatere IDen der den er brukt som referanse, men det er ikke garantert at alle eksemplarer er oppdatert.",
   "ux_editor.modal_properties_component_id_not_unique_error": "Komponenten må ha en unik ID",
@@ -1596,6 +1600,7 @@
   "ux_editor.modal_text": "Tekst",
   "ux_editor.modal_text_resource_body": "Tekstinnhold",
   "ux_editor.modal_text_resource_body_add": "Legg til tekst",
+  "ux_editor.model_properties_code_list_filename_error": "Filnavnet er ugyldig. Du kan bruke tall, understrek, punktum, bindestrek, og store/små bokstaver fra det norske alfabetet. Filnavnet må starte med en engelsk bokstav.",
   "ux_editor.multi_page_warning": "Denne siden inneholder grupper med flere sider. Denne funksjonaliteten er på nåværende tidspunkt ikke støttet i Altinn Studio. Du kan se og redigere komponentene, men ikke sideinformasjonen. Hvis en komponent legges til eller flyttes i en slik gruppe, blir den automatisk plassert på samme side som komponenten over.",
   "ux_editor.no_components_selected": "Velg en side for å se forhåndsvisningen",
   "ux_editor.no_text": "Ingen tekst",
diff --git a/frontend/packages/shared/src/api/mutations.ts b/frontend/packages/shared/src/api/mutations.ts
index b3b2592eb20..b89409bb779 100644
--- a/frontend/packages/shared/src/api/mutations.ts
+++ b/frontend/packages/shared/src/api/mutations.ts
@@ -41,6 +41,7 @@ import {
   altinn2DelegationsMigrationPath,
   imagePath,
   addImagePath,
+  optionListPath,
 } from 'app-shared/api/paths';
 import type { AddLanguagePayload } from 'app-shared/types/api/AddLanguagePayload';
 import type { AddRepoParams } from 'app-shared/types/api';
@@ -113,6 +114,7 @@ export const updateAppPolicy = (org: string, app: string, payload: Policy) => pu
 export const updateAppMetadata = (org: string, app: string, payload: ApplicationMetadata) => put(appMetadataPath(org, app), payload);
 export const updateAppConfig = (org: string, app: string, payload: AppConfig) => post(serviceConfigPath(org, app), payload);
 export const uploadDataModel = (org: string, app: string, form: FormData) => post<void, FormData>(dataModelsUploadPath(org, app), form, { headers: { 'Content-Type': 'multipart/form-data' } });
+export const uploadOptionList = (org: string, app: string, payload: FormData) => post<void, FormData>(optionListPath(org, app), payload, { headers: { 'Content-Type': 'multipart/form-data' } });
 export const upsertTextResources = (org: string, app: string, language: string, payload: ITextResourcesObjectFormat) => put<ITextResourcesObjectFormat>(textResourcesPath(org, app, language), payload);
 
 // Resourceadm
diff --git a/frontend/packages/shared/src/api/paths.js b/frontend/packages/shared/src/api/paths.js
index f302920a734..fb6e9c76aa9 100644
--- a/frontend/packages/shared/src/api/paths.js
+++ b/frontend/packages/shared/src/api/paths.js
@@ -29,6 +29,7 @@ export const dataModelAddXsdFromRepoPath = (org, app, filePath) => `${basePath}/
 export const ruleHandlerPath = (org, app, layoutSetName) => `${basePath}/${org}/${app}/app-development/rule-handler?${s({ layoutSetName })}`; // Get, Post
 export const widgetSettingsPath = (org, app) => `${basePath}/${org}/${app}/app-development/widget-settings`; // Get
 export const optionListsPath = (org, app) => `${basePath}/${org}/${app}/options/option-lists`; // Get
+export const optionListPath = (org, app) => `${basePath}/${org}/${app}/options/upload/`; // Post
 export const optionListIdsPath = (org, app) => `${basePath}/${org}/${app}/app-development/option-list-ids`; // Get
 export const ruleConfigPath = (org, app, layoutSetName) => `${basePath}/${org}/${app}/app-development/rule-config?${s({ layoutSetName })}`; // Get, Post
 export const appMetadataModelIdsPath = (org, app, onlyUnReferenced) => `${basePath}/${org}/${app}/app-development/model-ids?${s({ onlyUnReferenced })}`; // Get
diff --git a/frontend/packages/shared/src/mocks/queriesMock.ts b/frontend/packages/shared/src/mocks/queriesMock.ts
index 55c84b50d41..03f83e9c251 100644
--- a/frontend/packages/shared/src/mocks/queriesMock.ts
+++ b/frontend/packages/shared/src/mocks/queriesMock.ts
@@ -212,6 +212,7 @@ export const queriesMock: ServicesContextProps = {
   updateAppMetadata: jest.fn().mockImplementation(() => Promise.resolve()),
   updateAppConfig: jest.fn().mockImplementation(() => Promise.resolve()),
   uploadDataModel: jest.fn().mockImplementation(() => Promise.resolve<JsonSchema>({})),
+  uploadOptionList: jest.fn().mockImplementation(() => Promise.resolve()),
   upsertTextResources: jest
     .fn()
     .mockImplementation(() => Promise.resolve<ITextResourcesObjectFormat>({})),
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.module.css
new file mode 100644
index 00000000000..309c7dd3efd
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.module.css
@@ -0,0 +1,9 @@
+.studioFileUploader {
+  padding-top: var(--fds-spacing-2);
+  padding-bottom: var(--fds-spacing-1);
+}
+
+.linkStaticCodeLists {
+  margin-bottom: 0;
+  padding-top: var(--fds-spacing-2);
+}
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.test.tsx
index 4a6d9b02ba1..de183d34f44 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.test.tsx
@@ -24,6 +24,7 @@ describe('EditCodeList', () => {
   afterEach(() => {
     queryClientMock.clear();
   });
+
   it('should render the component', async () => {
     await render({
       queries: {
@@ -37,18 +38,6 @@ describe('EditCodeList', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render the component when optionListIds is empty', async () => {
-    await render({
-      queries: {
-        getOptionListIds: jest.fn().mockImplementation(() => Promise.resolve<string[]>([])),
-      },
-    });
-
-    expect(
-      await screen.findByText(textMock('ux_editor.modal_properties_no_options_found_message')),
-    ).toBeInTheDocument();
-  });
-
   it('should call onChange when option list changes', async () => {
     const handleComponentChangeMock = jest.fn();
     const user = userEvent.setup();
@@ -130,6 +119,91 @@ describe('EditCodeList', () => {
       await screen.findByText(textMock('ux_editor.modal_properties_error_message')),
     ).toBeInTheDocument();
   });
+
+  it('should render success toast if file upload is successful', async () => {
+    const user = userEvent.setup();
+    const file = new File(['hello'], 'hello.json', { type: 'text/json' });
+    await render({
+      queries: {
+        getOptionListIds: jest
+          .fn()
+          .mockImplementation(() => Promise.resolve<string[]>(optionListIdsMock)),
+      },
+    });
+
+    const btn = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_properties_code_list_upload'),
+    });
+    await user.click(btn);
+
+    const fileInput = screen.getByLabelText(
+      textMock('ux_editor.modal_properties_code_list_upload'),
+    );
+
+    await user.upload(fileInput, file);
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      textMock('ux_editor.modal_properties_code_list_upload_success'),
+    );
+  });
+
+  it('should render error toast if file already exists', async () => {
+    const user = userEvent.setup();
+    const file = new File([optionListIdsMock[0]], optionListIdsMock[0] + '.json', {
+      type: 'text/json',
+    });
+    await render({
+      queries: {
+        getOptionListIds: jest
+          .fn()
+          .mockImplementation(() => Promise.resolve<string[]>(optionListIdsMock)),
+      },
+    });
+
+    const btn = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_properties_code_list_upload'),
+    });
+    await user.click(btn);
+
+    const fileInput = screen.getByLabelText(
+      textMock('ux_editor.modal_properties_code_list_upload'),
+    );
+
+    await user.upload(fileInput, file);
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      textMock('ux_editor.modal_properties_code_list_upload_duplicate_error'),
+    );
+  });
+
+  it('should render alert on invalid file name', async () => {
+    const user = userEvent.setup();
+    const invalidFileName = '_InvalidFileName.json';
+    const file = new File([optionListIdsMock[0]], invalidFileName, {
+      type: 'text/json',
+    });
+    await render({
+      queries: {
+        getOptionListIds: jest
+          .fn()
+          .mockImplementation(() => Promise.resolve<string[]>(optionListIdsMock)),
+      },
+    });
+
+    const btn = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_properties_code_list_upload'),
+    });
+    await user.click(btn);
+
+    const fileInput = screen.getByLabelText(
+      textMock('ux_editor.modal_properties_code_list_upload'),
+    );
+    await user.upload(fileInput, file);
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      textMock('ux_editor.model_properties_code_list_filename_error'),
+    );
+  });
 });
 
 const render = async ({
@@ -139,11 +213,11 @@ const render = async ({
 } = {}) => {
   renderWithProviders(
     <EditCodeList
-      handleComponentChange={handleComponentChange}
       component={{
         ...mockComponent,
         ...componentProps,
       }}
+      handleComponentChange={handleComponentChange}
     />,
     {
       queries,
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.tsx
index 75236fb524c..1ddff90dfdb 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/EditCodeList.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
-import { Alert, ErrorMessage } from '@digdir/designsystemet-react';
+import { ErrorMessage } from '@digdir/designsystemet-react';
 import type { IGenericEditComponent } from '../../../componentConfig';
 import { useOptionListIdsQuery } from '../../../../../hooks/queries/useOptionListIdsQuery';
+import { useAddOptionListMutation } from '../../../../../hooks/mutations/useAddOptionListMutation';
 import { useTranslation, Trans } from 'react-i18next';
-import { StudioNativeSelect, StudioSpinner } from '@studio/components';
-
+import { StudioFileUploader, StudioNativeSelect, StudioSpinner } from '@studio/components';
 import { altinnDocsUrl } from 'app-shared/ext-urls';
 import { FormField } from '../../../../FormField';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { ManualCodelistUploadSteps } from './ManualCodelistUploadSteps';
 import type { SelectionComponentType } from '../../../../../types/FormComponent';
+import { removeExtension } from 'app-shared/utils/filenameUtils';
+import { findFileNameError } from './findFileNameError';
+import type { FileNameError } from './findFileNameError';
+import type { AxiosError } from 'axios';
+import { toast } from 'react-toastify';
+import classes from './EditCodeList.module.css';
+import type { ApiError } from 'app-shared/types/api/ApiError';
 
 export function EditCodeList<T extends SelectionComponentType>({
   component,
@@ -17,8 +23,10 @@ export function EditCodeList<T extends SelectionComponentType>({
 }: IGenericEditComponent<T>) {
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
-
-  const { data: optionListIds, isPending, isError, error } = useOptionListIdsQuery(org, app);
+  const { data: optionListIds } = useOptionListIdsQuery(org, app);
+  const { mutate: uploadOptionList } = useAddOptionListMutation(org, app, {
+    hideDefaultError: (error: AxiosError<ApiError>) => !error.response.data.errorCode,
+  });
 
   const handleOptionsIdChange = (optionsId: string) => {
     if (component.options) {
@@ -31,58 +39,136 @@ export function EditCodeList<T extends SelectionComponentType>({
     });
   };
 
+  const handleUpload = (file: File) => {
+    uploadOptionList(file, {
+      onSuccess: () => {
+        handleOptionsIdChange(removeExtension(file.name));
+        toast.success(t('ux_editor.modal_properties_code_list_upload_success'));
+      },
+      onError: (error: AxiosError<ApiError>) => {
+        if (!error.response?.data?.errorCode) {
+          toast.error(`${t('ux_editor.modal_properties_code_list_upload_generic_error')}`);
+        }
+      },
+    });
+  };
+
+  const onSubmit = (file: File) => {
+    const fileNameError = findFileNameError(optionListIds, file.name);
+    if (fileNameError) {
+      handleInvalidFileName(fileNameError);
+    } else {
+      handleUpload(file);
+    }
+  };
+
+  const handleInvalidFileName = (fileNameError: FileNameError) => {
+    switch (fileNameError) {
+      case 'invalidFileName':
+        return toast.error(t('ux_editor.model_properties_code_list_filename_error'));
+      case 'fileExists':
+        return toast.error(t('ux_editor.modal_properties_code_list_upload_duplicate_error'));
+    }
+  };
+
   return (
-    <div>
-      {isPending ? (
+    <>
+      <CodeListSelector component={component} handleOptionsIdChange={handleOptionsIdChange} />
+      <StudioFileUploader
+        className={classes.studioFileUploader}
+        accept='.json'
+        variant={'tertiary'}
+        uploaderButtonText={t('ux_editor.modal_properties_code_list_upload')}
+        onSubmit={onSubmit}
+      />
+      <Trans i18nKey={'ux_editor.modal_properties_code_list_read_more_static'}>
+        <a
+          className={classes.linkStaticCodeLists}
+          href={altinnDocsUrl({
+            relativeUrl: 'altinn-studio/reference/data/options/static-codelists/',
+          })}
+          target='_newTab'
+          rel='noopener noreferrer'
+        />
+      </Trans>
+    </>
+  );
+}
+
+type CodeListSelectorProps<T extends SelectionComponentType> = {
+  handleOptionsIdChange: (optionsId: string) => void;
+} & Pick<IGenericEditComponent<T>, 'component'>;
+
+function CodeListSelector<T extends SelectionComponentType>({
+  component,
+  handleOptionsIdChange,
+}: CodeListSelectorProps<T>): React.ReactNode {
+  const { t } = useTranslation();
+  const { org, app } = useStudioEnvironmentParams();
+  const { data: optionListIds, status, error } = useOptionListIdsQuery(org, app);
+
+  switch (status) {
+    case 'pending':
+      return (
         <StudioSpinner
           showSpinnerTitle={false}
           spinnerTitle={t('ux_editor.modal_properties_loading')}
         />
-      ) : isError ? (
+      );
+    case 'error':
+      return (
         <ErrorMessage>
           {error instanceof Error ? error.message : t('ux_editor.modal_properties_error_message')}
         </ErrorMessage>
-      ) : optionListIds?.length === 0 ? (
-        <>
-          <Alert severity='info' size='small'>
-            {t('ux_editor.modal_properties_no_options_found_message')}
-          </Alert>
-          <ManualCodelistUploadSteps />
-        </>
-      ) : (
-        <FormField
-          key={component.id}
-          id={component.id}
-          label={t('ux_editor.modal_properties_code_list_id')}
-          onChange={handleOptionsIdChange}
-          value={component.optionsId}
-          propertyPath={`${component.propertyPath}/properties/optionsId`}
-          renderField={({ fieldProps }) => (
-            <StudioNativeSelect
-              onChange={(e) => fieldProps.onChange(e.target.value)}
-              value={fieldProps.value}
-            >
-              <option hidden value=''>
-                {t('ux_editor.modal_properties_code_list_helper')}
-              </option>
-              {optionListIds.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </StudioNativeSelect>
-          )}
+      );
+    case 'success':
+      return (
+        <CodeListSelectorWithData
+          optionListIds={optionListIds}
+          component={component}
+          handleOptionsIdChange={handleOptionsIdChange}
         />
+      );
+  }
+}
+
+type CodeListSelectorWithDataProps<T extends SelectionComponentType> = {
+  optionListIds: string[];
+  handleOptionsIdChange: (optionsId: string) => void;
+} & Pick<IGenericEditComponent<T>, 'component'>;
+
+function CodeListSelectorWithData<T extends SelectionComponentType>({
+  optionListIds,
+  component,
+  handleOptionsIdChange,
+}: CodeListSelectorWithDataProps<T>): React.ReactNode {
+  const { t } = useTranslation();
+
+  if (!optionListIds.length) return null;
+  return (
+    <FormField
+      key={component.id}
+      id={component.id}
+      label={t('ux_editor.modal_properties_code_list_id')}
+      onChange={handleOptionsIdChange}
+      value={component.optionsId}
+      propertyPath={`${component.propertyPath}/properties/optionsId`}
+      renderField={({ fieldProps }) => (
+        <StudioNativeSelect
+          size='small'
+          onChange={(e) => fieldProps.onChange(e.target.value)}
+          value={fieldProps.value}
+        >
+          <option hidden value=''>
+            {t('ux_editor.modal_properties_code_list_helper')}
+          </option>
+          {optionListIds.map((optionListId) => (
+            <option key={optionListId} value={optionListId}>
+              {optionListId}
+            </option>
+          ))}
+        </StudioNativeSelect>
       )}
-      <p style={{ marginBottom: 0 }}>
-        <Trans i18nKey={'ux_editor.modal_properties_code_list_read_more_static'}>
-          <a
-            href={altinnDocsUrl({ relativeUrl: 'altinn-studio/guides/options/static-codelists/' })}
-            target='_newTab'
-            rel='noopener noreferrer'
-          />
-        </Trans>
-      </p>
-    </div>
+    />
   );
 }
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/ManualCodelistUploadSteps.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/ManualCodelistUploadSteps.module.css
deleted file mode 100644
index a17d9437171..00000000000
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/ManualCodelistUploadSteps.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.configWarningWrapper {
-  padding: var(--spacing-6) 0;
-}
-
-.configWarningHeader {
-  align-items: center;
-}
-
-.configWarningHeader {
-  background-color: var(--fds-semantic-surface-neutral-default);
-}
-
-.configWarningContent {
-  margin: var(--fds-spacing-2) var(--fds-spacing-4);
-  padding: var(--fds-spacing-6) var(--fds-spacing-4);
-  border: 1px solid var(--fds-semantic-border-neutral-subtle);
-  border-radius: var(--fds-border_radius-large);
-  background-color: var(--fds-semantic-surface-neutral-default);
-}
-
-.configWarningList {
-  margin-top: var(--fds-spacing-2);
-}
-
-.duplicatedId {
-  font-weight: bold;
-}
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/ManualCodelistUploadSteps.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/ManualCodelistUploadSteps.tsx
deleted file mode 100644
index 9bf8cb623f3..00000000000
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/ManualCodelistUploadSteps.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { List, Link, Accordion } from '@digdir/designsystemet-react';
-import { repositoryPath } from 'app-shared/api/paths';
-import { useTranslation } from 'react-i18next';
-import classes from './ManualCodelistUploadSteps.module.css';
-import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-
-export const ManualCodelistUploadSteps = () => {
-  const { t } = useTranslation();
-  const { org, app } = useStudioEnvironmentParams();
-
-  return (
-    <Accordion>
-      <Accordion.Item>
-        <Accordion.Header>{t('ux_editor.options.codelist_upload_info.heading')}</Accordion.Header>
-        <Accordion.Content>
-          <List.Root className={classes.configWarningList} size='small'>
-            <List.Ordered>
-              <List.Item>
-                <Link href={repositoryPath(org, app)} target='_blank'>
-                  {t('ux_editor.options.codelist_upload_info.step1')}
-                </Link>
-              </List.Item>
-              <List.Item>{t('ux_editor.options.codelist_upload_info.step2')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_upload_info.step3')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_upload_info.step4')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_upload_info.step5')}</List.Item>
-            </List.Ordered>
-          </List.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item>
-        <Accordion.Header>{t('ux_editor.options.codelist_create_info.heading')}</Accordion.Header>
-        <Accordion.Content>
-          <List.Root className={classes.configWarningList} size='small'>
-            <List.Ordered>
-              <List.Item>
-                <Link href={repositoryPath(org, app)} target='_blank'>
-                  {t('ux_editor.options.codelist_create_info.step1')}
-                </Link>
-              </List.Item>
-              <List.Item>{t('ux_editor.options.codelist_create_info.step2')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_create_info.step3')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_create_info.step4')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_create_info.step5')}</List.Item>
-              <List.Item>{t('ux_editor.options.codelist_create_info.step6')}</List.Item>
-            </List.Ordered>
-          </List.Root>
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/findFileNameError.test.ts b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/findFileNameError.test.ts
new file mode 100644
index 00000000000..108f40ccc63
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/findFileNameError.test.ts
@@ -0,0 +1,21 @@
+import { findFileNameError } from './findFileNameError';
+
+const optionListIdOne = 'one';
+const optionLists: string[] = [optionListIdOne];
+
+const validFilename = 'two.json';
+const invalidFilename = '_InvalidFileName.json';
+
+describe('findFileNameError', () => {
+  it('should return null for valid filename', () => {
+    expect(findFileNameError(optionLists, validFilename)).toBe(null);
+  });
+
+  it('should return "invalidFileName" for invalid filename', () => {
+    expect(findFileNameError(optionLists, invalidFilename)).toBe('invalidFileName');
+  });
+
+  it('should return "fileExists" for duplicate filename', () => {
+    expect(findFileNameError(optionLists, optionListIdOne + '.json')).toBe('fileExists');
+  });
+});
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/findFileNameError.ts b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/findFileNameError.ts
new file mode 100644
index 00000000000..307307991a0
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/findFileNameError.ts
@@ -0,0 +1,29 @@
+import { removeExtension } from 'app-shared/utils/filenameUtils';
+
+export type FileNameError = 'invalidFileName' | 'fileExists';
+
+export const findFileNameError = (
+  optionListIds: string[],
+  fileName: string,
+): FileNameError | null => {
+  const fileNameWithoutExtension = removeExtension(fileName);
+
+  if (!isFilenameValid(fileNameWithoutExtension)) {
+    return 'invalidFileName';
+  } else if (isFileNameDuplicate(optionListIds, fileNameWithoutExtension)) {
+    return 'fileExists';
+  } else {
+    return null;
+  }
+};
+
+const isFilenameValid = (fileName: string): boolean => {
+  return Boolean(fileName.match(/^[a-zA-Z][a-zA-Z0-9_.\-æÆøØåÅ ]*$/));
+};
+
+const isFileNameDuplicate = (
+  optionListIds: string[],
+  fileNameWithoutExtension: string,
+): boolean => {
+  return optionListIds.some((option) => option === fileNameWithoutExtension);
+};
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.module.css
index b0e905c7654..4cedbe1a3d0 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.module.css
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.module.css
@@ -20,6 +20,10 @@
   padding: var(--fds-spacing-5) 0;
 }
 
+.codelistTabContent {
+  padding: var(--fds-spacing-4);
+}
+
 .optionsHeading {
   padding-left: var(--fds-spacing-5);
 }
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx
index d9a604a8af1..1481f9de604 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx
@@ -87,7 +87,10 @@ export function EditOptions<T extends SelectionComponentType>({
               {t('ux_editor.options.tab_referenceId')}
             </StudioTabs.Tab>
           </StudioTabs.List>
-          <StudioTabs.Content value={SelectedOptionsType.CodeList}>
+          <StudioTabs.Content
+            className={classes.codelistTabContent}
+            value={SelectedOptionsType.CodeList}
+          >
             <EditCodeList component={component} handleComponentChange={handleComponentChange} />
           </StudioTabs.Content>
           <StudioTabs.Content
diff --git a/frontend/packages/ux-editor/src/hooks/mutations/useAddOptionListMutation.test.ts b/frontend/packages/ux-editor/src/hooks/mutations/useAddOptionListMutation.test.ts
new file mode 100644
index 00000000000..3680d5c70f7
--- /dev/null
+++ b/frontend/packages/ux-editor/src/hooks/mutations/useAddOptionListMutation.test.ts
@@ -0,0 +1,22 @@
+import { queriesMock } from 'app-shared/mocks/queriesMock';
+import { app, org } from '@studio/testing/testids';
+import { renderHookWithProviders } from '@altinn/ux-editor/testing/mocks';
+import { useAddOptionListMutation } from '@altinn/ux-editor/hooks/mutations/useAddOptionListMutation';
+
+// Test data:
+const file = new File(['hello'], 'hello.json', { type: 'text/json' });
+const formData = new FormData();
+formData.append('file', file);
+
+describe('useAddOptionsMutation', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('Calls useAddOptionsMutation with correct arguments and payload', async () => {
+    const optionsResult = renderHookWithProviders(() => useAddOptionListMutation(org, app)).result;
+
+    await optionsResult.current.mutateAsync(file);
+
+    expect(queriesMock.uploadOptionList).toHaveBeenCalledTimes(1);
+    expect(queriesMock.uploadOptionList).toHaveBeenCalledWith(org, app, formData);
+  });
+});
diff --git a/frontend/packages/ux-editor/src/hooks/mutations/useAddOptionListMutation.ts b/frontend/packages/ux-editor/src/hooks/mutations/useAddOptionListMutation.ts
new file mode 100644
index 00000000000..26c012aa800
--- /dev/null
+++ b/frontend/packages/ux-editor/src/hooks/mutations/useAddOptionListMutation.ts
@@ -0,0 +1,31 @@
+import type { MutationMeta } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useServicesContext } from 'app-shared/contexts/ServicesContext';
+import { QueryKey } from 'app-shared/types/QueryKey';
+
+export const useAddOptionListMutation = (org: string, app: string, meta?: MutationMeta) => {
+  const queryClient = useQueryClient();
+  const { uploadOptionList } = useServicesContext();
+
+  const mutationFn = (file: File) => {
+    const formData = createFormDataWithFile(file);
+    return uploadOptionList(org, app, formData);
+  };
+
+  return useMutation({
+    mutationFn,
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: [QueryKey.OptionListIds, org, app] }),
+        queryClient.invalidateQueries({ queryKey: [QueryKey.OptionLists, org, app] }),
+      ]);
+    },
+    meta,
+  });
+};
+
+const createFormDataWithFile = (file: File): FormData => {
+  const formData = new FormData();
+  formData.append('file', file);
+  return formData;
+};