diff --git a/ui/desktop/src/components/BottomMenu.tsx b/ui/desktop/src/components/BottomMenu.tsx
index c94d012e..57e3ee58 100644
--- a/ui/desktop/src/components/BottomMenu.tsx
+++ b/ui/desktop/src/components/BottomMenu.tsx
@@ -6,7 +6,6 @@ import { ModelRadioList } from './settings/models/ModelRadioList';
 import { Document, ChevronUp, ChevronDown } from './icons';
 import type { View } from '../App';
 import { BottomMenuModeSelection } from './BottomMenuModeSelection';
-import { RadioInput } from './ui/RadioInput';
 
 export default function BottomMenu({
   hasMessages,
@@ -97,14 +96,34 @@ export default function BottomMenu({
             <div className="">
               <ModelRadioList
                 className="divide-y divide-borderSubtle"
-                RenderItem={({ model, isSelected, onSelect }) => (
-                  <RadioInput
-                    label={model.alias ?? model.name}
-                    description={model.subtext ?? model.provider}
-                    value={model.name}
-                    isChecked={isSelected}
-                    onClick={onSelect}
-                  />
+                renderItem={({ model, isSelected, onSelect }) => (
+                  <label key={model.alias ?? model.name} className="block cursor-pointer">
+                    <div
+                      className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
+                      onClick={onSelect}
+                    >
+                      <div>
+                        <p className="text-sm ">{model.alias ?? model.name}</p>
+                        <p className="text-xs text-textSubtle">{model.subtext ?? model.provider}</p>
+                      </div>
+                      <div className="relative">
+                        <input
+                          type="radio"
+                          name="recentModels"
+                          value={model.name}
+                          checked={isSelected}
+                          onChange={onSelect}
+                          className="peer sr-only"
+                        />
+                        <div
+                          className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
+                          peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
+                          peer-checked:bg-white dark:peer-checked:bg-black
+                          transition-all duration-200 ease-in-out"
+                        ></div>
+                      </div>
+                    </div>
+                  </label>
                 )}
               />
               <div
diff --git a/ui/desktop/src/components/BottomMenuModeSelection.tsx b/ui/desktop/src/components/BottomMenuModeSelection.tsx
index 71c883fc..7e3557ac 100644
--- a/ui/desktop/src/components/BottomMenuModeSelection.tsx
+++ b/ui/desktop/src/components/BottomMenuModeSelection.tsx
@@ -123,7 +123,7 @@ export const BottomMenuModeSelection = () => {
       {/* Dropdown Menu */}
       {isGooseModeMenuOpen && (
         <div className="absolute bottom-[24px] right-0 w-[240px] bg-bgApp rounded-lg border border-borderSubtle">
-          <div className="divide-y divide-borderSubtle">
+          <div>
             {filterGooseModes(gooseMode, all_goose_modes, previousApproveModel).map((mode) => (
               <ModeSelectionItem
                 key={mode.key}
diff --git a/ui/desktop/src/components/settings/basic/ModeSelectionItem.tsx b/ui/desktop/src/components/settings/basic/ModeSelectionItem.tsx
index 0ffe88f6..92cacef8 100644
--- a/ui/desktop/src/components/settings/basic/ModeSelectionItem.tsx
+++ b/ui/desktop/src/components/settings/basic/ModeSelectionItem.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Gear } from '../../icons';
 import { ConfigureApproveMode } from './ConfigureApproveMode';
-import { RadioInput } from '../../ui/RadioInput';
 
 export interface GooseMode {
   key: string;
@@ -67,17 +66,6 @@ export function filterGooseModes(
   });
 }
 
-const ConfigureButton = ({ onClick }) => (
-  <button
-    onClick={(event) => {
-      event.stopPropagation();
-      onClick();
-    }}
-  >
-    <Gear className="w-5 h-5 text-textSubtle hover:text-textStandard" />
-  </button>
-);
-
 interface ModeSelectionItemProps {
   currentMode: string;
   mode: GooseMode;
@@ -100,29 +88,60 @@ export function ModeSelectionItem({
     setChecked(currentMode === mode.key);
   }, [currentMode, mode.key]);
 
-  const showConfigure =
-    !isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve');
-
   return (
     <div>
-      <RadioInput
-        label={mode.label}
-        description={showDescription ? mode.description : null}
-        Accessory={() =>
-          showConfigure ? <ConfigureButton onClick={() => setIsDislogOpen(true)} /> : null
-        }
-        isChecked={checked}
+      <div
+        className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
         onClick={() => handleModeChange(mode.key)}
-        value={mode.key}
-      />
-      <div>
-        {isDislogOpen ? (
-          <ConfigureApproveMode
-            onClose={() => setIsDislogOpen(false)}
-            handleModeChange={handleModeChange}
-            currentMode={currentMode}
+      >
+        <div>
+          <h3 className="text-sm font-semibold text-textStandard dark:text-gray-200">
+            {mode.label}
+          </h3>
+          {showDescription && (
+            <p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
+              {mode.description}
+            </p>
+          )}
+        </div>
+        <div className="relative flex items-center gap-3">
+          {!isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve') && (
+            <button
+              onClick={() => {
+                setIsDislogOpen(true);
+              }}
+            >
+              <Gear className="w-5 h-5 text-textSubtle hover:text-textStandard" />
+            </button>
+          )}
+          <input
+            type="radio"
+            name="modes"
+            value={mode.key}
+            checked={checked}
+            onChange={() => handleModeChange(mode.key)}
+            className="peer sr-only"
           />
-        ) : null}
+          <div
+            className="h-5 w-5 rounded-full border border-gray-400 dark:border-gray-500
+                  peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
+                  peer-checked:bg-white dark:peer-checked:bg-black
+                  transition-all duration-200 ease-in-out"
+          ></div>
+        </div>
+      </div>
+      <div>
+        <div>
+          {isDislogOpen ? (
+            <ConfigureApproveMode
+              onClose={() => {
+                setIsDislogOpen(false);
+              }}
+              handleModeChange={handleModeChange}
+              currentMode={currentMode}
+            />
+          ) : null}
+        </div>
       </div>
     </div>
   );
diff --git a/ui/desktop/src/components/settings/models/ModelRadioList.tsx b/ui/desktop/src/components/settings/models/ModelRadioList.tsx
index e9e084df..7fd4eac8 100644
--- a/ui/desktop/src/components/settings/models/ModelRadioList.tsx
+++ b/ui/desktop/src/components/settings/models/ModelRadioList.tsx
@@ -5,7 +5,11 @@ import { useHandleModelSelection } from './utils';
 import type { View } from '@/src/App';
 
 interface ModelRadioListProps {
-  RenderItem: React.FC<{ model: Model; isSelected: boolean; onSelect: () => void }>;
+  renderItem: (props: {
+    model: Model;
+    isSelected: boolean;
+    onSelect: () => void;
+  }) => React.ReactNode;
   className?: string;
 }
 
@@ -25,7 +29,7 @@ export function SeeMoreModelsButtons({ setView }: { setView: (view: View) => voi
   );
 }
 
-export function ModelRadioList({ RenderItem, className = '' }: ModelRadioListProps) {
+export function ModelRadioList({ renderItem, className = '' }: ModelRadioListProps) {
   const { recentModels } = useRecentModels();
   const { currentModel } = useModel();
   const handleModelSelection = useHandleModelSelection();
@@ -49,14 +53,13 @@ export function ModelRadioList({ RenderItem, className = '' }: ModelRadioListPro
 
   return (
     <div className={className}>
-      {recentModels.map((model) => (
-        <RenderItem
-          key={model.name}
-          model={model}
-          isSelected={selectedModel === model.name}
-          onSelect={() => handleRadioChange(model)}
-        />
-      ))}
+      {recentModels.map((model) =>
+        renderItem({
+          model,
+          isSelected: selectedModel === model.name,
+          onSelect: () => handleRadioChange(model),
+        })
+      )}
     </div>
   );
 }
diff --git a/ui/desktop/src/components/settings/models/RecentModels.tsx b/ui/desktop/src/components/settings/models/RecentModels.tsx
index 4df115c6..ecfb7095 100644
--- a/ui/desktop/src/components/settings/models/RecentModels.tsx
+++ b/ui/desktop/src/components/settings/models/RecentModels.tsx
@@ -137,7 +137,7 @@ export function RecentModelsRadio({ setView }: { setView: (view: View) => void }
       <div className="px-8">
         <div className="space-y-2">
           <ModelRadioList
-            RenderItem={({ model, isSelected, onSelect }) => (
+            renderItem={({ model, isSelected, onSelect }) => (
               <label key={model.name} className="flex items-center py-2 cursor-pointer">
                 <div className="relative mr-4">
                   <input
diff --git a/ui/desktop/src/components/ui/RadioInput.tsx b/ui/desktop/src/components/ui/RadioInput.tsx
deleted file mode 100644
index c7eca401..00000000
--- a/ui/desktop/src/components/ui/RadioInput.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-export interface RadioInputProps {
-  label: string;
-  description: string | null;
-  Accessory?: React.FC;
-  value: string;
-  isChecked: boolean;
-  onClick: () => void;
-}
-export const RadioInput = ({
-  label,
-  description,
-  Accessory,
-  value,
-  isChecked,
-  onClick,
-}: RadioInputProps) => {
-  return (
-    <div className="block cursor-pointer" onClick={onClick}>
-      <div
-        className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
-        onClick={onClick}
-      >
-        <div>
-          <p className="text-sm ">{label}</p>
-          <p className="text-xs text-textSubtle">{description}</p>
-        </div>
-        <div className="relative flex items-center gap-3">
-          {Accessory ? <Accessory /> : null}
-          <input
-            type="radio"
-            name="recentModels"
-            value={value}
-            checked={isChecked}
-            onChange={onClick}
-            className="peer sr-only"
-          />
-          <div
-            className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
-                          peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
-                          peer-checked:bg-white dark:peer-checked:bg-black
-                          transition-all duration-200 ease-in-out"
-          ></div>
-        </div>
-      </div>
-    </div>
-  );
-};