diff --git a/src/components/enum-select.tsx b/src/components/enum-select.tsx
index 26cba22..2ecff27 100644
--- a/src/components/enum-select.tsx
+++ b/src/components/enum-select.tsx
@@ -1,9 +1,9 @@
 import { } from 'react'
 
-export function EnumSelect({ name, entries, value }: { name: string; entries: Record<string, string>, value?: string }): JSX.Element {
+export function EnumSelect({ name, entries, defaultValue }: { name: string; entries: Record<string, string>, defaultValue?: string }): JSX.Element {
   return (
-    <select id={name} name={name}>
-      {Object.entries(entries).map(([v, name]) => <option key={v} value={v} selected={v == value}>{name}</option>)}
+    <select id={name} name={name} defaultValue={defaultValue}>
+      {Object.entries(entries).map(([v, name]) => <option key={v} value={v}>{name}</option>)}
     </select>
   );
 }
diff --git a/src/components/task-row.tsx b/src/components/task-row.tsx
index d220a91..0106306 100644
--- a/src/components/task-row.tsx
+++ b/src/components/task-row.tsx
@@ -2,43 +2,53 @@ import { useState } from 'react'
 import { taskTypes, taskStatuses } from './consts';
 import { EnumSelect } from './enum-select';
 
-export function TaskRow({ task, updateTask }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
+export function TaskRow({ task }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element {
   const [edit, setEdit] = useState(false);
 
-  return edit ? (
-    <tr key={task.id}>
-      <td>{<EnumSelect entries={taskTypes} name="type" value={task.type} />}</td>
-      <td><input type="text" name="title" value={task.title} /></td>
-      <td>{<EnumSelect entries={taskStatuses} name="status" value={task.status} />}</td>
-      <td className="text-center">
-        <button className="mr-3" onClick={() => {
-          //updateTask()
-          setEdit(false)
-        }}>
-          <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
-            <polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "></polygon>
-          </svg>
-        </button>
-        <button onClick={() => setEdit(false)}>
-          <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
-            <polygon points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490 489.292,457.678 277.331,245.004 489.292,32.337 ">
-            </polygon>
-          </svg>
-        </button>
-      </td>
-    </tr>
-  ) : (
-    <tr key={task.id}>
-      <td>{taskTypes[task.type]}</td>
-      <td>{task.title}</td>
-      <td>{taskStatuses[task.status]}</td>
-      <td>
-        <button onClick={() => setEdit(true)}>
-          <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-            <path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path>
-          </svg>
-        </button>
-      </td>
-    </tr>
-  )
+  return (
+    <div className="tr">
+      <div className="td">
+        {edit
+          ? <EnumSelect entries={taskTypes} name="type" defaultValue={task.type} />
+          : taskTypes[task.type]
+        }
+      </div>
+      <div className="td">
+        {edit
+          ? <input type="text" name="title" defaultValue={task.title} />
+          : task.title}
+      </div>
+      <div className="td">
+        {edit
+          ? <EnumSelect entries={taskStatuses} name="status" defaultValue={task.status} />
+          : taskStatuses[task.status]
+        }
+      </div>
+      <div className="td">
+        {edit ? <>
+          <button className="mr-3" onClick={() => {
+            //updateTask()
+            setEdit(false)
+          }}>
+            <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
+              <polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "></polygon>
+            </svg>
+          </button>
+          <button onClick={() => setEdit(false)}>
+            <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 490">
+              <polygon points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490 489.292,457.678 277.331,245.004 489.292,32.337 ">
+              </polygon>
+            </svg>
+          </button>
+        </> : <>
+          <button onClick={() => setEdit(true)}>
+            <svg className="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+              <path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path>
+            </svg>
+          </button>
+        </>
+        }
+      </div>
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/components/task-table.tsx b/src/components/task-table.tsx
index 7eb4625..fdf3db5 100644
--- a/src/components/task-table.tsx
+++ b/src/components/task-table.tsx
@@ -3,19 +3,15 @@ import { TaskRow } from './task-row';
 
 export function TaskTable({ tasks }: { tasks: TodoTasks }): JSX.Element {
   return (
-    <table className="w-full">
-      <thead>
-        <tr>
-          <th>Tipas</th>
-          <th>Pavadinimas</th>
-          <th>Statusas</th>
-          <th>Veiksmai</th>
-        </tr>
-      </thead>
-      <tbody>
-        {tasks.map(task => <TaskRow task={task} updateTask={() => { }} />)}
-      </tbody>
-    </table>
+    <div className="w-full">
+      <div className="tr">
+        <div className="td">Tipas</div>
+        <div className="td">Pavadinimas</div>
+        <div className="td">Statusas</div>
+        <div className="td">Veiksmai</div>
+      </div>
+      {tasks.map(task => <TaskRow key={task.id} task={task} updateTask={() => { }} />)}
+    </div>
   );
 }
 
diff --git a/src/index.css b/src/index.css
index c116d68..bcd754c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @layer utilities {
+
   p,
   li {
     @apply my-4;
@@ -12,15 +13,44 @@
     @apply bg-neutral-100 dark:bg-neutral-900 cursor-pointer px-5 py-2 rounded-lg border border-gray-300 hover:border-indigo-500 transition-colors duration-700;
   }
 
-  th {
-    @apply border-b dark:border-slate-600 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left;
+  .tr {
+    @apply flex border-b pb-3 border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400;
+
+    .td {
+      @apply pl-4 pt-4 content-center;
+    }
+
+    .td:nth-child(1) {
+      @apply flex-auto w-32;
+    }
+
+    .td:nth-child(2) {
+      @apply flex-auto w-64;
+    }
+
+    .td:nth-child(3) {
+      @apply flex-auto w-32;
+    }
+
+    .td:nth-child(4) {
+      @apply flex-auto w-16 flex justify-center;
+    }
   }
 
-  td {
-    @apply border-b border-slate-100 dark:border-slate-700 p-4 pr-0 text-slate-500 dark:text-slate-400;
+  .tr:first-child {
+    @apply dark:border-slate-600 text-slate-400 dark:text-slate-200;
+
+    .td {
+      @apply pt-0;
+    }
   }
 
-  select, input {
+  .tr:last-child {
+    @apply pb-0 border-b-0;
+  }
+
+  select,
+  input {
     @apply h-14 w-full rounded-lg border-0 px-3 py-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700;
   }
 
@@ -32,7 +62,8 @@
     @apply rounded-t-xl;
   }
 
-  .accordion-title:last-child, .accordion-body:last-child {
+  .accordion-title:last-child,
+  .accordion-body:last-child {
     @apply border-b rounded-b-xl;
   }