diff --git a/src/pages/Split.module.css b/src/pages/Split.module.css
index bd6afe2..d1dc8b6 100644
--- a/src/pages/Split.module.css
+++ b/src/pages/Split.module.css
@@ -15,8 +15,21 @@
   gap: 2rem;
 }
 
+.test {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  gap: 3rem;
+}
+
 .itemsContainer {
-  width: 60%;
+  width: 55%;
+  width: min(980px, 100%);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: 18px;
+  padding: 1.75rem;
+  box-shadow: 0 20px 50px rgba(140, 20, 70, 0.18);
+  backdrop-filter: blur(10px);
 }
 
 .itemsContainer button {
@@ -27,7 +40,7 @@
 }
 
 .resultsContainer {
-  width: 40%;
+  width: 45%;
   background-color: var(--primary-pink);
   min-width: 300px;
   border-radius: 1rem;
@@ -56,3 +69,28 @@
   border-top: 2px solid rgba(255, 255, 255, 0.2);
   padding-top: 0.5rem;
 }
+
+.quantity {
+  color: white;
+  background-color: var(--primary-pink);
+  padding: 0.5rem 0.8rem;
+  line-height: 0;
+  text-align: center;
+
+  border: 2px solid var(--primary-pink);
+  border-radius: 8px;
+}
+
+.assignButton {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.nameAndPrice {
+  border: 1px solid rgba(240, 180, 205, 0.65);
+  border-radius: 8px;
+  padding: 0.3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/pages/Split.tsx b/src/pages/Split.tsx
index f72e868..fd1c134 100644
--- a/src/pages/Split.tsx
+++ b/src/pages/Split.tsx
@@ -75,66 +75,73 @@ const Split = () => {
     <>
       <div className={isMobile ? styles.mobilePage : styles.desktopPage}>
         {/* Items & Assignment */}
-        <div className={styles.itemsContainer}>
-          <PeopleChips
-            people={people}
-            onAddClick={() => setShowAddPersonModal(true)}
-            onRemovePerson={removePerson}
-          />
-
-          {/* Items table */}
-          <table>
-            {items.map((item) => (
-              <tr key={item.id}>
-                <td>{item.quantity}</td>
-                <td>{item.name}</td>
-                <td>${item.price.toFixed(2)}</td>
-                <td>
-                  <button
-                    className="pinkButton"
-                    onClick={() => openAssignModal(item)}
-                  >
-                    {itemAssignments[item.id]?.length > 0
-                      ? `Assigned (${itemAssignments[item.id].length})`
-                      : "Assign"}
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </table>
-
-          {/* Modals */}
-          <AddPersonModal
-            show={showAddPersonModal}
-            onClose={() => setShowAddPersonModal(false)}
-            onSubmit={(name, color) => addPerson(name, color)}
-          />
-          <AssignItemModal
-            show={itemBeingAssigned !== null}
-            item={itemBeingAssigned}
-            people={people}
-            currentAssignees={
-              itemBeingAssigned
-                ? itemAssignments[itemBeingAssigned.id] || []
-                : []
-            }
-            onClose={closeAssignModal}
-            onSave={saveAssignment}
-          />
-        </div>
-
-        {/* Results */}
-        <div className={styles.resultsContainer}>
-          <div className={styles.resultsHeader}>Results</div>
-          <table>
-            {people.map((person) => (
-              <tr key={person.id}>
-                <td>{person.name}:</td>
-                <td>${personTotals[person.id]?.toFixed(2) || "0.00"}</td>
-              </tr>
-            ))}
-          </table>
-          <div className={styles.total}>Total: ${grandTotal.toFixed(2)}</div>
+        <div className={styles.test}>
+          <div className={styles.itemsContainer}>
+            <PeopleChips
+              people={people}
+              onAddClick={() => setShowAddPersonModal(true)}
+              onRemovePerson={removePerson}
+            />
+
+            {/* Items table */}
+            <table>
+              {items.map((item) => (
+                <tr key={item.id}>
+                  <td>
+                    <span className={styles.quantity}>{item.quantity}</span>
+                  </td>
+                  <td style={{ width: "80%" }}>
+                    <div className={styles.nameAndPrice}>
+                      <span>{item.name}</span>${item.price.toFixed(2)}
+                    </div>
+                  </td>
+                  <td className="text-end">
+                    <button
+                      className={`pinkButton ${styles.assignButton}`}
+                      onClick={() => openAssignModal(item)}
+                    >
+                      {itemAssignments[item.id]?.length > 0
+                        ? `Assigned (${itemAssignments[item.id].length})`
+                        : "Assign"}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </table>
+
+            {/* Modals */}
+            <AddPersonModal
+              show={showAddPersonModal}
+              onClose={() => setShowAddPersonModal(false)}
+              onSubmit={(name, color) => addPerson(name, color)}
+            />
+            <AssignItemModal
+              show={itemBeingAssigned !== null}
+              item={itemBeingAssigned}
+              people={people}
+              currentAssignees={
+                itemBeingAssigned
+                  ? itemAssignments[itemBeingAssigned.id] || []
+                  : []
+              }
+              onClose={closeAssignModal}
+              onSave={saveAssignment}
+            />
+          </div>
+
+          {/* Results */}
+          <div className={styles.resultsContainer}>
+            <div className={styles.resultsHeader}>Results</div>
+            <table>
+              {people.map((person) => (
+                <tr key={person.id}>
+                  <td>{person.name}:</td>
+                  <td>${personTotals[person.id]?.toFixed(2) || "0.00"}</td>
+                </tr>
+              ))}
+            </table>
+            <div className={styles.total}>Total: ${grandTotal.toFixed(2)}</div>
+          </div>
         </div>
       </div>
     </>