diff --git a/assets/pasted-20251217-183332-881a1466.jpg b/assets/pasted-20251217-183332-881a1466.jpg
new file mode 100644
index 0000000..51fde12
Binary files /dev/null and b/assets/pasted-20251217-183332-881a1466.jpg differ
diff --git a/core/templates/base.html b/core/templates/base.html
index f8c91ef..eaa5ae1 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
+  <title>{% block title %}webFirma{% endblock %}</title>
   {% if project_description %}
   <meta name="description" content="{{ project_description }}">
   <meta property="og:description" content="{{ project_description }}">
@@ -15,14 +15,36 @@
   {% endif %}
   {% load static %}
   <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+  <script src="https://unpkg.com/feather-icons"></script>
   {% block head %}{% endblock %}
 </head>
 
 <body>
-  {% block content %}{% endblock %}
+  <div class="app-layout">
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h2>webFirma</h2>
+      </div>
+      <nav class="sidebar-nav">
+        <ul>
+          <li class="active"><a href="#"><i data-feather="home"></i> Dashboard</a></li>
+          <li><a href="#"><i data-feather="briefcase"></i> Projects</a></li>
+          <li><a href="#"><i data-feather="file-text"></i> Invoices</a></li>
+          <li><a href="#"><i data-feather="users"></i> Clients</a></li>
+          <li><a href="#"><i data-feather="settings"></i> Settings</a></li>
+        </ul>
+      </nav>
+    </div>
+    <div class="main-content">
+      {% block content %}{% endblock %}
+    </div>
+  </div>
+  <script>
+    feather.replace()
+  </script>
 </body>
 
 </html>
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 0695ca6..b778504 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -1,58 +1,55 @@
 {% extends 'base.html' %}
 {% load static %}
 
-{% block title %}Pulpit - webFirma{% endblock %}
+{% block title %}Dashboard - webFirma{% endblock %}
 
 {% block content %}
-<header class="hero-section text-white text-center">
-    <div class="container">
-        <h1 class="display-4">Witaj w webFirma</h1>
-        <p class="lead">Kompleksowe zarządzanie firmą w jednym miejscu.</p>
+<div class="main-header">
+  <h1>Dashboard</h1>
+  <div class="header-actions">
+    <div class="search-bar">
+        <i data-feather="search"></i>
+        <input type="text" placeholder="Search projects...">
     </div>
-</header>
+    <a href="{% url 'add_project' %}" class="btn btn-primary"><i data-feather="plus"></i> Dodaj projekt</a>
+  </div>
+</div>
 
-<div class="container mt-5">
-    <section id="projects">
-        <div class="d-flex justify-content-between align-items-center mb-4">
-            <h2 class="section-title">Projekty</h2>
-            <a href="{% url 'add_project' %}" class="btn btn-primary">Dodaj projekt</a>
-        </div>
-
-        <div class="card shadow-sm">
-            <div class="card-body">
-                {% if projects %}
-                    <div class="table-responsive">
-                        <table class="table table-hover align-middle">
-                            <thead class="table-light">
-                                <tr>
-                                    <th scope="col">Nazwa projektu</th>
-                                    <th scope="col">Kontrahent</th>
-                                    <th scope="col">Data rozpoczęcia</th>
-                                    <th scope="col">Data zakończenia</th>
-                                    <th scope="col">Status</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for project in projects %}
-                                <tr>
-                                    <td>{{ project.name }}</td>
-                                    <td>{{ project.client }}</td>
-                                    <td>{{ project.start_date|date:"Y-m-d" }}</td>
-                                    <td>{{ project.end_date|date:"Y-m-d" }}</td>
-                                    <td><span class="badge bg-primary-soft">{{ project.get_status_display }}</span></td>
-                                </tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
+<div class="content-grid">
+    {% if projects %}
+        {% for project in projects %}
+            <div class="project-card">
+                <div class="card-header">
+                    <h3>{{ project.name }}</h3>
+                    <span class="badge status-{{ project.status|lower }}">{{ project.get_status_display }}</span>
+                </div>
+                <div class="card-body">
+                    <p><strong>Klient:</strong> {{ project.client }}</p>
+                    <p><strong>Okres:</strong> {{ project.start_date|date:"d M Y" }} - {{ project.end_date|date:"d M Y" }}</p>
+                </div>
+                <div class="card-footer">
+                    <div class="participants">
+                        <span>Uczestnicy</span>
+                        <div class="avatars">
+                            <!-- Placeholder avatars -->
+                            <img src="https://i.pravatar.cc/32?u=a" alt="Avatar">
+                            <img src="https://i.pravatar.cc/32?u=b" alt="Avatar">
+                            <img src="https://i.pravatar.cc/32?u=c" alt="Avatar">
+                        </div>
                     </div>
