diff --git a/client/package-lock.json b/client/package-lock.json
index 289c4eb..0b6abc7 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -14,6 +14,7 @@
         "axios": "^1.7.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-link-preview": "^0.1.3",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.23.1",
         "uuid": "^10.0.0"
@@ -8966,6 +8967,17 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-link-preview": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/react-link-preview/-/react-link-preview-0.1.3.tgz",
+      "integrity": "sha512-lxDUynQcuDVfqft8kqq3xuFh3U4uunsfjbNaCHPFKHM1gtwpNV94FlefF2ATFvOEZQkwbK2SO+4qbS4gmYGD2w==",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.2.0",
+        "react-dom": "^15.3.0 || ^16.2.0",
+        "react-router": "^4.1.1",
+        "react-router-dom": "^4.1.1"
+      }
+    },
     "node_modules/react-modal": {
       "version": "3.16.1",
       "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
diff --git a/client/src/components/BoardComponent.tsx b/client/src/components/BoardComponent.tsx
index 46262f3..2b51dd1 100644
--- a/client/src/components/BoardComponent.tsx
+++ b/client/src/components/BoardComponent.tsx
@@ -85,6 +85,12 @@ const BoardComponent: React.FC = () => {
       const sourceCards = filterCardsByColumn(source.droppableId);
       const destinationCards = filterCardsByColumn(destination.droppableId);
 
+      // Prevent moving any card to the position before the `newCard`
+      if (destination.droppableId === "Backlog" && destination.index === 0) {
+        console.log("Cannot move above the new card placeholder.");
+        destination.index = 1;
+      }
+
       moveCard(sourceCards, movedCard, sourceCards.length); // just call this to remove it from the source cards it automatically filters it out
       movedCard.column = columns.find(
         (col) => col.title === destination.droppableId
@@ -112,70 +118,76 @@ const BoardComponent: React.FC = () => {
           <div className="flex-grow w-full flex">
             <DragDropContext onDragEnd={onDragEnd}>
               {columns.map((col) => (
-                <Droppable key={col.key} droppableId={col.key}>
-                  {(provided, _) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.droppableProps}
-                      className="w-1/3 p-2 m-4 bg-secondaryElements rounded-md"
-                    >
-                      <h2 className="text-lg font-primary text-primaryText font-bold mb-2">
-                        {col.title}
-                      </h2>
-                      <ul>
-                        {selectedBoard!
-                          .cards!.filter((card) => card.column === col.key)
-                          .sort((a, b) => a.order - b.order)
-                          .map((card) =>
-                            card.id === "0" ? (
-                              <li
-                                key={card.id}
-                                className="bg-white p-2 mb-2 rounded shadow cursor-pointer"
-                                onClick={() => setSelectedCard(card)}
-                              >
-                                <h3 className="font-semibold">
-                                  {card.cardName}
-                                </h3>
-                                {card.details.timeEstimate &&
-                                card.details.timeEstimate > 0 ? (
-                                  <p>{card.details.timeEstimate} minutes</p>
-                                ) : (
-                                  ""
-                                )}
-                              </li>
-                            ) : (
-                              <Draggable
-                                key={card.id}
-                                draggableId={card.id.toString()}
-                                index={card.order}
-                              >
-                                {(provided, _) => (
-                                  <li
-                                    ref={provided.innerRef}
-                                    {...provided.draggableProps}
-                                    {...provided.dragHandleProps}
-                                    className="bg-white p-2 mb-2 rounded shadow"
-                                    onClick={() => setSelectedCard(card)}
-                                  >
-                                    <h3 className="font-semibold">
-                                      {card.cardName}
-                                    </h3>
-                                    {card.details.timeEstimate &&
-                                    card.details.timeEstimate > 0 ? (
-                                      <p>{card.details.timeEstimate} minutes</p>
-                                    ) : (
-                                      ""
-                                    )}
-                                  </li>
-                                )}
-                              </Draggable>
-                            )
-                          )}
-                        {provided.placeholder}
-                      </ul>
-                    </div>
-                  )}
-                </Droppable>
+                <div className="w-1/3 p-2 m-4 bg-secondaryElements rounded-md">
+                  <h2 className="text-lg font-primary text-primaryText font-bold mb-2">
+                    {col.title}
+                  </h2>
+                  <Droppable key={col.key} droppableId={col.key}>
+                    {(provided, _) => (
+                      <div
+                        ref={provided.innerRef}
+                        {...provided.droppableProps}
+                        className={`flex flex-col flex-grow min-h-[100px] ${
+                          col.title === "Backlog" ? "mt-12" : ""
+                        }`}
+                      >
+                        <ul>
+                          {selectedBoard!
+                            .cards!.filter((card) => card.column === col.key)
+                            .sort((a, b) => a.order - b.order)
+                            .map((card) =>
+                              card.id === "0" ? (
+                                <li
+                                  key={card.id}
+                                  className="bg-white p-2 mb-2 rounded shadow cursor-pointer -mt-10"
+                                  onClick={() => setSelectedCard(card)}
+                                >
+                                  <h3 className="font-semibold">
+                                    {card.cardName}
+                                  </h3>
+                                  {card.details.timeEstimate &&
+                                  card.details.timeEstimate > 0 ? (
+                                    <p>{card.details.timeEstimate} minutes</p>
+                                  ) : (
+                                    ""
+                                  )}
+                                </li>
+                              ) : (
+                                <Draggable
+                                  key={card.id}
+                                  draggableId={card.id.toString()}
+                                  index={card.order}
+                                >
+                                  {(provided, _) => (
+                                    <li
+                                      ref={provided.innerRef}
+                                      {...provided.draggableProps}
+                                      {...provided.dragHandleProps}
+                                      className="bg-white p-2 mb-2 rounded shadow"
+                                      onClick={() => setSelectedCard(card)}
+                                    >
+                                      <h3 className="font-semibold">
+                                        {card.cardName}
+                                      </h3>
+                                      {card.details.timeEstimate &&
+                                      card.details.timeEstimate > 0 ? (
+                                        <p>
+                                          {card.details.timeEstimate} minutes
+                                        </p>
+                                      ) : (
+                                        ""
+                                      )}
+                                    </li>
+                                  )}
+                                </Draggable>
+                              )
+                            )}
+                          {provided.placeholder}
+                        </ul>
+                      </div>
+                    )}
+                  </Droppable>
+                </div>
               ))}
             </DragDropContext>
           </div>
diff --git a/client/src/components/CardDetails.tsx b/client/src/components/CardDetails.tsx
index 1b203d5..236bd09 100644
--- a/client/src/components/CardDetails.tsx
+++ b/client/src/components/CardDetails.tsx
@@ -1,10 +1,11 @@
 import React, { useState, ChangeEvent } from "react";
-import { Card, ChecklistEntry, Columns } from "../types";
+import { Card, ChecklistEntry } from "../types";
 
 import useKeyPress from "../hooks/useKeyPress";
 import CreateCardComponent from "./CreateCardComponent";
 
 import { useBoard } from "../context/BoardContext";
+import CheckboxItem from "./CheckboxItem";
 
 const CardDetails: React.FC = () => {
   const { selectedCard, setSelectedCard, handleUpdateCard, handleDeleteCard } =
@@ -75,29 +76,6 @@ const CardDetails: React.FC = () => {
     setIsConfirmingDelete(false);
   };
 
-  const toggleCheck = (index: number) => {
-    if (!selectedCard || !selectedCard.details.checklist) return;
-    if (selectedCard.column !== Columns.inProgress) return;
-
-    setChecklistItems((prevItems) => {
-      const updatedChecklist = prevItems.map((item, idx) => {
-        return idx === index ? { ...item, checked: !item.checked } : item;
-      });
-
-      const newSelectedCard = {
-        ...selectedCard,
-        details: {
-          ...selectedCard.details,
-          checklist: updatedChecklist,
-        },
-      };
-
-      handleUpdateCard(newSelectedCard);
-
-      return updatedChecklist;
-    });
-  };
-
   // Use custom hook to handle ESC key
   useKeyPress("Escape", () => setSelectedCard(null));
 
@@ -113,19 +91,17 @@ const CardDetails: React.FC = () => {
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               setCardName(e.target.value)
             }
-            className="rounded mb-2 w-full text-lg font-bold bg-white"
+            className="rounded mb-2 pl-2 w-full text-lg font-bold bg-white"
           />
-          <ul>
+          <ul className="max-h-80 overflow-y-scroll">
             {checklistItems.map((item, index) => (
               <li key={index} className="flex items-center mb-2">
-                <input
-                  type="checkbox"
-                  checked={item.checked}
-                  onChange={() => toggleCheck(index)}
+                <CheckboxItem
+                  item={item}
+                  index={index}
+                  isEditing={true}
+                  setChecklistItems={setChecklistItems}
                 />
-                <label className="ml-2" onClick={() => toggleCheck(index)}>
-                  {item.value}
-                </label>
               </li>
             ))}
           </ul>
@@ -136,7 +112,7 @@ const CardDetails: React.FC = () => {
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 setNewChecklistItem(e.target.value)
               }
-              className="rounded px-2 py-1 mr-2 flex-grow"
+              className="rounded px-2 py-1 mr-2 mt-2 flex-grow"
               placeholder="Add checklist item"
             />
             <button
@@ -169,18 +145,15 @@ const CardDetails: React.FC = () => {
       ) : (
         <>
           <h2 className="text-lg font-bold mb-2">{selectedCard!.cardName}</h2>
-          <ul>
+          <ul className="max-h-64 min-h-32 overflow-y-scroll">
             {checklistItems.map((item, index) => (
               <li key={index} className="flex items-center mb-2">
-                <input
-                  type="checkbox"
-                  checked={item.checked}
-                  onChange={() => toggleCheck(index)}
-                  disabled={selectedCard!.column !== Columns.inProgress}
+                <CheckboxItem
+                  item={item}
+                  index={index}
+                  isEditing={false}
+                  setChecklistItems={setChecklistItems}
                 />
-                <label className="ml-2" onClick={() => toggleCheck(index)}>
-                  {item.value}
-                </label>
               </li>
             ))}
           </ul>
diff --git a/client/src/components/CheckboxItem.tsx b/client/src/components/CheckboxItem.tsx
new file mode 100644
index 0000000..e057524
--- /dev/null
+++ b/client/src/components/CheckboxItem.tsx
@@ -0,0 +1,241 @@
+import React, { useEffect, useState } from "react";
+import { useBoard } from "../context/BoardContext";
+import { ChecklistEntry, Columns } from "../types";
+
+interface CheckboxItemProps {
+  item: ChecklistEntry;
+  index: number;
+  setChecklistItems: (value: React.SetStateAction<ChecklistEntry[]>) => void;
+  isEditing: boolean;
+}
+
+const CheckboxItem: React.FC<CheckboxItemProps> = ({
+  item,
+  index,
+  setChecklistItems,
+  isEditing,
+}) => {
+  const { selectedCard, handleUpdateCard } = useBoard();
+  const [isEditingItem, setIsEditingItem] = useState(false);
+  const [itemText, setItemText] = useState(item.value);
+  const [needTextArea, setNeedTextArea] = useState(false);
+
+  useEffect(() => {
+    if (itemText === item.value) {
+      setIsEditingItem(false);
+    }
+    setNeedTextArea(itemText.length > 40);
+  }, [itemText]);
+
+  const toggleCheck = () => {
+    if (!selectedCard || !selectedCard.details.checklist) return;
+    if (selectedCard.column !== Columns.inProgress) return;
+
+    setChecklistItems((prevItems) => {
+      const updatedChecklist = prevItems.map((item, idx) =>
+        idx === index ? { ...item, checked: !item.checked } : item
+      );
+
+      const newSelectedCard = {
+        ...selectedCard,
+        details: {
+          ...selectedCard.details,
+          checklist: updatedChecklist,
+        },
+      };
+
+      handleUpdateCard(newSelectedCard);
+      return updatedChecklist;
+    });
+  };
+
+  const deleteItem = () => {
+    if (!selectedCard || !selectedCard.details.checklist) return;
+    if (isEditing) {
+      setChecklistItems((prevItems) => {
+        const updatedChecklist = prevItems.filter((_, idx) => idx !== index);
+
+        const newSelectedCard = {
+          ...selectedCard,
+          details: {
+            ...selectedCard.details,
+            checklist: updatedChecklist,
+          },
+        };
+
+        handleUpdateCard(newSelectedCard);
+        if (index !== updatedChecklist.length) {
+          setItemText(updatedChecklist[index].value);
+        }
+
+        return updatedChecklist;
+      });
+    }
+  };
+
+  const updateItemText = (text: string) => {
+    setItemText(text);
+    setIsEditingItem(true);
+  };
+
+  const updateItem = () => {
+    if (!selectedCard || !selectedCard.details.checklist) return;
+    if (isEditing) {
+      setChecklistItems((prevItems) => {
+        const updatedChecklist = prevItems.map((item, idx) =>
+          idx === index ? { ...item, value: itemText } : item
+        );
+
+        return updatedChecklist;
+      });
+    }
+    setIsEditingItem(false);
+  };
+
+  const renderTextWithLinks = (text: string) => {
+    const urlRegex =
+      /(\bhttps?:\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
+    return text.split(urlRegex).map((part, index) => {
+      return urlRegex.test(part) ? (
+        <a
+          href={part}
+          target="_blank"
+          rel="noopener noreferrer"
+          key={index}
+          className="text-blue-500 hover:underline"
+        >
+          {part}
+        </a>
+      ) : (
+        part
+      );
+    });
+  };
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={item.value}
+        checked={item.checked}
+        onChange={() => toggleCheck()}
+        disabled={selectedCard!.column !== Columns.inProgress}
+        className="hidden peer"
+      />
+      <label
+        htmlFor={item.value}
+        className="inline-flex items-center justify-between w-full rounded-lg cursor-pointer hover:text-gray-600"
+      >
+        <div
+          className={`w-1/12 mr-2.5 py-1 text-white rounded  ${
+            item.checked ? "bg-blue-500" : "bg-white"
+          } ${selectedCard!.column !== Columns.inProgress ? "opacity-25" : ""}`}
+        >
+          {item.checked ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="w-5 h-5 mx-auto text-white"
+            >
+              <path
+                fillRule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586 15.293 5.293a1 1 0 011.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          ) : (
+            "x"
+          )}
+        </div>
+        <>
+          {isEditing ? (
+            needTextArea ? (
+              <textarea
+                value={itemText}
+                onChange={(e) => updateItemText(e.target.value)}
+                className="w-11/12 h-24 pl-4 py-1 bg-white rounded border-2 border-gray-200 focus:border-blue-500 focus:outline-none"
+                autoFocus
+              />
+            ) : (
+              <input
+                type="text"
+                value={itemText}
+                onChange={(e) => updateItemText(e.target.value)}
+                className="w-11/12 pl-4 py-1 bg-white rounded border-2 border-gray-200 focus:border-blue-500 focus:outline-none"
+                autoFocus
+              />
+            )
+          ) : (
+            <div
+              className={`w-11/12 break-all pl-4 py-1 bg-white rounded ${
+                item.checked ? "line-through" : ""
+              }`}
+            >
+              {renderTextWithLinks(item.value)}
+            </div>
+          )}
+          {isEditing && (
+            <div>
+              {isEditingItem ? (
+                <button
+                  type="button"
+                  onClick={updateItem}
+                  className="top-0 right-0 px-1 text-xs"
+                  style={{ margin: "4px" }}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <circle cx="12" cy="12" r="10" fill="#28a745" />
+                    <path
+                      fill="#ffffff"
+                      d="M16.707 8.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L10 13.586l4.293-4.293a1 1 0 011.414 0z"
+                    />
+                  </svg>
+                  Save&nbsp;&nbsp;&nbsp;
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={deleteItem}
+                  className="top-0 right-0 px-1 text-xs"
+                  style={{ margin: "4px" }}
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle cx="12" cy="12" r="10" fill="red" />
+                    <path
+                      d="M15 9L9 15"
+                      stroke="white"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path
+                      d="M9 9L15 15"
+                      stroke="white"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  Delete
+                </button>
+              )}
+            </div>
+          )}
+        </>
+      </label>
+    </>
+  );
+};
+
+export default CheckboxItem;
diff --git a/client/src/components/CreateCardComponent.tsx b/client/src/components/CreateCardComponent.tsx
index c547f2c..f239e72 100644
--- a/client/src/components/CreateCardComponent.tsx
+++ b/client/src/components/CreateCardComponent.tsx
@@ -1,7 +1,8 @@
-import React, { useState, FormEvent, ChangeEvent } from "react";
+import React, { useState, FormEvent, ChangeEvent, useEffect } from "react";
 import { Card, Columns } from "../types";
 import { v4 as uuidv4 } from "uuid";
 import { useBoard } from "../context/BoardContext";
+import CheckboxItem from "./CheckboxItem";
 
 export type ChecklistEntry = {
   checked: boolean;
@@ -16,7 +17,8 @@ const CreateCardComponent: React.FC = () => {
   const [newChecklistItem, setNewChecklistItem] = useState("");
   // card info error handling
   const [error, setError] = useState<string | null>(null);
-  const { selectedBoard, handlePostNewCard, setSelectedCard } = useBoard();
+  const { selectedBoard, handlePostNewCard, setSelectedCard, selectedCard } =
+    useBoard();
   const handleAddChecklistItem = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
@@ -31,6 +33,10 @@ const CreateCardComponent: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    console.log({ selectedCard });
+  });
+
   const handleTimeEstimateChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setTimeEstimate(value === "" ? 0 : parseInt(value, 10));
@@ -45,6 +51,7 @@ const CreateCardComponent: React.FC = () => {
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    console.log(event);
 
     if (!cardName.trim()) {
       setError("Please name your card.");
@@ -134,28 +141,28 @@ const CreateCardComponent: React.FC = () => {
             <ul>
               {checklistItems.map((item, index) => (
                 <li key={index} className="mb-1 flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={item.checked}
-                    onChange={() => {}} // Placeholder for change handler
+                  <CheckboxItem
+                    item={item}
+                    index={index}
+                    setChecklistItems={setChecklistItems}
+                    isEditing={true}
                   />
-                  {item.value}
                 </li>
               ))}
             </ul>
-            <div className="flex">
+            <div className="flex items-center my-1">
               <input
                 type="text"
                 value={newChecklistItem}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setNewChecklistItem(e.target.value)
                 }
-                className="rounded px-2 py-1 mr-2 flex-grow"
+                className="rounded px-2 py-1 my-1 mr-2 flex-grow"
                 placeholder="Add checklist item"
               />
               <button
                 onClick={handleAddChecklistItem}
-                className="ml-2 bg-flair font-primary text-secondaryElements px-4 py-2 rounded hover:text-white"
+                className="ml-2 bg-flair font-primary text-secondaryElements px-4 py-1.5 rounded hover:text-white text-sm"
               >
                 Add
               </button>
@@ -163,13 +170,13 @@ const CreateCardComponent: React.FC = () => {
           </div>
           <button
             type="submit"
-            className=" bg-flair font-primary text-secondaryElements px-4 py-2 rounded hover:text-white"
+            className=" bg-flair font-primary text-secondaryElements px-4 py-2 rounded hover:text-white text-sm"
           >
             Create Card
           </button>
           <button
             onClick={() => setSelectedCard(null)}
-            className="bg-flair font-primary text-secondaryElements px-4 py-2 rounded hover:text-white ml-4"
+            className="bg-flair font-primary text-secondaryElements px-4 py-2 rounded hover:text-white ml-4 text-sm"
           >
             Cancel
           </button>