diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index 361ae658c..892535717 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -266,12 +266,36 @@ const DropdownListSidebar = ({
                         value={x.id}
                         className={twMerge(
                           x.id === selectedModel?.id && 'bg-secondary',
-                          'my-0 pb-8 pt-4'
+                          'my-0 py-2'
                         )}
                       >
-                        <div className="relative flex w-full justify-between">
-                          <span className="line-clamp-1 block">{x.name}</span>
-                          <div className="absolute right-0 top-2 space-x-2">
+                        <div className="flex w-full items-center justify-between gap-x-4">
+                          <div className="max-w-[200px]">
+                            <p className="line-clamp-2">{x.name}</p>
+                            <div
+                              className={twMerge(
+                                'mt-2 inline-flex items-center space-x-2 text-muted-foreground'
+                              )}
+                            >
+                              <p className="line-clamp-2 text-xs">{x.id}</p>
+                              {clipboard.copied && copyId === x.id ? (
+                                <CheckIcon
+                                  size={16}
+                                  className="flex-shrink-0 text-green-600"
+                                />
+                              ) : (
+                                <CopyIcon
+                                  size={16}
+                                  className="z-20 flex-shrink-0 cursor-pointer"
+                                  onClick={() => {
+                                    clipboard.copy(x.id)
+                                    setCopyId(x.id)
+                                  }}
+                                />
+                              )}
+                            </div>
+                          </div>
+                          <div className="flex-shrink-0 space-x-2">
                             <span className="font-bold text-muted-foreground">
                               {toGibibytes(x.metadata.size)}
                             </span>
@@ -281,25 +305,6 @@ const DropdownListSidebar = ({
                           </div>
                         </div>
                       </SelectItem>
-                      <div
-                        className={twMerge(
-                          'absolute -mt-6 inline-flex items-center space-x-2 px-4 pb-2 text-muted-foreground'
-                        )}
-                      >
-                        <span className="text-xs">{x.id}</span>
-                        {clipboard.copied && copyId === x.id ? (
-                          <CheckIcon size={16} className="text-green-600" />
-                        ) : (
-                          <CopyIcon
-                            size={16}
-                            className="z-20 cursor-pointer"
-                            onClick={() => {
-                              clipboard.copy(x.id)
-                              setCopyId(x.id)
-                            }}
-                          />
-                        )}
-                      </div>
                     </div>
                   ))
                 )}