-                {% else %}
-                    <div class="text-center p-4">
-                        <p class="mb-3">Brak projektów do wyświetlenia.</p>
-                        <p>Utwórz swój pierwszy projekt, aby zacząć zarządzać pracą.</p>
-                    </div>
-                {% endif %}
+                    <a href="#" class="btn-view">Zobacz projekt</a>
+                </div>
             </div>
+        {% endfor %}
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-state-icon">
+            <i data-feather="briefcase"></i>
         </div>
-    </section>
+        <h2>Brak projektów</h2>
+        <p>Nie masz jeszcze żadnych projektów. Dodaj swój pierwszy projekt, aby rozpocząć.</p>
+        <a href="{% url 'add_project' %}" class="btn btn-primary">Dodaj projekt</a>
+    </div>
+    {% endif %}
 </div>
 {% endblock %}
diff --git a/static/css/custom.css b/static/css/custom.css
index 5846dab..0bb9cc6 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,66 +1,254 @@
 :root {
-    --bs-primary: #1A237E;
-    --bs-secondary: #6c757d;
-    --bs-success: #198754;
-    --bs-info: #0dcaf0;
-    --bs-warning: #ffc107;
-    --bs-danger: #dc3545;
-    --bs-light: #F5F5F5;
-    --bs-dark: #212121;
-    --bs-primary-rgb: 26, 35, 126;
-    --bs-font-sans-serif: 'Lato', sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
+    --primary-color: #2962FF;
+    --primary-dark: #1A237E;
+    --light-grey: #F7F8FC;
+    --medium-grey: #E8E9EC;
+    --dark-grey: #6C757D;
+    --text-color: #212121;
+    --white-color: #FFFFFF;
+    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    --border-radius: 8px;
 }
 
 body {
-    background-color: var(--bs-light);
-    color: var(--bs-dark);
+    font-family: 'Inter', sans-serif;
+    background-color: var(--light-grey);
+    color: var(--text-color);
+    margin: 0;
+    font-size: 14px;
 }
 
