diff --git a/src/frontend/lib/types/Core.tsx b/src/frontend/lib/types/Core.tsx
index 19792ac812..edfc60c64b 100644
--- a/src/frontend/lib/types/Core.tsx
+++ b/src/frontend/lib/types/Core.tsx
@@ -1,4 +1,4 @@
-import type { MantineSize } from '@mantine/core';
+import type { MantineRadius, MantineSize } from '@mantine/core';
 
 export type UiSizeType = MantineSize | string | number;
 
@@ -6,7 +6,7 @@ export interface UserTheme {
   primaryColor: string;
   whiteColor: string;
   blackColor: string;
-  radius: UiSizeType;
+  radius: MantineRadius;
   loader: string;
 }
 
diff --git a/src/frontend/src/defaults/defaults.tsx b/src/frontend/src/defaults/defaults.tsx
index 1463538a23..fc91644c1b 100644
--- a/src/frontend/src/defaults/defaults.tsx
+++ b/src/frontend/src/defaults/defaults.tsx
@@ -1,4 +1,4 @@
-import type { MantineSize } from '@mantine/core';
+import type { MantineRadius } from '@mantine/core';
 
 export const emptyServerAPI = {
   server: null,
@@ -26,7 +26,7 @@ export const emptyServerAPI = {
 
 export interface SiteMarkProps {
   value: number;
-  label: MantineSize;
+  label: MantineRadius;
 }
 
 export const SizeMarks: SiteMarkProps[] = [
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
index c0d8394d64..ccb8a46870 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -40,19 +40,19 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
   );
 
   // radius
-  function getMark(value: number) {
+  function getRadiusFromValue(value: number) {
     const obj = SizeMarks.find((mark) => mark.value === value);
-    if (obj) return obj;
-    return SizeMarks[0];
+    if (obj) return obj.label;
+    return 'sm';
   }
-  function getDefaultRadius() {
-    const value = Number.parseInt(userTheme.radius.toString());
-    return SizeMarks.some((mark) => mark.value === value) ? value : 50;
-  }
-  const [radius, setRadius] = useState(getDefaultRadius());
+
+  const [radius, setRadius] = useState(25);
+
   function changeRadius(value: number) {
+    const r = getRadiusFromValue(value);
     setRadius(value);
-    setTheme([{ key: 'radius', value: value.toString() }]);
+
+    setTheme([{ key: 'radius', value: r.toString() }]);
   }
 
   return (
@@ -163,7 +163,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
             </Table.Td>
             <Table.Td>
               <Slider
-                label={(val) => getMark(val).label}
+                label={(val) => getRadiusFromValue(val)}
                 defaultValue={50}
                 step={25}
                 marks={SizeMarks}