diff --git a/web/containers/Layout/BottomBar/SystemMonitor/TableActiveModel/index.tsx b/web/containers/Layout/BottomBar/SystemMonitor/TableActiveModel/index.tsx
index 8bcccdba2..afdb553f4 100644
--- a/web/containers/Layout/BottomBar/SystemMonitor/TableActiveModel/index.tsx
+++ b/web/containers/Layout/BottomBar/SystemMonitor/TableActiveModel/index.tsx
@@ -34,7 +34,7 @@ const TableActiveModel = () => {
                 return (
                   <th
                     key={i}
-                    className="px-6 py-2 text-left font-normal last:text-center"
+                    className="px-4 py-2 text-left font-normal last:text-center"
                   >
                     {col}
                   </th>
@@ -46,17 +46,27 @@ const TableActiveModel = () => {
             <Fragment>
               <tbody>
                 <tr>
-                  <td className="px-6 py-2 font-bold">{activeModel.name}</td>
-                  <td className="px-6 py-2 font-bold">{activeModel.id}</td>
-                  <td className="px-6 py-2">
+                  <td
+                    className="max-w-[200px] px-4 py-2 font-bold"
+                    title={activeModel.name}
+                  >
+                    <p className="line-clamp-2">{activeModel.name}</p>
+                  </td>
+                  <td
+                    className="max-w-[200px] px-4 py-2 font-bold"
+                    title={activeModel.id}
+                  >
+                    <p className="line-clamp-2">{activeModel.id}</p>
+                  </td>
+                  <td className="px-4 py-2">
                     <Badge themes="secondary">
                       {toGibibytes(activeModel.metadata.size)}
                     </Badge>
                   </td>
-                  <td className="px-6 py-2">
+                  <td className="px-4 py-2">
                     <Badge themes="secondary">v{activeModel.version}</Badge>
                   </td>
-                  <td className="px-6 py-2 text-center">
+                  <td className="px-4 py-2 text-center">
                     <Tooltip>
                       <TooltipTrigger className="w-full">
                         <Button
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 9f892bd70..8cf6420cb 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -195,7 +195,7 @@ const Advanced = () => {
         </div>
 
         {/* CPU / GPU switching */}
-        {!isMac && (
+        {isMac && (
           <div className="flex w-full flex-col items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
             <div className="flex w-full items-start justify-between">
               <div className="space-y-1.5">
@@ -223,73 +223,76 @@ const Advanced = () => {
                   for further assistance.
                 </p>
               </div>
-              {gpuList.length > 0 && !gpuEnabled && (
+
+              <div>
+                {gpuList.length > 0 && !gpuEnabled && (
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <AlertCircleIcon
+                        size={20}
+                        className="mr-2 text-yellow-600"
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent
+                      side="right"
+                      sideOffset={10}
+                      className="max-w-[240px]"
+                    >
+                      <span>
+                        Disabling NVIDIA GPU Acceleration may result in reduced
+                        performance. It is recommended to keep this enabled for
+                        optimal user experience.
+                      </span>
+                      <TooltipArrow />
+                    </TooltipContent>
+                  </Tooltip>
+                )}
+
                 <Tooltip>
                   <TooltipTrigger>
-                    <AlertCircleIcon
-                      size={20}
-                      className="mr-2 text-yellow-600"
+                    <Switch
+                      disabled={gpuList.length === 0 || vulkanEnabled}
+                      checked={gpuEnabled}
+                      onCheckedChange={(e) => {
+                        if (e === true) {
+                          saveSettings({ runMode: 'gpu' })
+                          setGpuEnabled(true)
+                          snackbar({
+                            description:
+                              'Successfully turned on GPU Acceleration',
+                            type: 'success',
+                          })
+                        } else {
+                          saveSettings({ runMode: 'cpu' })
+                          setGpuEnabled(false)
+                          snackbar({
+                            description:
+                              'Successfully turned off GPU Acceleration',
+                            type: 'success',
+                          })
+                        }
+                        // Stop any running model to apply the changes
+                        if (e !== gpuEnabled) stopModel()
+                      }}
                     />
                   </TooltipTrigger>
-                  <TooltipContent
-                    side="right"
-                    sideOffset={10}
-                    className="max-w-[240px]"
-                  >
-                    <span>
-                      Disabling NVIDIA GPU Acceleration may result in reduced
-                      performance. It is recommended to keep this enabled for
-                      optimal user experience.
-                    </span>
-                    <TooltipArrow />
-                  </TooltipContent>
+                  {gpuList.length === 0 && (
+                    <TooltipContent
+                      side="right"
+                      sideOffset={10}
+                      className="max-w-[240px]"
+                    >
+                      <span>
+                        Your current device does not have a compatible GPU for
+                        monitoring. To enable GPU monitoring, please ensure your
+                        device has a supported Nvidia or AMD GPU with updated
+                        drivers.
+                      </span>
+                      <TooltipArrow />
+                    </TooltipContent>
+                  )}
                 </Tooltip>
-              )}
-
-              <Tooltip>
-                <TooltipTrigger>
-                  <Switch
-                    disabled={gpuList.length === 0 || vulkanEnabled}
-                    checked={gpuEnabled}
-                    onCheckedChange={(e) => {
-                      if (e === true) {
-                        saveSettings({ runMode: 'gpu' })
-                        setGpuEnabled(true)
-                        snackbar({
-                          description:
-                            'Successfully turned on GPU Acceleration',
-                          type: 'success',
-                        })
-                      } else {
-                        saveSettings({ runMode: 'cpu' })
-                        setGpuEnabled(false)
-                        snackbar({
-                          description:
-                            'Successfully turned off GPU Acceleration',
-                          type: 'success',
-                        })
-                      }
-                      // Stop any running model to apply the changes
-                      if (e !== gpuEnabled) stopModel()
-                    }}
-                  />
-                </TooltipTrigger>
-                {gpuList.length === 0 && (
-                  <TooltipContent
-                    side="right"
-                    sideOffset={10}
-                    className="max-w-[240px]"
-                  >
-                    <span>
-                      Your current device does not have a compatible GPU for
-                      monitoring. To enable GPU monitoring, please ensure your
-                      device has a supported Nvidia or AMD GPU with updated
-                      drivers.
-                    </span>
-                    <TooltipArrow />
-                  </TooltipContent>
-                )}
-              </Tooltip>
+              </div>
             </div>
             <div className="mt-2 w-full rounded-lg bg-secondary p-4">
               <label className="mb-1 inline-block font-medium">
diff --git a/web/screens/Settings/Models/Row.tsx b/web/screens/Settings/Models/Row.tsx
index 1d9283efa..5da7f9177 100644
--- a/web/screens/Settings/Models/Row.tsx
+++ b/web/screens/Settings/Models/Row.tsx
@@ -63,19 +63,23 @@ export default function RowModel(props: RowModelProps) {
 
   return (
     <tr className="relative border-b border-border last:border-none">
-      <td className="px-6 py-4 font-bold">{props.data.name}</td>
-      <td className="px-6 py-4 font-bold">{props.data.id}</td>
-      <td className="px-6 py-4">
+      <td className="max-w-[200px] p-4 font-bold" title={props.data.name}>
+        <p className="line-clamp-2">{props.data.name}</p>
+      </td>
+      <td className="max-w-[200px] p-4 font-bold" title={props.data.id}>
+        <p className="line-clamp-2">{props.data.id}</p>
+      </td>
+      <td className="p-4">
         <Badge themes="secondary">
           {props.data.metadata.size
             ? toGibibytes(props.data.metadata.size)
             : '-'}
         </Badge>
       </td>
-      <td className="px-6 py-4">
+      <td className="p-4">
         <Badge themes="secondary">v{props.data.version}</Badge>
       </td>
-      <td className="px-6 py-4">
+      <td className="p-4">
         {isRemoteModel ? (
           <Badge
             themes="success"
@@ -112,7 +116,7 @@ export default function RowModel(props: RowModelProps) {
           </Badge>
         )}
       </td>
-      <td className="px-6 py-4 text-center">
+      <td className="p-4 text-center">
         {!isRemoteModel && (
           <div
             className="cursor-pointer"