diff --git a/packages/ui/src/components/databases/boards/board-view-columns-collaborator.tsx b/packages/ui/src/components/databases/boards/board-view-columns-collaborator.tsx
index 41350e9f..e6cd475e 100644
--- a/packages/ui/src/components/databases/boards/board-view-columns-collaborator.tsx
+++ b/packages/ui/src/components/databases/boards/board-view-columns-collaborator.tsx
@@ -4,7 +4,6 @@ import { toast } from 'sonner';
 import {
   CollaboratorFieldAttributes,
   DatabaseViewFilterAttributes,
-  FieldValue,
 } from '@brainbox/core';
 import { Avatar } from '@brainbox/ui/components/avatars/avatar';
 import { BoardViewColumn } from '@brainbox/ui/components/databases/boards/board-view-column';
@@ -103,28 +102,13 @@ export const BoardViewColumnsCollaborator = ({
                     return;
                   }
 
-                  let newValue: FieldValue = value;
-                  const currentValue = record.fields[field.id];
-                  if (currentValue && currentValue.type === 'string_array') {
-                    const newOptions = [
-                      ...currentValue.value.filter(
-                        (collaboratorId) =>
-                          collaboratorId !== collaborator.value
-                      ),
-                      ...newValue.value,
-                    ];
-
-                    newValue = {
-                      type: 'string_array',
-                      value: newOptions,
-                    };
-                  }
-
+                  // For board view, REPLACE the value entirely (move to new column)
+                  // Don't merge - dropping on a column means "assign to this collaborator"
                   const result = await window.brainbox.executeMutation({
                     type: 'record.field.value.set',
                     recordId: record.id,
                     fieldId: field.id,
-                    value: newValue,
+                    value: value,
                     accountId: workspace.accountId,
                     workspaceId: workspace.id,
                   });
@@ -162,31 +146,17 @@ export const BoardViewColumnsCollaborator = ({
               return;
             }
 
-            if (!value) {
-              const result = await window.brainbox.executeMutation({
-                type: 'record.field.value.delete',
-                recordId: record.id,
-                fieldId: field.id,
-                accountId: workspace.accountId,
-                workspaceId: workspace.id,
-              });
-
-              if (!result.success) {
-                toast.error(result.error.message);
-              }
-            } else {
-              const result = await window.brainbox.executeMutation({
-                type: 'record.field.value.set',
-                recordId: record.id,
-                fieldId: field.id,
-                value,
-                accountId: workspace.accountId,
-                workspaceId: workspace.id,
-              });
-
-              if (!result.success) {
-                toast.error(result.error.message);
-              }
+            // "No Value" column always clears the field
+            const result = await window.brainbox.executeMutation({
+              type: 'record.field.value.delete',
+              recordId: record.id,
+              fieldId: field.id,
+              accountId: workspace.accountId,
+              workspaceId: workspace.id,
+            });
+
+            if (!result.success) {
+              toast.error(result.error.message);
             }
           },
         }}
diff --git a/packages/ui/src/components/databases/boards/board-view-columns-multi-select.tsx b/packages/ui/src/components/databases/boards/board-view-columns-multi-select.tsx
index b1c37857..29c7007b 100644
--- a/packages/ui/src/components/databases/boards/board-view-columns-multi-select.tsx
+++ b/packages/ui/src/components/databases/boards/board-view-columns-multi-select.tsx
@@ -3,7 +3,6 @@ import { toast } from 'sonner';
 
 import {
   DatabaseViewFilterAttributes,
-  FieldValue,
   MultiSelectFieldAttributes,
   SelectOptionAttributes,
 } from '@brainbox/core';
