diff --git a/src/api/generated/models/AnalogueList.ts b/src/api/generated/models/AnalogueList.ts
index 92bfd0bb..3e9a83a8 100644
--- a/src/api/generated/models/AnalogueList.ts
+++ b/src/api/generated/models/AnalogueList.ts
@@ -5,6 +5,6 @@
 
 export type AnalogueList = {
   analogueId?: string;
-  name?: string | null;
+  name: string;
   description?: string | null;
 };
diff --git a/src/api/generated/models/ParameterList.ts b/src/api/generated/models/ParameterList.ts
index 1caac1a8..c063991f 100644
--- a/src/api/generated/models/ParameterList.ts
+++ b/src/api/generated/models/ParameterList.ts
@@ -6,6 +6,6 @@
 export type ParameterList = {
   parameterId?: string;
   identifier?: string | null;
-  name?: string | null;
+  name: string;
   description?: string | null;
 };
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
index 2af2bf9f..fefb7e75 100644
--- a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
+++ b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable max-lines-per-function */
 import { Button, Typography } from '@equinor/eds-core-react';
 import { useEffect, useState } from 'react';
+import { AnalogueList } from '../../../api/generated/models/AnalogueList';
 import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable';
 import { ModelMetadata } from '../ModelMetadata/ModelMetadata';
 import * as Styled from './AddModelDialog.styled';
