diff --git a/firm/src/App.js b/firm/src/App.js
index 6fd3707..92f4a53 100644
--- a/firm/src/App.js
+++ b/firm/src/App.js
@@ -47,6 +47,7 @@ const App = () => {
           )}
           <div className="w-3/4">
             <Routes>
+            <Route path="/*" element={token ? <Navigate to="/transakcje" /> : <Navigate to="/login" />} />
               <Route path="/" element={token ? <Navigate to="/transakcje" /> : <Navigate to="/login" />} />
               <Route path="/login" element={token ? <Navigate to="/transakcje" /> : <Login setToken={setToken} />} />
               <Route path="/transakcje" element={token ? <ZarzadzanieTransakcjami /> : <Navigate to="/login" />} />
diff --git a/firm/src/components/DatePicker.js b/firm/src/components/DatePicker.js
new file mode 100644
index 0000000..55f000b
--- /dev/null
+++ b/firm/src/components/DatePicker.js
@@ -0,0 +1,32 @@
+const DatePicker = ({ value, onChange, name, className, minDate, maxDate }) => {
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      const newDate = new Date(newValue);
+  
+      if (isNaN(newDate.getTime())) {
+        //alert('Podano niepoprawną datę');
+        return;
+      }
+  
+      onChange(e);
+    };
+
+    const getCurrentDate = () => {
+        const now = new Date();
+        const offset = now.getTimezoneOffset() * 60000; 
+        const localISOTime = new Date(now.getTime() - offset).toISOString().slice(0, 16);
+        return localISOTime;
+      };
+  
+    return (
+      <input
+        type="datetime-local"
+        name={name}
+        value={value || getCurrentDate()}
+        onChange={handleChange}
+        className={className}
+      />
+    );
+  };
+
+export default DatePicker;
\ No newline at end of file
diff --git a/firm/src/components/DodawanieTransakcji.js b/firm/src/components/DodawanieTransakcji.js
index 4c30d5c..c7b1176 100644
--- a/firm/src/components/DodawanieTransakcji.js
+++ b/firm/src/components/DodawanieTransakcji.js
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import Select from 'react-select';
+import {ReactComponent as MinusIcon} from "../icons/minus-icon.svg"
+import DatePicker from './DatePicker';
 
 const DodawanieTransakcji = () => {
   const [error, setError] = useState(null);
@@ -10,7 +12,7 @@ const DodawanieTransakcji = () => {
     date: '',
     employeeId: '',
     paymentType: '',
-    discount: '',
+    discount: 0,
     description: '',
     transactionProducts: [
       {
@@ -62,6 +64,7 @@ const DodawanieTransakcji = () => {
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     setNewTransaction({ ...newTransaction, [name]: value });
+    console.log(`po: ${name}, ${value}`)
   };
   const handleCancel = () => {
     navigate('/transakcje');
@@ -158,90 +161,157 @@ const DodawanieTransakcji = () => {
   return (
     <div className="bg-white p-8 rounded-lg shadow-lg max-w-4xl mx-auto mt-6">
       <h2 className="text-2xl font-bold mb-6 text-gray-800">Dodaj nową transakcję</h2>
-  
+
       {error && <p className="text-red-500 mb-4">{error}</p>}
-  
-      <input
+      <div className="mb-4 flex items-center space-x-4">
+      <div>
+        <label className="block mb-2 text-gray-700 font-medium">Data transakcji</label>
+        <DatePicker
+          value={newTransaction.date}
+          onChange={handleInputChange}
+          name="date"
+          className="flex-1 mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          maxDate="2099-12-31T23:59"
+        />
+        </div>
+      
+        <div>
+        <label className="block mb-2 text-gray-700 font-medium">Nr pracownika</label>
+          <input
+          type="number"
+          name="employeeId"
+          value={newTransaction.employeeId}
+          onChange={handleInputChange}
+          placeholder="Nr pracownika"
+          className="flex mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        </div>
+
+        
+      </div>
+
+      {/*<input
         type="datetime-local"
         name="date"
         value={newTransaction.date}
         onChange={handleInputChange}
         placeholder="Data"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-  
-      <input
-        type="number"
-        name="employeeId"
-        value={newTransaction.employeeId}
-        onChange={handleInputChange}
-        placeholder="Nr. Pracownika"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-  
-      {isLoading ? (
-        <div className="text-center">Ładowanie produktów...</div>
-      ) : (
-        <>
-          {newTransaction.transactionProducts.map((product, index) => (
-            <div key={index} className="mb-4">
-              <Select
-                name={`productName-${index}`}
-                value={products.find(option => option.value === product.productID)}
-                onChange={(selectedOption) => handleProductChange(index, selectedOption)}
-                options={products}
-                className="block w-full mb-2"
-                placeholder="Wybierz produkt..."
-              />
-              <input
-                type="number"
-                name={`quantity-${index}`}
-                value={product.quantity}
-                onChange={(e) => {
-                  const updatedTransactionProducts = [...newTransaction.transactionProducts];
-                  updatedTransactionProducts[index].quantity = e.target.value;
-                  setNewTransaction({ ...newTransaction, transactionProducts: updatedTransactionProducts });
-                }}
-                placeholder="Ilość"
-                className="block w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-              <button
+      />*/}
+      <label className="block mb-2 text-gray-700 font-medium">Produkty transakcji</label>
+      <div className="border border-gray-300 rounded-lg shadow-sm p-4 h-80 overflow-y-scroll">
+        {isLoading ? (
+          <div className="text-center">Ładowanie produktów...</div>
+        ) : (
+          <>
+            {newTransaction.transactionProducts.map((product, index) => (
+              <div key={index} className="mb-4 flex items-center space-x-4">
+                <Select
+                  name={`productName-${index}`}
+                  value={products.find(option => option.value === product.productID)}
+                  onChange={(selectedOption) => handleProductChange(index, selectedOption)}
+                  options={products}
+                  className="flex-1"
+                  placeholder="Wybierz produkt..."
+                />
+                <input
+                  type="number"
+                  name={`quantity-${index}`}
+                  value={product.quantity}
+                  onChange={(e) => {
+                    const updatedTransactionProducts = [...newTransaction.transactionProducts];
+                    updatedTransactionProducts[index].quantity = e.target.value;
+                    setNewTransaction({ ...newTransaction, transactionProducts: updatedTransactionProducts });
+                  }}
+                  placeholder="Ilość"
+                  className="w-24 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                {/*<button
                 onClick={() => handleRemoveProduct(index)}
                 className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
               >
                 Usuń
-              </button>
-            </div>
-          ))}
-        </>
-      )}
-  
-      <button
-        onClick={handleAddProduct}
-        className="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-600 hover:to-blue-800 transition mb-3"
-      >
-        Dodaj produkt
-      </button>
-  
-      <input
+              </button>*/}
+                <button
+                  onClick={handleRemoveProduct}
+                  className="relative flex items-center justify-center w-10 h-10 rounded-full text-gray-500 hover:text-red-600 hover:bg-red-100 active:bg-red-200 transition focus:outline-none"
+                >
+                  <MinusIcon className="w-5 h-5" />
+                </button>
+              </div>
+            ))}
+          </>
+        )}
+
+        <button
+          onClick={handleAddProduct}
+          className="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-600 hover:to-blue-800 transition mb-3"
+        >
+          Dodaj produkt
+        </button>
+      </div>
+      {/*<input
         type="text"
         name="paymentType"
         value={newTransaction.paymentType}
         onChange={handleInputChange}
         placeholder="Sposób płatności"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-  
-      <input
-        type="number"
-        name="discount"
-        value={newTransaction.discount}
-        onChange={handleInputChange}
-        placeholder="Rabat"
-        className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-      />
-  
-      <input
+      />*/}
+      <div className="mt-6 flex justify-between">
+        <div className="mb-4">
+          <label className="block mb-2 text-gray-700 font-medium">Metoda płatności</label>
+          <div className="flex space-x-4">
+            <label className="flex items-center">
+              <input
+                type="radio"
+                name="paymentType"
+                value="BLIK"
+                checked={newTransaction.paymentType === "BLIK"}
+                onChange={handleInputChange}
+                className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
+              />
+              <span className="ml-2">BLIK</span>
+            </label>
+            <label className="flex items-center">
+              <input
+                type="radio"
+                name="paymentType"
+                value="Gotówka"
+                checked={newTransaction.paymentType === "Gotówka"}
+                onChange={handleInputChange}
+                className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
+              />
+              <span className="ml-2">Gotówka</span>
+            </label>
+            <label className="flex items-center">
+              <input
+                type="radio"
+                name="paymentType"
+                value="Karta płatnicza"
+                checked={newTransaction.paymentType === "Karta płatnicza"}
+                onChange={handleInputChange}
+                className="form-radio h-5 w-5 text-blue-500 focus:ring-blue-500"
+              />
+              <span className="ml-2">Karta płatnicza</span>
+            </label>
+          </div>
+        </div>
+        <div className="">
+          <label className="block mb-2 text-gray-700 font-medium">Rabat</label>
+        <input
+          type="number"
+          name="discount"
+          value={newTransaction.discount}
+          onChange={handleInputChange}
+          placeholder="Rabat"
+          className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        /></div>
+        
+      </div>
+  <div>
+  <label className="block mb-2 text-gray-700 font-medium">Opis</label>      
+    <input
         type="text"
         name="description"
         value={newTransaction.description}
@@ -249,6 +319,8 @@ const DodawanieTransakcji = () => {
         placeholder="Opis"
         className="block w-full mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
+      </div>
+
   
       <div className="mt-6 flex justify-between">
         <button
diff --git a/firm/src/components/EdycjaTransakcji.js b/firm/src/components/EdycjaTransakcji.js
index eca8273..8ed9939 100644
--- a/firm/src/components/EdycjaTransakcji.js
+++ b/firm/src/components/EdycjaTransakcji.js
@@ -91,7 +91,7 @@ const EdycjaTransakcji = () => {
   };
 
   const handleCancel = () => {
-    navigate('/transkacje');
+    navigate('/transakcje');
   }
 
   const handleInputChange = (event) => {
diff --git a/firm/src/components/ListaTransakcji.js b/firm/src/components/ListaTransakcji.js
index ffdd1db..2c04d8e 100644
--- a/firm/src/components/ListaTransakcji.js
+++ b/firm/src/components/ListaTransakcji.js
@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import editIcon from '../icons/edit.png';
-import koszIcon from '../icons/kosz.png';
+//import editIcon from '../icons/edit.png';
+//import koszIcon from '../icons/kosz.png';
+import {ReactComponent as EditIcon} from '../icons/edit.svg';
+import {ReactComponent as KoszIcon} from '../icons/delete.svg';
 import { useNavigate } from 'react-router-dom';
 
+
 const ListaTransakcji = ({ onAdd}) => {
   const [transactions, setTransactions] = useState([]);
   const [deleteTransactionId, setDeleteTransactionId] = useState(null);
@@ -88,7 +91,7 @@ const ListaTransakcji = ({ onAdd}) => {
   return (
     <div>
       <div className="flex items-center justify-between py-6 px-8 bg-gradient-to-r from-blue-500 to-teal-500 rounded-xl shadow-md mb-6">
-        <h1 className="text-white text-4xl font-semibold">Lista Transakcji</h1>
+        <h1 className="text-white text-4xl font-semibold">Lista transakcji</h1>
         <button onClick={onAdd} className="bg-gradient-to-r from-green-500 to-green-700 text-white py-2 px-4 rounded-lg hover:from-green-600 hover:to-green-800 transition">
           Dodaj Transakcję
         </button>
@@ -103,14 +106,14 @@ const ListaTransakcji = ({ onAdd}) => {
                 <th className="p-3 text-left">Produkt</th>
                 <th className="p-3 text-left">Ilość</th>
                 <th className="p-3 text-left">Kwota</th>
-                <th className="p-3 text-left">Sposób płatności</th>
-                <th className="p-3 text-center">Nr. Pracownika</th>
+                <th className="p-3 text-left">Metoda płatności</th>
+                <th className="p-3 text-center">Nr pracownika</th>
                 <th className="p-3 text-center">Akcje</th>
               </tr>
             </thead>
             <tbody className="text-gray-600">
               {transactions.map(transaction => (
-                <tr key={transaction.id} className="hover:bg-gray-50 transition-colors">
+                <tr key={transaction.id} className="group hover:bg-gray-100 transition-colors">
                   <td className="p-3">{transaction.id}</td>
                   <td className="p-3">{formatDate(transaction.date)}</td>
                   <td className="p-3">
@@ -127,20 +130,22 @@ const ListaTransakcji = ({ onAdd}) => {
                   <td className="p-3">{transaction.paymentType}</td>
                   <td className="p-3 text-center">{transaction.employeeId}</td>
                   <td className="p-3 flex justify-center space-x-2">
+                  <div className="flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                     <button
                       onClick={() => handleEditTransaction(transaction.id)}
-                      className="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-600 hover:to-blue-800 transition"
+                      //className="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-600 hover:to-blue-800 transition"
+                      className="text-blue-500 hover:bg-blue-200 active:bg-blue-300 focus:outline-none p-2 rounded-full transition-colors"
                     >
-                      <img src={editIcon} alt="Edytuj" className="inline w-5 mr-2" />
-                      Edytuj
+                      <EditIcon className = "w-5 h-5"/>
                     </button>
                     <button
                       onClick={() => openDeleteConfirmation(transaction.id)}
-                      className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
+                      //className="bg-gradient-to-r from-red-500 to-red-700 text-white py-2 px-4 rounded-lg hover:from-red-600 hover:to-red-800 transition"
+                      className="text-red-500 hover:bg-red-200 active:bg-red-300 focus:outline-none p-2 rounded-full transition-colors"
                     >
-                      <img src={koszIcon} alt="Usuń" className="inline w-5 mr-2" />
-                      Usuń
+                      <KoszIcon className = "w-5 h-5"/>
                     </button>
+                    </div>
                   </td>
                 </tr>
               ))}
diff --git a/firm/src/components/NavBar.js b/firm/src/components/NavBar.js
index a602317..e8a31cf 100644
--- a/firm/src/components/NavBar.js
+++ b/firm/src/components/NavBar.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import lupaIcon from "../icons/lupa.jpg";
 import profilIcon from "../icons/profil.png";
 import axios from 'axios';
 
@@ -62,15 +61,6 @@ const Navbar = ({ setToken }) => {
       <div className="flex items-center flex-shrink-0 text-black mr-6">
         <Link to="/" className="text-2xl font-customFont font-bold tracking-wide">FIRMTRACKER</Link>
       </div>
-      <div className="relative flex justify-center w-1/3">
-        <input
-          type="text"
-          className="px-4 py-2 rounded-full border border-black focus:outline-none focus:border-indigo-500 w-full"
-        />
-        <div className="absolute right-0 top-1/2 transform -translate-y-1/2">
-          <img src={lupaIcon} alt="Lupa" className="w-8 h-8 mr-2" />
-        </div>
-      </div>
       <div className="relative flex items-center">
         <img
           src={profilIcon}
diff --git a/firm/src/icons/account.svg b/firm/src/icons/account.svg
new file mode 100644
index 0000000..782885d
--- /dev/null
+++ b/firm/src/icons/account.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
\ No newline at end of file
diff --git a/firm/src/icons/calendar.svg b/firm/src/icons/calendar.svg
new file mode 100644
index 0000000..593b173
--- /dev/null
+++ b/firm/src/icons/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
\ No newline at end of file
diff --git a/firm/src/icons/delete.svg b/firm/src/icons/delete.svg
new file mode 100644
index 0000000..9ddea3d
--- /dev/null
+++ b/firm/src/icons/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
\ No newline at end of file
diff --git a/firm/src/icons/edit.svg b/firm/src/icons/edit.svg
new file mode 100644
index 0000000..9e718ea
--- /dev/null
+++ b/firm/src/icons/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
\ No newline at end of file
diff --git a/firm/src/icons/minus-icon.svg b/firm/src/icons/minus-icon.svg
new file mode 100644
index 0000000..93729d9
--- /dev/null
+++ b/firm/src/icons/minus-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M200-440v-80h560v80H200Z"/></svg>
\ No newline at end of file
diff --git a/firm/src/icons/transaction.svg b/firm/src/icons/transaction.svg
new file mode 100644
index 0000000..797ec98
--- /dev/null
+++ b/firm/src/icons/transaction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M444-200h70v-50q50-9 86-39t36-89q0-42-24-77t-96-61q-60-20-83-35t-23-41q0-26 18.5-41t53.5-15q32 0 50 15.5t26 38.5l64-26q-11-35-40.5-61T516-710v-50h-70v50q-50 11-78 44t-28 74q0 47 27.5 76t86.5 50q63 23 87.5 41t24.5 47q0 33-23.5 48.5T486-314q-33 0-58.5-20.5T390-396l-66 26q14 48 43.5 77.5T444-252v52Zm36 120q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file