@@ -113,27 +112,13 @@ export const BoardViewColumnsMultiSelect = ({
                     return;
                   }
 
-                  let newValue: FieldValue = value;
-                  const currentValue = record.fields[field.id];
-                  if (currentValue && currentValue.type === 'string_array') {
-                    const newOptions = [
-                      ...currentValue.value.filter(
-                        (optionId) => optionId !== option.id
-                      ),
-                      ...newValue.value,
-                    ];
-
-                    newValue = {
-                      type: 'string_array',
-                      value: newOptions,
-                    };
-                  }
-
+                  // For board view, REPLACE the value entirely (move to new column)
+                  // Don't merge - dropping on a column means "set to this option"
                   const result = await window.brainbox.executeMutation({
                     type: 'record.field.value.set',
                     recordId: record.id,
                     fieldId: field.id,
-                    value: newValue,
+                    value: value,
                     accountId: workspace.accountId,
                     workspaceId: workspace.id,
                   });
@@ -172,31 +157,17 @@ export const BoardViewColumnsMultiSelect = ({
               return;
             }
 
-            if (!value) {
-              const result = await window.brainbox.executeMutation({
-                type: 'record.field.value.delete',
-                recordId: record.id,
-                fieldId: field.id,
-                accountId: workspace.accountId,
-                workspaceId: workspace.id,
-              });
-
-              if (!result.success) {
-                toast.error(result.error.message);
-              }
-            } else {
-              const result = await window.brainbox.executeMutation({
-                type: 'record.field.value.set',
-                recordId: record.id,
-                fieldId: field.id,
-                value,
-                accountId: workspace.accountId,
-                workspaceId: workspace.id,
-              });
-
-              if (!result.success) {
-                toast.error(result.error.message);
-              }
+            // "No Value" column always clears the field
+            const result = await window.brainbox.executeMutation({
+              type: 'record.field.value.delete',
+              recordId: record.id,
+              fieldId: field.id,
+              accountId: workspace.accountId,
+              workspaceId: workspace.id,
+            });
+
+            if (!result.success) {
+              toast.error(result.error.message);
             }
           },
         }}