-.hero-section {
-    background: linear-gradient(to right, #1A237E, #2962FF);
-    padding: 4rem 0;
-    margin-bottom: -1px; /* Overlap to avoid gap */
+.app-layout {
+    display: flex;
 }
 
-.section-title {
-    color: var(--bs-primary);
+/* Sidebar */
+.sidebar {
+    width: 240px;
+    background-color: var(--white-color);
+    height: 100vh;
+    padding: 24px;
+    border-right: 1px solid var(--medium-grey);
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-header h2 {
     font-weight: 700;
+    color: var(--primary-dark);
+    margin: 0 0 40px 0;
+    font-size: 24px;
+}
+
+.sidebar-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-nav li a {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    text-decoration: none;
+    color: var(--dark-grey);
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-nav li.active a, .sidebar-nav li a:hover {
+    background-color: var(--primary-color);
+    color: var(--white-color);
+}
+
+.sidebar-nav li a svg {
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 32px 48px;
+    overflow-y: auto;
+}
+
+.main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+}
+
+.main-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--primary-dark);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    padding: 8px 12px;
+    border: 1px solid var(--medium-grey);
+}
+
+.search-bar svg {
+    color: var(--dark-grey);
+    width: 18px;
+}
+
+.search-bar input {
+    border: none;
+    outline: none;
+    margin-left: 8px;
+    font-size: 14px;
+    background: transparent;
 }
 
 .btn-primary {
-    background-color: #2962FF;
-    border-color: #2962FF;
-    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    background-color: var(--primary-color);
+    color: var(--white-color);
+    padding: 10px 16px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 
 .btn-primary:hover {
-    background-color: #1A237E;
-    border-color: #1A237E;
+    background-color: var(--primary-dark);
 }
 
-.card {
-    border: none;
+/* Project Cards */
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
 }
 
-.card-header.bg-primary {
-     background-color: var(--bs-primary) !important;
+.project-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.table {
-    margin-bottom: 0;
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
 }
 
-.table th {
+.card-header {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--medium-grey);
+}
+
+.card-header h3 {
+    margin: 0;
+    font-size: 16px;
     font-weight: 600;
-    color: var(--bs-dark);
 }
 
-.badge.bg-primary-soft {
-    color: var(--bs-primary);
-    background-color: rgba(var(--bs-primary-rgb), 0.1);
+.card-body {
+    padding: 16px;
+    flex-grow: 1;
+}
+
+.card-body p {
+    margin: 0 0 8px 0;
+}
+
+.card-footer {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--light-grey);
+}
+
+.participants .avatars {
+    display: flex;
+    margin-top: 4px;
+}
+
+.participants .avatars img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--white-color);
+    margin-left: -8px;
+}
+
+.btn-view {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+/* Badges */
+.badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.badge.status-planowane {
+    background-color: #E3F2FD; color: #1565C0;
+}
+.badge.status-w toku {
+    background-color: #FFF3E0; color: #EF6C00;
+}
+.badge.status-ukończone {
+    background-color: #E8F5E9; color: #2E7D32;
+}
+
+/* Empty State */
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 48px;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+}
+
+.empty-state-icon {
+    margin-bottom: 16px;
+    color: var(--primary-color);
+}
+.empty-state-icon svg {
+    width: 48px;
+    height: 48px;
+}
+
+.empty-state h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    color: var(--dark-grey);
+    margin-bottom: 24px;
 }
\ No newline at end of file
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 5846dab..0bb9cc6 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,66 +1,254 @@
 :root {
-    --bs-primary: #1A237E;
-    --bs-secondary: #6c757d;
-    --bs-success: #198754;
-    --bs-info: #0dcaf0;
-    --bs-warning: #ffc107;
-    --bs-danger: #dc3545;
-    --bs-light: #F5F5F5;
-    --bs-dark: #212121;
-    --bs-primary-rgb: 26, 35, 126;
-    --bs-font-sans-serif: 'Lato', sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
+    --primary-color: #2962FF;
+    --primary-dark: #1A237E;
+    --light-grey: #F7F8FC;
+    --medium-grey: #E8E9EC;
+    --dark-grey: #6C757D;
+    --text-color: #212121;
+    --white-color: #FFFFFF;
+    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    --border-radius: 8px;
 }
 
 body {
-    background-color: var(--bs-light);
-    color: var(--bs-dark);
+    font-family: 'Inter', sans-serif;
+    background-color: var(--light-grey);
+    color: var(--text-color);
+    margin: 0;
+    font-size: 14px;
 }
 
-.hero-section {
-    background: linear-gradient(to right, #1A237E, #2962FF);
-    padding: 4rem 0;
-    margin-bottom: -1px; /* Overlap to avoid gap */
+.app-layout {
+    display: flex;
 }
 
-.section-title {
-    color: var(--bs-primary);
+/* Sidebar */
+.sidebar {
+    width: 240px;
+    background-color: var(--white-color);
+    height: 100vh;
+    padding: 24px;
+    border-right: 1px solid var(--medium-grey);
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-header h2 {
     font-weight: 700;
+    color: var(--primary-dark);
+    margin: 0 0 40px 0;
+    font-size: 24px;
+}
+
+.sidebar-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-nav li a {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    text-decoration: none;
+    color: var(--dark-grey);
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-nav li.active a, .sidebar-nav li a:hover {
+    background-color: var(--primary-color);
+    color: var(--white-color);
+}
+
+.sidebar-nav li a svg {
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 32px 48px;
+    overflow-y: auto;
+}
+
+.main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+}
+
+.main-header h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--primary-dark);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    padding: 8px 12px;
+    border: 1px solid var(--medium-grey);
+}
+
+.search-bar svg {
+    color: var(--dark-grey);
+    width: 18px;
+}
+
+.search-bar input {
+    border: none;
+    outline: none;
+    margin-left: 8px;
+    font-size: 14px;
+    background: transparent;
 }
 
 .btn-primary {
-    background-color: #2962FF;
-    border-color: #2962FF;
-    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    background-color: var(--primary-color);
+    color: var(--white-color);
+    padding: 10px 16px;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 
 .btn-primary:hover {
-    background-color: #1A237E;
-    border-color: #1A237E;
+    background-color: var(--primary-dark);
 }
 
-.card {
-    border: none;
+/* Project Cards */
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
 }
 
-.card-header.bg-primary {
-     background-color: var(--bs-primary) !important;
+.project-card {
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.table {
-    margin-bottom: 0;
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
 }
 
-.table th {
+.card-header {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--medium-grey);
+}
+
+.card-header h3 {
+    margin: 0;
+    font-size: 16px;
     font-weight: 600;
-    color: var(--bs-dark);
 }
 
-.badge.bg-primary-soft {
-    color: var(--bs-primary);
-    background-color: rgba(var(--bs-primary-rgb), 0.1);
+.card-body {
+    padding: 16px;
+    flex-grow: 1;
+}
+
+.card-body p {
+    margin: 0 0 8px 0;
+}
+
+.card-footer {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--light-grey);
+}
+
+.participants .avatars {
+    display: flex;
+    margin-top: 4px;
+}
+
+.participants .avatars img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--white-color);
+    margin-left: -8px;
+}
+
+.btn-view {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+/* Badges */
+.badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.badge.status-planowane {
+    background-color: #E3F2FD; color: #1565C0;
+}
+.badge.status-w toku {
+    background-color: #FFF3E0; color: #EF6C00;
+}
+.badge.status-ukończone {
+    background-color: #E8F5E9; color: #2E7D32;
+}
+
+/* Empty State */
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 48px;
+    background-color: var(--white-color);
+    border-radius: var(--border-radius);
+}
+
+.empty-state-icon {
+    margin-bottom: 16px;
+    color: var(--primary-color);
+}
+.empty-state-icon svg {
+    width: 48px;
+    height: 48px;
+}
+
+.empty-state h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    color: var(--dark-grey);
+    margin-bottom: 24px;
 }
\ No newline at end of file
diff --git a/staticfiles/pasted-20251217-183332-881a1466.jpg b/staticfiles/pasted-20251217-183332-881a1466.jpg
new file mode 100644
index 0000000..51fde12
Binary files /dev/null and b/staticfiles/pasted-20251217-183332-881a1466.jpg differ
diff --git a/staticfiles/vm-shot-2025-12-17T18-33-07-698Z.jpg b/staticfiles/vm-shot-2025-12-17T18-33-07-698Z.jpg
new file mode 100644
index 0000000..51fde12
Binary files /dev/null and b/staticfiles/vm-shot-2025-12-17T18-33-07-698Z.jpg differ