@@ -16,7 +17,7 @@ export default interface MetadataProps {
   field: string[];
   zone?: string[];
   formation: string[];
-  analogue?: string[];
+  analogue?: string[] | AnalogueList[];
 }
 
 export type ErrorType = {
diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
index f44cb619..94462f0a 100644
--- a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
+++ b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
@@ -7,6 +7,8 @@ import {
 } from '@equinor/eds-core-react';
 import MetadataProps, { ErrorType } from '../AddModelDialog/AddModelDialog';
 
+import { useQuery } from '@tanstack/react-query';
+import { AnalogueList, AnaloguesService } from '../../../api/generated';
 import * as Styled from './ModelMetadata.styled';
 
 export const ModelMetadata = ({
@@ -26,6 +28,13 @@ export const ModelMetadata = ({
     analogue: ['Analouge1', 'Analouge2'],
   };
 
+  const { isLoading, data } = useQuery({
+    queryKey: ['apiParameters'],
+    queryFn: () => AnaloguesService.getApiAnalogues(),
+  });
+
+  if (isLoading || !data?.success) return <p>Loading ...</p>;
+
   const handleInput = (e: AutocompleteChanges<string>, target: string) => {
     setMetadata({ ...metadata, [target]: e.selectedItems });
   };
@@ -76,9 +85,10 @@ export const ModelMetadata = ({
           <Styled.AutocompleteRow>
             <Autocomplete
               label="Analogue (optional)"
-              options={fields.analogue}
+              options={data.data}
+              optionLabel={(option) => option.name}
               multiple
-              onOptionsChange={(e: AutocompleteChanges<string>) =>
+              onOptionsChange={(e: AutocompleteChanges<AnalogueList>) =>
                 setMetadata({ ...metadata, analogue: e.selectedItems })
               }
             ></Autocomplete>
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
index 93a5dbee..e6d6d714 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -1,10 +1,17 @@
 /* eslint-disable max-lines-per-function */
 import { Typography } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
+import { ParameterList } from '../../../../api/generated/models/ParameterList';
+import { ParametersService } from '../../../../api/generated/services/ParametersService';
 import * as Styled from './CaseCard.styled';
 import { CaseCardButtons } from './CaseCardButtons/CaseCardButtons';
 import { CaseCardInputs } from './CaseCardInputs/CaseCardInputs';
-import { CaseCardParameters } from './CaseCardParameters/CaseCardParameters';
+import { ModelSelect } from './CaseCardParameters/ModelSelect/ModelSelect';
+
+import { GrainSizeSelect } from './CaseCardParameters/GrainSizeSelect/GrainSizeSelect';
+import { ParameterSelect } from './CaseCardParameters/ParameterSelect/ParameterSelect';
+
 export default interface optionTypes {
   id: number;
   name: string;
@@ -25,7 +32,14 @@ export const CaseCard = ({
   const [selectedGrainSize, setGrainSize] = useState<optionTypes>();
   const [selectedVariogramModels, setVariogramModels] =
     useState<optionTypes[]>();
-  const [selectedParameters, setParameters] = useState<optionTypes[]>();
+  const [selectedParameters, setParameters] = useState<ParameterList[]>();
+
+  const { isLoading, data } = useQuery({
+    queryKey: ['apiParameters'],
+    queryFn: () => ParametersService.getApiParameters(),
+  });
+
+  if (isLoading || !data?.success) return <p>Loading ...</p>;
 
   const grainOptions: optionTypes[] = [
     { id: 1, name: 'Silt', size: '0.044mm' },
@@ -40,10 +54,10 @@ export const CaseCard = ({
     { id: 7, name: 'General exponential' },
   ];
 
-  const parameterOptions: optionTypes[] = [
-    { id: 8, name: 'Porosity' },
-    { id: 9, name: 'Permeability' },
-  ];
+  // const parameterOptions: optionTypes[] = [
+  //   { id: 8, name: 'Porosity' },
+  //   { id: 9, name: 'Permeability' },
+  // ];
 
   const modelAreas: optionTypes[] = [
     { id: 10, name: 'Proximal' },
@@ -55,10 +69,15 @@ export const CaseCard = ({
     { id: 14, name: 'Continuous parameter' },
   ];
   const runCase = () => {
+    // eslint-disable-next-line no-console
     console.log(selectedModelArea);
+    // eslint-disable-next-line no-console
     console.log(selectedComputeMethod);
+    // eslint-disable-next-line no-console
     console.log(selectedGrainSize);
+    // eslint-disable-next-line no-console
     console.log(selectedVariogramModels);
+    // eslint-disable-next-line no-console
     console.log(selectedParameters);
   };
 
@@ -80,7 +99,7 @@ export const CaseCard = ({
         {selectedModelArea && selectedComputeMethod ? (
           <Styled.Parameters>
             {selectedComputeMethod.name === 'Net-to-gross' && (
-              <CaseCardParameters
+              <GrainSizeSelect
                 label={'From grain size'}
                 type={'grainSize'}
                 options={grainOptions}
@@ -89,15 +108,15 @@ export const CaseCard = ({
               />
             )}
             {selectedComputeMethod.name === 'Continuous parameter' && (
-              <CaseCardParameters
+              <ParameterSelect
                 label={'Parameter'}
                 type={'parameters'}
-                options={parameterOptions}
+                options={data.data}
                 selectedParameters={selectedParameters}
                 setParameters={setParameters}
               />
             )}
-            <CaseCardParameters
+            <ModelSelect
               label={'Variogram model'}
               type={'variogramModels'}
               options={modelOptions}
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/CaseCardParameters.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/CaseCardParameters.tsx
deleted file mode 100644
index c25a9d06..00000000
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/CaseCardParameters.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable max-lines-per-function */
-import {
-  Autocomplete,
-  AutocompleteChanges,
-  Chip,
-} from '@equinor/eds-core-react';
-import { default as optionTypes } from '../CaseCard';
-import * as Styled from './CaseCardParameters.styled';
-
-export const CaseCardParameters = ({
-  label,
-  type,
-  options,
-  selectedGrainSize,
-  selectedVariogramModels,
-  selectedParameters,
-  setGrainSize,
-  setVariogramModels,
-  setParameters,
-}: {
-  label: string;
-  type: string;
-  options: optionTypes[];
-  selectedGrainSize?: optionTypes | undefined;
-  selectedVariogramModels?: optionTypes[] | undefined;
-  selectedParameters?: optionTypes[] | undefined;
-  setGrainSize?: React.Dispatch<React.SetStateAction<optionTypes | undefined>>;
-  setVariogramModels?: React.Dispatch<
-    React.SetStateAction<optionTypes[] | undefined>
-  >;
-  setParameters?: React.Dispatch<
-    React.SetStateAction<optionTypes[] | undefined>
-  >;
-}) => {
-  const onGrainSizeChange = (changes: AutocompleteChanges<optionTypes>) => {
-    setGrainSize && setGrainSize(changes.selectedItems[0]);
-  };
-  const onModelChange = (changes: AutocompleteChanges<optionTypes>) => {
-    setVariogramModels && setVariogramModels(changes.selectedItems);
-  };
-  const onParameterChange = (changes: AutocompleteChanges<optionTypes>) => {
-    setParameters && setParameters(changes.selectedItems);
-  };
-
-  return (
-    <Styled.Parameters>
-      {type === 'grainSize' && (
-        <Autocomplete
-          label={label}
-          options={options}
-          optionLabel={(option) => option.name}
-          onOptionsChange={onGrainSizeChange}
-        ></Autocomplete>
-      )}
-      {type === 'variogramModels' && (
-        <Autocomplete
-          label={label}
-          options={options}
-          optionLabel={(opt) => opt.name}
-          onOptionsChange={onModelChange}
-          multiple
-        ></Autocomplete>
-      )}
-      {type === 'parameters' && (
-        <Autocomplete
-          label={label}
-          options={options}
-          optionLabel={(opt) => opt.name}
-          onOptionsChange={onParameterChange}
-          multiple
-        ></Autocomplete>
-      )}
-
-      {selectedGrainSize && type === 'grainSize' && (
-        <Chip key={selectedGrainSize.id}>{selectedGrainSize.size}</Chip>
-      )}
-      {selectedVariogramModels &&
-        type === 'variogramModels' &&
-        selectedVariogramModels.map((s) => <Chip key={s.id}>{s.name}</Chip>)}
-      {selectedParameters &&
-        type === 'parameters' &&
-        selectedParameters.map((s) => <Chip key={s.id}>{s.name}</Chip>)}
-    </Styled.Parameters>
-  );
-};
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx
new file mode 100644
index 00000000..b1d70a9c
--- /dev/null
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx
@@ -0,0 +1,40 @@
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Chip,
+} from '@equinor/eds-core-react';
+import { default as optionTypes } from '../../CaseCard';
+import * as Styled from '../CaseCardParameters.styled';
+
+export const GrainSizeSelect = ({
+  label,
+  type,
+  options,
+  selectedGrainSize,
+  setGrainSize,
+}: {
+  label: string;
+  type: string;
+  options: optionTypes[];
+  selectedGrainSize?: optionTypes;
+  setGrainSize: React.Dispatch<React.SetStateAction<optionTypes | undefined>>;
+}) => {
+  const onGrainSizeChange = (changes: AutocompleteChanges<optionTypes>) => {
+    setGrainSize && setGrainSize(changes.selectedItems[0]);
+  };
+
+  return (
+    <Styled.Parameters>
+      <Autocomplete
+        label={label}
+        options={options}
+        optionLabel={(option) => option.name}
+        onOptionsChange={onGrainSizeChange}
+      ></Autocomplete>
+
+      {selectedGrainSize && (
+        <Chip key={selectedGrainSize.id}>{selectedGrainSize.size}</Chip>
+      )}
+    </Styled.Parameters>
+  );
+};
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx
new file mode 100644
index 00000000..33804e23
--- /dev/null
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable max-lines-per-function */
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Chip,
+} from '@equinor/eds-core-react';
+import { default as optionTypes } from '../../CaseCard';
+import * as Styled from '../CaseCardParameters.styled';
+
+export const ModelSelect = ({
+  label,
+  type,
+  options,
+  selectedVariogramModels,
+  setVariogramModels,
+}: {
+  label: string;
+  type: string;
+  options: optionTypes[];
+
+  selectedVariogramModels?: optionTypes[] | undefined;
+  setVariogramModels?: React.Dispatch<
+    React.SetStateAction<optionTypes[] | undefined>
+  >;
+}) => {
+  const onModelChange = (changes: AutocompleteChanges<optionTypes>) => {
+    setVariogramModels && setVariogramModels(changes.selectedItems);
+  };
+
+  return (
+    <Styled.Parameters>
+      <Autocomplete
+        label={label}
+        options={options}
+        optionLabel={(opt) => opt.name}
+        onOptionsChange={onModelChange}
+        multiple
+      ></Autocomplete>
+
+      {selectedVariogramModels &&
+        type === 'variogramModels' &&
+        selectedVariogramModels.map((s) => <Chip key={s.id}>{s.name}</Chip>)}
+    </Styled.Parameters>
+  );
+};
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx
new file mode 100644
index 00000000..14dda1f7
--- /dev/null
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx
@@ -0,0 +1,43 @@
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Chip,
+} from '@equinor/eds-core-react';
+import { ParameterList } from '../../../../../../api/generated/models/ParameterList';
+import * as Styled from '../CaseCardParameters.styled';
+
+export const ParameterSelect = ({
+  label,
+  type,
+  options,
+  selectedParameters,
+  setParameters,
+}: {
+  label: string;
+  type: string;
+  options: ParameterList[];
+  selectedParameters?: ParameterList[];
+  setParameters: React.Dispatch<
+    React.SetStateAction<ParameterList[] | undefined>
+  >;
+}) => {
+  const onParameterChange = (changes: AutocompleteChanges<ParameterList>) => {
+    setParameters(changes.selectedItems);
+  };
+
+  return (
+    <Styled.Parameters>
+      <Autocomplete
+        label={label}
+        options={options}
+        optionLabel={(option) => option.name}
+        onOptionsChange={onParameterChange}
+        multiple
+      ></Autocomplete>
+      {selectedParameters &&
+        selectedParameters.map((s) => (
+          <Chip key={s.parameterId}>{s.name}</Chip>
+        ))}
+    </Styled.Parameters>
+  );
+};
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
index c88ade58..07c242f9 100644
--- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
+++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -1,7 +1,7 @@
 import { Button, Table, Typography } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { AnalogueModelsService } from '../../../api/generated/services/AnalogueModelsService';
-import { useQuery } from '@tanstack/react-query';
 
 export type ModelParam = {
   id: string;
@@ -21,7 +21,7 @@ export const ModelMetadataView = () => {
     <div className="metadata-view">
       <Typography variant="h3">Description and metadata</Typography>
       {data.data.description && (
-        <p>
+        <div>
           {data.data.description}
           <br />
           <p>
@@ -34,7 +34,7 @@ export const ModelMetadataView = () => {
             blandit, justo ex pellentesque nisl, eu placerat magna nisi et odio.
             Donec laoreet est quam, id fringilla magna semper in. **
           </p>
-        </p>
+        </div>
       )}
       <div>
         <Table>
diff --git a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx
index 26bc2a2c..7c0c54d3 100644
--- a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx
+++ b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx
@@ -1,7 +1,7 @@
 import { Table, Typography } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { AnalogueModelsService, UploadList } from '../../../api/generated';
-import { useQuery } from '@tanstack/react-query';
 
 export const ModelSourceView = () => {
   const { id } = useParams();
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
index fe8dc84e..9001e09f 100644
--- a/src/pages/Browse/Browse.tsx
+++ b/src/pages/Browse/Browse.tsx
@@ -1,13 +1,16 @@
+/* eslint-disable max-lines-per-function */
 import { Button, Snackbar, Typography } from '@equinor/eds-core-react';
-import { useState } from 'react';
-import { Table } from '../../components/Table';
-import * as Styled from './Browse.styled';
 import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
 import {
   AnalogueModelsService,
+  ConvertAnalogueModelCommand,
   CreateAnalogueModelCommand,
+  JobsService,
 } from '../../api/generated';
+import { Table } from '../../components/Table';
 import { AddModelDialog } from '../../features/AddModel/AddModelDialog/AddModelDialog';
+import * as Styled from './Browse.styled';
 
 enum UploadProcess {
   STARTED = 'We are uploading your new model. Please keep this browser tab open.',
@@ -20,6 +23,12 @@ type MutationContract = {
   file: Blob;
 };
 
+const ModelBody: CreateAnalogueModelCommand = {
+  name: 'Model test',
+  description: 'New test of the model',
+  sourceType: 'ResQML',
+};
+
 export const Browse = () => {
   const createModel = useMutation({
     mutationFn: AnalogueModelsService.postApiAnalogueModels,
@@ -34,6 +43,12 @@ export const Browse = () => {
     },
   });
 
+  const convertModelFile = useMutation({
+    mutationFn: (modelId: ConvertAnalogueModelCommand) => {
+      return JobsService.postApiJobsComputeModelConversions(modelId);
+    },
+  });
+
   const [isAddModelDialog, setAddModelDialog] = useState<boolean>(false);
   const [uploadStatus, setUploadStatus] = useState<string>();
 
@@ -47,26 +62,30 @@ export const Browse = () => {
 
   async function uploadModel(file: File) {
     setUploadStatus(UploadProcess.STARTED);
-    const modelUpload = await createModel.mutateAsync(
-      // TODO
-      {
-        name: 'testModel',
-        description: 'description',
-        sourceType: 'Deltares',
-      } as CreateAnalogueModelCommand,
-    );
-
-    if (createModel?.isSuccess) {
+
+    const modelUpload = await createModel.mutateAsync(ModelBody);
+
+    if (createModel.error === null && modelUpload.success) {
       toggleDialog();
-      const fileUpload = await uploadNCFile.mutateAsync({
+      const FileUploadBody: MutationContract = {
         id: modelUpload.data.analogueModelId ?? '',
         file: file,
-      } as MutationContract);
+      };
+      const fileUpload = await uploadNCFile.mutateAsync(FileUploadBody);
 
-      if (fileUpload && uploadNCFile.isSuccess)
+      if (uploadNCFile.error === null && fileUpload.success) {
         setUploadStatus(UploadProcess.SUCCESS);
-      else if (!uploadNCFile.isSuccess) {
+
+        const id = modelUpload.data.analogueModelId;
+        const convert = await convertModelFile.mutateAsync({
+          modelId: id,
+        });
+
+        // eslint-disable-next-line no-console
+        console.log(convert);
+      } else if (uploadNCFile.error) {
         setUploadStatus(UploadProcess.FAILED);
+
         // TODO: show validation message
       }
     }
@@ -78,7 +97,7 @@ export const Browse = () => {
         <Typography variant="h1">Browse all models</Typography>
         <div className="btn-div">
           <Button onClick={toggleDialog}>Add new model</Button>
-          <Button href="/model/bf2171bc-2f5e-44a1-f6e0-08dbb5ed15e2/details">
+          <Button href="/model/4e999a96-34a3-4121-998d-08dbb2a7609c/details">
             Model view - Hardkodet
           </Button>
         </div>
@@ -91,7 +110,7 @@ export const Browse = () => {
       />
       <Snackbar
         open={!!uploadStatus}
-        autoHideDuration={5000}
+        autoHideDuration={15000}
         onClose={clearStatus}
       >
         {uploadStatus}