diff --git a/packages/ui/src/components/databases/boards/board-view.tsx b/packages/ui/src/components/databases/boards/board-view.tsx
index bf3ec001..6fb3b3ac 100644
--- a/packages/ui/src/components/databases/boards/board-view.tsx
+++ b/packages/ui/src/components/databases/boards/board-view.tsx
@@ -33,7 +33,7 @@ const BoardViewContent = () => {
     <Fragment>
       <div className="flex flex-row justify-between border-b">
         <ViewTabs />
-        <div className="invisible flex flex-row items-center justify-end group-hover/database:visible">
+        <div className="flex flex-row items-center justify-end gap-0.5 text-muted-foreground">
           <ViewFullscreenButton />
           <BoardViewSettings />
           <ViewSortButton />
diff --git a/packages/ui/src/components/databases/calendars/calendar-view.tsx b/packages/ui/src/components/databases/calendars/calendar-view.tsx
index b7e78657..770e5829 100644
--- a/packages/ui/src/components/databases/calendars/calendar-view.tsx
+++ b/packages/ui/src/components/databases/calendars/calendar-view.tsx
@@ -24,7 +24,7 @@ export const CalendarView = () => {
     <Fragment>
       <div className="flex flex-row justify-between border-b border-border/50 bg-background/95 backdrop-blur-sm">
         <ViewTabs />
-        <div className="flex flex-row items-center justify-end gap-0.5 opacity-0 transition-opacity duration-150 ease-out group-hover/database:opacity-100">
+        <div className="flex flex-row items-center justify-end gap-0.5 text-muted-foreground">
           {groupByField && <CalendarViewNoValueCount field={groupByField} />}
           <ViewFullscreenButton />
           <CalendarViewSettings />
diff --git a/packages/ui/src/components/databases/database-form.tsx b/packages/ui/src/components/databases/database-form.tsx
index d10bc7d9..0366702b 100644
--- a/packages/ui/src/components/databases/database-form.tsx
+++ b/packages/ui/src/components/databases/database-form.tsx
@@ -4,6 +4,8 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod/v4';
 
+import { Avatar } from '@brainbox/ui/components/avatars/avatar';
+import { AvatarPopover } from '@brainbox/ui/components/avatars/avatar-popover';
 import { Button } from '@brainbox/ui/components/ui/button';
 import {
   Form,
@@ -31,7 +33,7 @@ interface DatabaseFormProps {
 }
 
 export const DatabaseForm = ({
-  id: _id,
+  id,
   values,
   isPending,
   submitText,
@@ -44,6 +46,8 @@ export const DatabaseForm = ({
     defaultValues: values,
   });
 
+  const avatarValue = form.watch('avatar');
+
   useEffect(() => {
     if (readOnly) return;
 
@@ -54,6 +58,16 @@ export const DatabaseForm = ({
     return () => clearTimeout(timeoutId);
   }, [readOnly]);
 
+  const iconButton = (
+    <Button type="button" variant="outline" size="icon" disabled={readOnly}>
+      {avatarValue ? (
+        <Avatar id={id} avatar={avatarValue} size="small" />
+      ) : (
+        <Database className="h-4 w-4 text-muted-foreground" />
+      )}
+    </Button>
+  );
+
   return (
     <Form {...form}>
       <form
@@ -61,16 +75,24 @@ export const DatabaseForm = ({
         onSubmit={form.handleSubmit(handleSubmit)}
       >
         <div className="flex-grow flex flex-row items-end gap-2 py-2 pb-4">
-          <Button type="button" variant="outline" size="icon" disabled>
-            <Database className="h-4 w-4 text-muted-foreground" />
-          </Button>
+          {readOnly ? (
+            iconButton
+          ) : (
+            <AvatarPopover onPick={(avatar) => form.setValue('avatar', avatar)}>
+              {iconButton}
+            </AvatarPopover>
+          )}
           <FormField
             control={form.control}
             name="name"
             render={({ field }) => (
               <FormItem className="flex-1">
                 <FormControl>
-                  <Input readOnly={readOnly} placeholder="Name" {...field} />
+                  <Input
+                    readOnly={readOnly}
+                    placeholder="Database name"
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
diff --git a/packages/ui/src/components/databases/tables/table-column-drag-layer.tsx b/packages/ui/src/components/databases/tables/table-column-drag-layer.tsx
index 11e0b9d7..f6fca4db 100644
--- a/packages/ui/src/components/databases/tables/table-column-drag-layer.tsx
+++ b/packages/ui/src/components/databases/tables/table-column-drag-layer.tsx
@@ -3,7 +3,6 @@ import { useDragLayer } from 'react-dnd';
 
 import { ViewField } from '@brainbox/client/types';
 import { FieldIcon } from '@brainbox/ui/components/databases/fields/field-icon';
-import { dragPreviewStyles } from '@brainbox/ui/lib/drag-feedback';
 import { cn } from '@brainbox/ui/lib/utils';
 
 interface TableColumnDragLayerProps {
@@ -73,18 +72,20 @@ export const TableColumnDragLayer: React.FC<TableColumnDragLayerProps> = ({
       <div
         style={{
           transform: `translate(-50%, -50%)`,
-          width: `${item.width}px`,
+          width: `${Math.min(item.width, 200)}px`,
         }}
         className={cn(
-          dragPreviewStyles,
-          'flex h-8 items-center gap-2 p-2 opacity-90'
+          'flex h-8 items-center gap-2 px-3',
+          'bg-background border border-primary/50 rounded-md',
+          'shadow-lg shadow-primary/10',
+          'ring-2 ring-primary/20'
         )}
       >
         <FieldIcon
           type={item.field.type}
-          className="size-4 pointer-events-none text-fg-muted"
+          className="size-4 pointer-events-none text-primary shrink-0"
         />
-        <p className="flex-1 pointer-events-none select-none text-sm text-fg-default">
+        <p className="flex-1 pointer-events-none select-none text-sm font-medium truncate">
           {item.field.name}
         </p>
       </div>
diff --git a/packages/ui/src/components/databases/tables/table-view-empty-placeholder.tsx b/packages/ui/src/components/databases/tables/table-view-empty-placeholder.tsx
index 6b48db76..bce7a1d0 100644
--- a/packages/ui/src/components/databases/tables/table-view-empty-placeholder.tsx
+++ b/packages/ui/src/components/databases/tables/table-view-empty-placeholder.tsx
@@ -1,7 +1,36 @@
+import { Plus, Table } from 'lucide-react';
+
+import { Button } from '@brainbox/ui/components/ui/button';
+import { useDatabase } from '@brainbox/ui/contexts/database';
+import { useDatabaseView } from '@brainbox/ui/contexts/database-view';
+
 export const TableViewEmptyPlaceholder = () => {
+  const database = useDatabase();
+  const view = useDatabaseView();
+  const hasFilters = view.filters.length > 0;
+
   return (
-    <div className="flex w-full flex-col items-center justify-center border-b p-10 text-sm text-muted-foreground">
-      <p>No records</p>
+    <div className="flex w-full flex-col items-center justify-center border-b py-16 px-6 text-center">
+      <div className="flex items-center justify-center size-12 rounded-full bg-surface-muted mb-4">
+        <Table className="size-6 text-muted-foreground" />
+      </div>
+      <h3 className="text-base font-medium text-foreground">No records yet</h3>
+      <p className="mt-1.5 text-sm text-muted-foreground max-w-sm">
+        {hasFilters
+          ? 'No records match your current filters. Try adjusting or clearing filters to see more records.'
+          : 'Add your first record to start organizing your data in this database.'}
+      </p>
+      {database.canCreateRecord && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="mt-4"
+          onClick={() => view.createRecord()}
+        >
+          <Plus className="size-4 mr-1.5" />
+          Add record
+        </Button>
+      )}
     </div>
   );
 };
diff --git a/packages/ui/src/components/databases/tables/table-view-field-header.tsx b/packages/ui/src/components/databases/tables/table-view-field-header.tsx
index c9cc2088..60afc2f5 100644
--- a/packages/ui/src/components/databases/tables/table-view-field-header.tsx
+++ b/packages/ui/src/components/databases/tables/table-view-field-header.tsx
@@ -308,8 +308,8 @@ export const TableViewFieldHeader = memo(
               width: `${viewField.width}px`,
               height: '2rem',
             }}
-            minWidth={100}
-            maxWidth={500}
+            minWidth={50}
+            maxWidth={1200}
             size={{
               width: isResizing ? `${resizeWidth}px` : `${viewField.width}px`,
               height: '2rem',
@@ -380,6 +380,16 @@ export const TableViewFieldHeader = memo(
               }
             }}
           >
+            {/* Double-click target for auto-fit */}
+            {database.canEdit && (
+              <div
+                className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-20"
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  view.autoFitFieldWidth(viewField.field.id);
+                }}
+              />
+            )}
             <Popover
               modal={true}
               open={openPopover}
@@ -484,8 +494,9 @@ export const TableViewFieldHeader = memo(
                     <span
                       aria-hidden
                       className={cn(
-                        'absolute top-0 bottom-0 w-[2px] bg-primary shadow-[0_0_0_1px_theme(colors.primary/60%)]',
-                        hoverEdge === 'left' ? 'left-0' : 'right-0'
+                        'absolute top-0 bottom-0 w-1 bg-primary rounded-full',
+                        'shadow-[0_0_8px_2px_theme(colors.primary/40%)]',
+                        hoverEdge === 'left' ? '-left-0.5' : '-right-0.5'
                       )}
                       style={{ pointerEvents: 'none' }}
                     />
diff --git a/packages/ui/src/components/databases/tables/table-view-name-header.tsx b/packages/ui/src/components/databases/tables/table-view-name-header.tsx
index 6ad2d075..173f86fe 100644
--- a/packages/ui/src/components/databases/tables/table-view-name-header.tsx
+++ b/packages/ui/src/components/databases/tables/table-view-name-header.tsx
@@ -65,8 +65,8 @@ export const TableViewNameHeader = () => {
         width: `${view.nameWidth}px`,
         height: '2rem',
       }}
-      minWidth={300}
-      maxWidth={500}
+      minWidth={120}
+      maxWidth={800}
       size={{
         width: isResizing ? `${resizeWidth}px` : `${view.nameWidth}px`,
         height: '2rem',
diff --git a/packages/ui/src/components/databases/tables/table-view-settings.tsx b/packages/ui/src/components/databases/tables/table-view-settings.tsx
index fbe27d70..e9108188 100644
--- a/packages/ui/src/components/databases/tables/table-view-settings.tsx
+++ b/packages/ui/src/components/databases/tables/table-view-settings.tsx
@@ -1,4 +1,4 @@
-import { Eye, EyeOff, Trash2 } from 'lucide-react';
+import { Eye, EyeOff, Settings2, Trash2 } from 'lucide-react';
 import { Fragment, useState } from 'react';
 
 import { AvatarPopover } from '@brainbox/ui/components/avatars/avatar-popover';
@@ -13,8 +13,13 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@brainbox/ui/components/ui/popover';
-import { Separator } from '@brainbox/ui/components/ui/separator';
 import { SmartTextInput } from '@brainbox/ui/components/ui/smart-text-input';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@brainbox/ui/components/ui/tabs';
 import {
   Tooltip,
   TooltipContent,
@@ -38,133 +43,153 @@ export const TableViewSettings = () => {
         <PopoverTrigger>
           <ViewSettingsButton />
         </PopoverTrigger>
-        <PopoverContent className="mr-4 flex w-90 flex-col gap-1.5 p-2">
-          <div className="flex flex-row items-center gap-2">
-            {database.canEdit ? (
-              <AvatarPopover
-                onPick={(avatar) => {
-                  view.updateAvatar(avatar);
-                }}
+        <PopoverContent className="w-80 p-0" align="end" sideOffset={4}>
+          <Tabs defaultValue="view" className="w-full">
+            <TabsList className="w-full border-b rounded-none bg-transparent h-10">
+              <TabsTrigger
+                value="view"
+                className="flex-1 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              >
+                <Settings2 className="size-3.5 mr-1.5" />
+                View
+              </TabsTrigger>
+              <TabsTrigger
+                value="fields"
+                className="flex-1 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
               >
-                <Button type="button" variant="outline" size="icon">
-                  <ViewIcon
-                    id={view.id}
-                    name={view.name}
-                    avatar={view.avatar}
-                    layout={view.layout}
-                    className="size-4"
-                  />
-                </Button>
-              </AvatarPopover>
-            ) : (
-              <Button type="button" variant="outline" size="icon">
-                <ViewIcon
-                  id={view.id}
-                  name={view.name}
-                  avatar={view.avatar}
-                  layout={view.layout}
-                  className="size-4"
+                Fields
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="view" className="p-3 space-y-4">
+              <div className="flex flex-row items-center gap-2">
+                {database.canEdit ? (
+                  <AvatarPopover onPick={(avatar) => view.updateAvatar(avatar)}>
+                    <Button type="button" variant="outline" size="icon">
+                      <ViewIcon
+                        id={view.id}
+                        name={view.name}
+                        avatar={view.avatar}
+                        layout={view.layout}
+                        className="size-4"
+                      />
+                    </Button>
+                  </AvatarPopover>
+                ) : (
+                  <Button type="button" variant="outline" size="icon" disabled>
+                    <ViewIcon
+                      id={view.id}
+                      name={view.name}
+                      avatar={view.avatar}
+                      layout={view.layout}
+                      className="size-4"
+                    />
+                  </Button>
+                )}
+                <SmartTextInput
+                  value={view.name}
+                  readOnly={!database.canEdit}
+                  onChange={(newName) => {
+                    if (newName === view.name) return;
+                    view.rename(newName);
+                  }}
                 />
-              </Button>
-            )}
-            <SmartTextInput
-              value={view.name}
-              readOnly={!database.canEdit}
-              onChange={(newName) => {
-                if (newName === view.name) return;
+              </div>
 
-                view.rename(newName);
-              }}
-            />
-          </div>
-          <Separator />
-          <div className="flex flex-col gap-2 text-sm">
-            <p className="my-1 font-semibold">Fields</p>
-            {database.fields.map((field) => {
-              const isDisplayed =
-                view.fields.find((f) => f.field.id === field.id)?.display ??
-                false;
+              {database.canEdit && (
+                <div className="pt-2 border-t">
+                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+                    Danger zone
+                  </p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start text-destructive hover:text-destructive hover:bg-destructive/10"
+                    onClick={() => {
+                      setOpenDelete(true);
+                      setOpen(false);
+                    }}
+                  >
+                    <Trash2 className="size-4 mr-2" />
+                    Delete view
+                  </Button>
+                </div>
+              )}
+            </TabsContent>
 
-              return (
-                <div
-                  key={field.id}
-                  className={cn(
-                    'flex flex-row items-center justify-between gap-2 p-0.5',
-                    'cursor-pointer rounded-md hover:bg-surface-subtle'
-                  )}
-                >
-                  <div className="flex flex-row items-center gap-2">
-                    <FieldIcon type={field.type} className="size-4" />
-                    <div>{field.name}</div>
-                  </div>
-                  <div className="flex flex-row items-center gap-2">
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <span
-                          className={cn(
-                            database.canEdit ? 'cursor-pointer' : 'opacity-50'
-                          )}
-                          onClick={() => {
-                            if (!database.canEdit) return;
+            <TabsContent value="fields" className="p-3">
+              <div className="space-y-1">
+                {database.fields.map((field) => {
+                  const isDisplayed =
+                    view.fields.find((f) => f.field.id === field.id)?.display ??
+                    false;
 
-                            view.setFieldDisplay(field.id, !isDisplayed);
-                          }}
-                        >
-                          {isDisplayed ? (
-                            <Eye className="size-4" />
-                          ) : (
-                            <EyeOff className="size-4" />
-                          )}
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent className="flex flex-row items-center gap-2">
-                        {isDisplayed
-                          ? 'Hide field from this view'
-                          : 'Show field in this view'}
-                      </TooltipContent>
-                    </Tooltip>
-                    {database.canEdit && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Trash2
-                            className={cn(
-                              'size-4',
-                              database.canEdit ? 'cursor-pointer' : 'opacity-50'
-                            )}
-                            onClick={() => {
-                              setDeleteFieldId(field.id);
-                              setOpen(false);
-                            }}
-                          />
-                        </TooltipTrigger>
-                        <TooltipContent className="flex flex-row items-center gap-2">
-                          Delete field from database
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-          {database.canEdit && (
-            <Fragment>
-              <Separator />
-              <div className="flex flex-col gap-2 text-sm">
-                <p className="my-1 font-semibold">Settings</p>
-                <div
-                  className="flex cursor-pointer flex-row items-center gap-1 rounded-md p-0.5 hover:bg-surface-subtle"
-                  onClick={() => {
-                    setOpenDelete(true);
-                    setOpen(false);
-                  }}
-                >
-                  <Trash2 className="size-4" />
-                  <span>Delete view</span>
-                </div>
+                  return (
+                    <div
+                      key={field.id}
+                      className={cn(
+                        'flex items-center justify-between gap-2 px-2 py-1.5',
+                        'rounded-md hover:bg-surface-subtle transition-colors'
+                      )}
+                    >
+                      <div className="flex items-center gap-2 min-w-0">
+                        <FieldIcon
+                          type={field.type}
+                          className="size-4 shrink-0 text-muted-foreground"
+                        />
+                        <span className="text-sm truncate">{field.name}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 shrink-0">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              type="button"
+                              className={cn(
+                                'p-1 rounded hover:bg-surface-muted transition-colors',
+                                !database.canEdit &&
+                                  'opacity-50 cursor-not-allowed'
+                              )}
+                              onClick={() => {
+                                if (!database.canEdit) return;
+                                view.setFieldDisplay(field.id, !isDisplayed);
+                              }}
+                              disabled={!database.canEdit}
+                            >
+                              {isDisplayed ? (
+                                <Eye className="size-4 text-foreground" />
+                              ) : (
+                                <EyeOff className="size-4 text-muted-foreground" />
+                              )}
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {isDisplayed ? 'Hide from view' : 'Show in view'}
+                          </TooltipContent>
+                        </Tooltip>
+                        {database.canEdit && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <button
+                                type="button"
+                                className="p-1 rounded hover:bg-destructive/10 transition-colors"
+                                onClick={() => {
+                                  setDeleteFieldId(field.id);
+                                  setOpen(false);
+                                }}
+                              >
+                                <Trash2 className="size-4 text-muted-foreground hover:text-destructive" />
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent>Delete field</TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
               </div>
-            </Fragment>
-          )}
+            </TabsContent>
+          </Tabs>
         </PopoverContent>
       </Popover>
       {deleteFieldId && (
diff --git a/packages/ui/src/components/databases/tables/table-view.tsx b/packages/ui/src/components/databases/tables/table-view.tsx
index c86dd98f..a5d9b79f 100644
--- a/packages/ui/src/components/databases/tables/table-view.tsx
+++ b/packages/ui/src/components/databases/tables/table-view.tsx
@@ -16,7 +16,7 @@ export const TableView = () => {
     <Fragment>
       <div className="flex flex-row justify-between border-b">
         <ViewTabs />
-        <div className="invisible flex flex-row items-center justify-end group-hover/database:visible">
+        <div className="flex flex-row items-center justify-end gap-0.5 text-muted-foreground">
           <ViewFullscreenButton />
           <TableViewSettings />
           <ViewSortButton />
diff --git a/packages/ui/src/components/databases/view-create-dropdown.tsx b/packages/ui/src/components/databases/view-create-dropdown.tsx
index ef2f107d..bcb1491c 100644
--- a/packages/ui/src/components/databases/view-create-dropdown.tsx
+++ b/packages/ui/src/components/databases/view-create-dropdown.tsx
@@ -20,21 +20,9 @@ interface ViewTypeOption {
 }
 
 const viewTypes: ViewTypeOption[] = [
-  {
-    name: 'Table',
-    icon: Table,
-    type: 'table',
-  },
-  {
-    name: 'Board',
-    icon: Columns,
-    type: 'board',
-  },
-  {
-    name: 'Calendar',
-    icon: Calendar,
-    type: 'calendar',
-  },
+  { name: 'Table', icon: Table, type: 'table' },
+  { name: 'Board', icon: Columns, type: 'board' },
+  { name: 'Calendar', icon: Calendar, type: 'calendar' },
 ];
 
 export const ViewCreateDropdown = () => {
@@ -49,12 +37,10 @@ export const ViewCreateDropdown = () => {
       return;
     }
 
-    // Generate unique view name to avoid conflicts
     const baseName = `${viewType.name} view`;
     let viewName = baseName;
     let counter = 1;
 
-    // Find a unique name by appending numbers if needed
     while (views.some((view) => view.attributes.name === viewName)) {
       counter++;
       viewName = `${baseName} ${counter}`;
@@ -72,16 +58,13 @@ export const ViewCreateDropdown = () => {
       onSuccess(data) {
         setOpen(false);
 
-        // Properly coordinate view switching using mutation response
         if (
           data &&
           typeof data === 'object' &&
           'id' in data &&
           typeof data.id === 'string'
         ) {
-          // Mark this view as pending to prevent race condition resets
           setPendingViewId(data.id);
-          // Switch to the newly created view
           setActiveViewId(data.id);
         }
       },
@@ -98,25 +81,19 @@ export const ViewCreateDropdown = () => {
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <button className="mb-1 size-4 cursor-pointer text-sm text-muted-foreground hover:text-foreground transition-colors duration-150 ease-out">
+        <button className="mb-1 size-5 cursor-pointer text-muted-foreground hover:text-foreground transition-colors">
           <Plus className="size-4" />
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="z-50 w-48 overflow-y-auto rounded-lg border bg-background p-1.5 shadow-xl transition-transform duration-150 ease-out animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2 duration-200"
-        align="start"
-        side="bottom"
-      >
+      <DropdownMenuContent className="min-w-36" align="start" sideOffset={4}>
         {viewTypes.map((viewType) => (
           <DropdownMenuItem
             key={viewType.type}
-            className="group flex w-full items-center gap-2 rounded px-2 py-1 text-left transition-colors duration-150 ease-out hover:bg-surface-subtle focus:bg-surface-muted cursor-pointer"
+            className="gap-2 cursor-pointer"
             onClick={() => createView(viewType)}
           >
             <viewType.icon className="size-4 text-muted-foreground" />
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium truncate">{viewType.name}</p>
-            </div>
+            <span>{viewType.name}</span>
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>
diff --git a/packages/ui/src/components/databases/view-tab.tsx b/packages/ui/src/components/databases/view-tab.tsx
index a6b93db0..a8fdcb2d 100644
--- a/packages/ui/src/components/databases/view-tab.tsx
+++ b/packages/ui/src/components/databases/view-tab.tsx
@@ -10,14 +10,25 @@ interface ViewTabProps {
 
 export const ViewTab = ({ view, isActive, onClick }: ViewTabProps) => {
   return (
-    <div
-      role="presentation"
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isActive}
       className={cn(
-        'inline-flex cursor-pointer flex-row items-center gap-1 border-b-2 p-1 pl-0 text-sm',
-        isActive ? 'border-gray-500' : 'border-transparent'
+        'inline-flex cursor-pointer flex-row items-center gap-1.5 px-2 py-1.5 text-sm rounded-t-md transition-colors',
+        'border-b-2 -mb-px',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',
+        isActive
+          ? 'border-primary bg-background text-foreground font-medium'
+          : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-surface-subtle'
       )}
-      onClick={() => onClick()}
-      onKeyDown={() => onClick()}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick();
+        }
+      }}
     >
       <ViewIcon
         id={view.id}
@@ -26,7 +37,7 @@ export const ViewTab = ({ view, isActive, onClick }: ViewTabProps) => {
         layout={view.attributes.layout}
         className="size-4"
       />
-      {view.attributes.name}
-    </div>
+      <span className="truncate max-w-[120px]">{view.attributes.name}</span>
+    </button>
   );
 };
diff --git a/packages/ui/src/components/databases/view.tsx b/packages/ui/src/components/databases/view.tsx
index 9c681901..92102dbb 100644
--- a/packages/ui/src/components/databases/view.tsx
+++ b/packages/ui/src/components/databases/view.tsx
@@ -220,6 +220,36 @@ export const View = ({ view }: ViewProps) => {
     ]
   );
 
+  const autoFitFieldWidth = useCallback(
+    async (id: string) => {
+      if (!database.canEdit) {
+        return;
+      }
+
+      const field = database.fields.find((f) => f.id === id);
+      if (!field) {
+        return;
+      }
+
+      const cells = document.querySelectorAll(`[data-cell-field-id="${id}"]`);
+      let maxWidth = 80;
+
+      cells.forEach((cell) => {
+        const content = cell.querySelector('[data-cell-content]');
+        if (content) {
+          const contentWidth = content.scrollWidth + 32;
+          maxWidth = Math.max(maxWidth, Math.min(contentWidth, 600));
+        }
+      });
+
+      const headerWidth = field.name.length * 8 + 48;
+      maxWidth = Math.max(maxWidth, Math.min(headerWidth, 400));
+
+      await resizeField(id, maxWidth);
+    },
+    [database.canEdit, database.fields, resizeField]
+  );
+
   const resizeName = useCallback(
     async (width: number) => {
       if (!database.canEdit) {
@@ -732,6 +762,7 @@ export const View = ({ view }: ViewProps) => {
       updateAvatar,
       setFieldDisplay,
       resizeField,
+      autoFitFieldWidth,
       resizeName,
       setGroupBy,
       setSwimlaneBy,
@@ -769,6 +800,7 @@ export const View = ({ view }: ViewProps) => {
       updateAvatar,
       setFieldDisplay,
       resizeField,
+      autoFitFieldWidth,
       resizeName,
       setGroupBy,
       setSwimlaneBy,
diff --git a/packages/ui/src/contexts/database-view.ts b/packages/ui/src/contexts/database-view.ts
index 61f2adbe..8f90e393 100644
--- a/packages/ui/src/contexts/database-view.ts
+++ b/packages/ui/src/contexts/database-view.ts
@@ -25,6 +25,7 @@ interface DatabaseViewContext {
   updateAvatar: (avatar: string) => void;
   setFieldDisplay: (id: string, display: boolean) => void;
   resizeField: (id: string, width: number) => void;
+  autoFitFieldWidth: (id: string) => void;
   resizeName: (width: number) => void;
   setGroupBy: (fieldId: string | null) => void;
   setSwimlaneBy: (fieldId: string | null) => void;