diff --git a/libs/service-portal/assets/src/lib/messages.ts b/libs/service-portal/assets/src/lib/messages.ts
index daa67aff96c3..eb688c5e5955 100644
--- a/libs/service-portal/assets/src/lib/messages.ts
+++ b/libs/service-portal/assets/src/lib/messages.ts
@@ -198,6 +198,10 @@ export const vehicleMessage = defineMessages({
     id: 'sp.vehicles:vehicle-mileage-intro',
     defaultMessage: `Sýnir kílómetrastöðu fyrir hvert ár. Athugið að einungis er hægt að skrá einu sinni fyrir hvert tímabil, <href>sjá nánar um það hér.</href>`,
   },
+  vehicleBulkMileageIntro: {
+    id: 'sp.vehicles:vehicle-bulk-mileage-intro',
+    defaultMessage: `Yfirlit yfir skráða kílómetrastöðu. Að minnsta kosti 30 dagar verða að líða á milli skráningar kílómetrastöðu, <href>sjá nánar um það hér.</href>`,
+  },
   historyIntro: {
     id: 'sp.vehicles:vehicles-history-intro',
     defaultMessage: `Hér má nálgast upplýsingar um þinn ökutækjaferil úr ökutækjaskrá Samgöngustofu.`,
@@ -912,6 +916,10 @@ export const vehicleMessage = defineMessages({
     id: 'sp.vehicles:bulk-post-mileage',
     defaultMessage: 'Magnskrá kílómetrastöðu',
   },
+  bulkPostMileageWithFile: {
+    id: 'sp.vehicles:bulk-post-mileage-with-file',
+    defaultMessage: 'Magnskrá með skjali',
+  },
   jobOverview: {
     id: 'sp.vehicles:job-overview',
     defaultMessage: 'Yfirlit skráninga',
@@ -1018,21 +1026,30 @@ export const vehicleMessage = defineMessages({
   },
   fileUploadAcceptedTypes: {
     id: 'sp.vehicles:file-upload-accepted-types',
-    defaultMessage: 'Tekið er við skjölum með endingu; .csv, .xls',
+    defaultMessage: 'Tekið er við skjölum með endingu; .csv',
   },
   dataAboutJob: {
     id: 'sp.vehicles:data-about-job',
-    defaultMessage: 'Hér finnur þú upplýsingar um skráningu',
+    defaultMessage:
+      'Hér finnur þú upplýsingar um skráningu. Að vinna úr magnskráningarskjali getur tekið þónokkrar mínútur. ',
   },
   refreshDataAboutJob: {
     id: 'sp.vehicles:refresh-data-about-job',
     defaultMessage:
-      'Til að sækja nýjustu stöðu er hægt að smella á "Uppfæra stöðu"',
+      'Til að sækja nýjustu stöðu á skráningarkeyrslunni er hægt að smella á "Uppfæra stöðu"',
   },
   refreshJob: {
     id: 'sp.vehicles:refresh-job',
     defaultMessage: 'Uppfæra stöðu',
   },
+  mileagePostSuccess: {
+    id: 'sp.vehicles:mileage-post-success',
+    defaultMessage: 'Kílómetraskráning tókst',
+  },
+  mileagePutSuccess: {
+    id: 'sp.vehicles:mileage-put-success',
+    defaultMessage: 'Uppfærsla á kílómetraskráningu tókst',
+  },
   mileageHistoryFetchFailed: {
     id: 'sp.vehicles:mileage-history-fetch-failed',
     defaultMessage: 'Eitthvað fór úrskeiðis við að sækja fyrri skráningar',
diff --git a/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileage.tsx b/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileage.tsx
index c22e2ae8201b..635218334b18 100644
--- a/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileage.tsx
+++ b/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileage.tsx
@@ -27,13 +27,12 @@ const VehicleBulkMileage = () => {
   const [vehicles, setVehicles] = useState<Array<VehicleType>>([])
   const [page, setPage] = useState<number>(1)
   const [totalPages, setTotalPages] = useState<number>(1)
-  const [pageSize, setPageSize] = useState<number>(10)
 
-  const { data, loading, error, fetchMore } = useVehiclesListQuery({
+  const { data, loading, error } = useVehiclesListQuery({
     variables: {
       input: {
         page,
-        pageSize,
+        pageSize: 10,
       },
     },
   })
@@ -111,6 +110,7 @@ const VehicleBulkMileage = () => {
               totalPages={totalPages}
               renderLink={(page, className, children) => (
                 <button
+                  aria-label={formatMessage(m.goToPage)}
                   onClick={() => {
                     setPage(page)
                   }}
diff --git a/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageRow.tsx b/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageRow.tsx
index 6296aceccdfc..9203a66f7d67 100644
--- a/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageRow.tsx
+++ b/libs/service-portal/assets/src/screens/VehicleBulkMileage/VehicleBulkMileageRow.tsx
@@ -22,6 +22,7 @@ import { InputController } from '@island.is/shared/form-fields'
 import * as styles from './VehicleBulkMileage.css'
 import { displayWithUnit } from '../../utils/displayWithUnit'
 import { isReadDateToday } from '../../utils/readDate'
+import { useDebounce } from 'react-use'
 
 const ORIGIN_CODE = 'ISLAND.IS'
 
@@ -32,42 +33,44 @@ interface Props {
 export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
   const { formatMessage } = useLocale()
   const [postError, setPostError] = useState<string | null>(null)
-  const [postSuccess, setPostSuccess] = useState(false)
+  const [postStatus, setPostStatus] = useState<
+    'initial' | 'posting' | 'post-success' | 'put-success' | 'error'
+  >('initial')
 
-  const [executeRegistrationsQuery, { data, loading, error }] =
-    useVehicleMileageRegistrationHistoryLazyQuery({
-      variables: {
-        input: {
-          permno: vehicle.vehicleId,
-        },
+  const [
+    executeRegistrationsQuery,
+    { data, loading, error, refetch: registrationsRefetch },
+  ] = useVehicleMileageRegistrationHistoryLazyQuery({
+    variables: {
+      input: {
+        permno: vehicle.vehicleId,
       },
-    })
+    },
+  })
 
-  const [putAction, { loading: putActionLoading }] =
-    usePutSingleVehicleMileageMutation({
-      onError: () => {
-        setPostError(formatMessage(m.errorTitle))
-        setPostSuccess(false)
-      },
-      onCompleted: () => {
-        setPostError(null)
-        setPostSuccess(true)
-      },
-    })
+  const [putAction] = usePutSingleVehicleMileageMutation({
+    onError: () => {
+      setPostError(formatMessage(m.errorTitle))
+      setPostStatus('error')
+    },
+    onCompleted: () => {
+      setPostError(null)
+      setPostStatus('put-success')
+    },
+  })
 
-  const [postAction, { loading: postActionLoading }] =
-    usePostSingleVehicleMileageMutation({
-      onError: () => {
-        setPostError(formatMessage(m.errorTitle))
-        setPostSuccess(false)
-      },
-      onCompleted: () => {
-        setPostError(null)
-        setPostSuccess(true)
-      },
-    })
+  const [postAction] = usePostSingleVehicleMileageMutation({
+    onError: () => {
+      setPostError(formatMessage(m.errorTitle))
+      setPostStatus('error')
+    },
+    onCompleted: () => {
+      setPostError(null)
+      setPostStatus('post-success')
+    },
+  })
 
-  const [executeMileageQuery, { data: mileageData, loading: mileageLoading }] =
+  const [executeMileageQuery, { data: mileageData, refetch: mileageRefetch }] =
     useGetUsersMileageLazyQuery({
       variables: { input: { permno: vehicle.vehicleId } },
     })
@@ -79,6 +82,27 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
     trigger,
   } = useFormContext()
 
+  const postMileage = () => {
+    const formerPostStatus = postStatus
+    setPostError(null)
+    setPostStatus('posting')
+    if (formerPostStatus !== 'initial') {
+      mileageRefetch()
+    } else {
+      executeMileageQuery()
+    }
+  }
+
+  useDebounce(
+    () => {
+      if (postStatus === 'put-success' || postStatus === 'post-success') {
+        registrationsRefetch()
+      }
+    },
+    500,
+    [postStatus, registrationsRefetch],
+  )
+
   const getValueFromForm = async (
     formFieldId: string,
     skipEmpty = false,
@@ -94,13 +118,11 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
   }
 
   const onSaveButtonClick = async () => {
-    setPostError(null)
-    setPostSuccess(false)
-    executeMileageQuery()
+    postMileage()
   }
 
   useEffect(() => {
-    const postMileage = async () => {
+    const post = async () => {
       const formValue = await getValueFromForm(vehicle.vehicleId)
       if (formValue) {
         if (
@@ -134,7 +156,7 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
     }
 
     if (mileageData) {
-      postMileage()
+      post()
     }
   }, [mileageData])
 
@@ -247,11 +269,12 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
           value: (
             <VehicleBulkMileageSaveButton
               submissionStatus={
-                postError
+                postStatus === 'error'
                   ? 'error'
-                  : postActionLoading || putActionLoading || mileageLoading
+                  : postStatus === 'posting'
                   ? 'loading'
-                  : postSuccess
+                  : postStatus === 'post-success' ||
+                    postStatus === 'put-success'
                   ? 'success'
                   : 'idle'
               }
@@ -261,6 +284,16 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
         },
       ]}
     >
+      {(postStatus === 'post-success' || postStatus === 'put-success') && (
+        <AlertMessage
+          type="success"
+          message={formatMessage(
+            postStatus === 'post-success'
+              ? vehicleMessage.mileagePostSuccess
+              : vehicleMessage.mileagePutSuccess,
+          )}
+        />
+      )}
       {error ? (
         <AlertMessage
           type="error"
@@ -271,7 +304,7 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
           headerArray={[
             formatMessage(vehicleMessage.date),
             formatMessage(vehicleMessage.registration),
-            formatMessage(vehicleMessage.annualUsage),
+            //formatMessage(vehicleMessage.annualUsage),
             formatMessage(vehicleMessage.odometer),
           ]}
           loading={loading}
@@ -281,7 +314,7 @@ export const VehicleBulkMileageRow = ({ vehicle }: Props) => {
               (r) => [
                 formatDate(r.date),
                 r.originCode,
-                '-',
+                //'-',
                 displayWithUnit(r.mileage, 'km', true),
               ],
             ) ?? []
diff --git a/libs/service-portal/assets/src/screens/VehicleBulkMileageJobDetail/VehicleBulkMileageJobDetail.tsx b/libs/service-portal/assets/src/screens/VehicleBulkMileageJobDetail/VehicleBulkMileageJobDetail.tsx
index 474a4785531a..2d2fccef78d5 100644
--- a/libs/service-portal/assets/src/screens/VehicleBulkMileageJobDetail/VehicleBulkMileageJobDetail.tsx
+++ b/libs/service-portal/assets/src/screens/VehicleBulkMileageJobDetail/VehicleBulkMileageJobDetail.tsx
@@ -26,6 +26,7 @@ import { VehiclesBulkMileageRegistrationRequestOverview } from '@island.is/servi
 import { displayWithUnit } from '../../utils/displayWithUnit'
 import { isDefined } from '@island.is/shared/utils'
 import { vehicleMessage } from '../../lib/messages'
+import { NetworkStatus } from '@apollo/client'
 
 type UseParams = {
   id: string
@@ -36,19 +37,24 @@ const VehicleBulkMileageJobDetail = () => {
   const { formatMessage } = useLocale()
   const { id } = useParams() as UseParams
 
-  const { data, loading, error, refetch } = useGetJobsStatusQuery({
-    variables: {
-      input: {
-        requestId: id,
+  const { data, loading, error, refetch, networkStatus } =
+    useGetJobsStatusQuery({
+      notifyOnNetworkStatusChange: true,
+      variables: {
+        input: {
+          requestId: id,
+        },
       },
-    },
-  })
+    })
 
   const {
     data: registrationData,
     loading: registrationLoading,
     error: registrationError,
+    refetch: registrationRefresh,
+    networkStatus: registrationNetworkStatus,
   } = useGetJobRegistrationsQuery({
+    notifyOnNetworkStatusChange: true,
     variables: {
       input: {
         guid: id,
@@ -56,6 +62,11 @@ const VehicleBulkMileageJobDetail = () => {
     },
   })
 
+  const handleRefresh = () => {
+    refetch()
+    registrationRefresh()
+  }
+
   const jobsStatus: VehiclesBulkMileageRegistrationRequestStatus | undefined =
     data?.vehicleBulkMileageRegistrationRequestStatus ?? undefined
 
@@ -86,6 +97,11 @@ const VehicleBulkMileageJobDetail = () => {
     downloadFile(`magnskraning_villur`, ['Ökutæki', 'Villur'], data, 'csv')
   }
 
+  const displayRegistrationData =
+    registrations?.requests.length &&
+    !registrationLoading &&
+    !(registrationNetworkStatus === NetworkStatus.refetch)
+
   return (
     <Box>
       <IntroHeader
@@ -101,7 +117,16 @@ const VehicleBulkMileageJobDetail = () => {
         serviceProviderTooltip={formatMessage(m.vehiclesTooltip)}
       >
         <Box marginTop={'containerGutter'}>
-          <Button variant="utility" icon="reload" onClick={() => refetch()}>
+          <Button
+            variant="utility"
+            icon={
+              loading || networkStatus === NetworkStatus.refetch
+                ? undefined
+                : 'reload'
+            }
+            loading={loading || networkStatus === NetworkStatus.refetch}
+            onClick={handleRefresh}
+          >
             {formatMessage(vehicleMessage.refreshJob)}
           </Button>
         </Box>
@@ -118,6 +143,8 @@ const VehicleBulkMileageJobDetail = () => {
         <Stack space={8}>
           <TableGrid
             title={formatMessage(vehicleMessage.jobStatus)}
+            loading={loading || networkStatus === NetworkStatus.refetch}
+            emptyMessage={vehicleMessage.noJobsFound}
             dataArray={
               data?.vehicleBulkMileageRegistrationRequestStatus
                 ? [
@@ -181,6 +208,7 @@ const VehicleBulkMileageJobDetail = () => {
                 size="default"
                 variant="utility"
                 onClick={handleFileDownload}
+                disabled={!displayRegistrationData}
               >
                 {formatMessage(vehicleMessage.downloadErrors)}
               </Button>
@@ -201,7 +229,7 @@ const VehicleBulkMileageJobDetail = () => {
               </T.Head>
 
               <T.Body>
-                {!!registrations?.requests.length &&
+                {displayRegistrationData &&
                   registrations?.requests.map((j) => (
                     <T.Row key={j.vehicleId}>
                       <T.Data>
@@ -223,10 +251,13 @@ const VehicleBulkMileageJobDetail = () => {
                   ))}
               </T.Body>
             </T.Table>
-            {(!registrations || registrationLoading) && (
+            {!displayRegistrationData && (
               <EmptyTable
                 message={formatMessage(vehicleMessage.noRegistrationsFound)}
-                loading={registrationLoading}
+                loading={
+                  registrationLoading ||
+                  registrationNetworkStatus === NetworkStatus.refetch
+                }
               />
             )}
           </Box>
diff --git a/libs/service-portal/core/src/components/TableGrid/TableGrid.tsx b/libs/service-portal/core/src/components/TableGrid/TableGrid.tsx
index 5bb99cdde91c..11f2be0c14fe 100644
--- a/libs/service-portal/core/src/components/TableGrid/TableGrid.tsx
+++ b/libs/service-portal/core/src/components/TableGrid/TableGrid.tsx
@@ -1,6 +1,14 @@
 import React, { FC } from 'react'
-import { Text, Table as T, Column, Columns } from '@island.is/island-ui/core'
+import {
+  Text,
+  Table as T,
+  Column,
+  Columns,
+  SkeletonLoader,
+} from '@island.is/island-ui/core'
 import { tableStyles } from '../../utils/utils'
+import { EmptyTable } from '../EmptyTable/EmptyTable'
+import { MessageDescriptor } from 'react-intl'
 
 interface TableItem {
   title: string
@@ -13,6 +21,8 @@ interface Props {
   title?: string
   subtitle?: string
   mt?: boolean
+  loading?: boolean
+  emptyMessage?: MessageDescriptor
 }
 
 export const TableGrid: FC<React.PropsWithChildren<Props>> = ({
@@ -20,6 +30,8 @@ export const TableGrid: FC<React.PropsWithChildren<Props>> = ({
   title,
   subtitle,
   mt,
+  loading,
+  emptyMessage,
 }) => {
   return (
     <T.Table box={mt ? { marginTop: 'containerGutter' } : undefined}>
@@ -36,46 +48,48 @@ export const TableGrid: FC<React.PropsWithChildren<Props>> = ({
         </T.Row>
       </T.Head>
       <T.Body>
-        {dataArray.map((row, ii) => (
-          <T.Row key={`row-${ii}`}>
-            {row.map(
-              (rowitem, iii) =>
-                rowitem && (
-                  <T.Data
-                    key={`rowitem-${iii}`}
-                    colSpan={2}
-                    style={tableStyles}
-                  >
-                    <Columns alignY="center" collapseBelow="lg" space={2}>
-                      <Column>
-                        <Text
-                          title={rowitem.detail}
-                          variant="medium"
-                          fontWeight="semiBold"
-                          as="span"
-                        >
-                          {rowitem.title}
-                        </Text>
-                      </Column>
-                      <Column>
-                        <Text
-                          as={
-                            typeof rowitem.value === 'string'
-                              ? undefined
-                              : 'span'
-                          }
-                          variant="medium"
-                          title={rowitem.detail}
-                        >
-                          {rowitem.value}
-                        </Text>
-                      </Column>
-                    </Columns>
-                  </T.Data>
-                ),
-            )}
-          </T.Row>
-        ))}
+        {loading && <EmptyTable message={emptyMessage} loading={loading} />}
+        {!loading &&
+          dataArray.map((row, ii) => (
+            <T.Row key={`row-${ii}`}>
+              {row.map(
+                (rowitem, iii) =>
+                  rowitem && (
+                    <T.Data
+                      key={`rowitem-${iii}`}
+                      colSpan={2}
+                      style={tableStyles}
+                    >
+                      <Columns alignY="center" collapseBelow="lg" space={2}>
+                        <Column>
+                          <Text
+                            title={rowitem.detail}
+                            variant="medium"
+                            fontWeight="semiBold"
+                            as="span"
+                          >
+                            {rowitem.title}
+                          </Text>
+                        </Column>
+                        <Column>
+                          <Text
+                            as={
+                              typeof rowitem.value === 'string'
+                                ? undefined
+                                : 'span'
+                            }
+                            variant="medium"
+                            title={rowitem.detail}
+                          >
+                            {rowitem.value}
+                          </Text>
+                        </Column>
+                      </Columns>
+                    </T.Data>
+                  ),
+              )}
+            </T.Row>
+          ))}
       </T.Body>
     </T.Table>
   )
diff --git a/libs/service-portal/core/src/lib/messages.ts b/libs/service-portal/core/src/lib/messages.ts
index fc72b9ef77cc..7c459b2c841b 100644
--- a/libs/service-portal/core/src/lib/messages.ts
+++ b/libs/service-portal/core/src/lib/messages.ts
@@ -5,6 +5,10 @@ export const m = defineMessages({
     id: 'service.portal:reference',
     defaultMessage: 'Tilvísun',
   },
+  goToPage: {
+    id: 'service.portal:go-to-page',
+    defaultMessage: 'Fara á síðu',
+  },
   print: {
     id: 'service.portal:print',
     defaultMessage: 'Prenta',