diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..67c0c28
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,4 @@
+FROM php:8.2-apache
+RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli
+# Enable mod_rewrite for cleaner URLs if needed, though not strictly requested, it's good practice.
+RUN a2enmod rewrite
diff --git a/assets/css/style.css b/assets/css/style.css
index 288a680..ffb6494 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,15 +1,17 @@
 :root {
-    /* Color Palette - More Vibrant */
+    /* Color Palette - Forest Theme */
     --color-primary: #2e7d32; /* Richer Green */
-    --color-primary-light: #4caf50;
+    --color-primary-light: #558b2f; /* Light Olive Green */
     --color-primary-dark: #1b5e20;
     --color-secondary: #546e7a;
-    --color-accent: #00e676; /* Pop Green */
+    --color-accent: #7cb342; /* Natural Light Green */
     --color-background: #f0f2f5;
     
+    --sidebar-bg: rgba(20, 40, 20, 0.85);
+
     /* Glassmorphism Variables - Enhanced */
-    --glass-bg: rgba(255, 255, 255, 0.75); /* More transparent */
-    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
+    --glass-bg: rgba(255, 255, 255, 0.5); /* More transparent */
+    --glass-border: 1px solid rgba(255, 255, 255, 0.4);
     --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
     --glass-blur: blur(12px); /* Stronger blur */
     
@@ -45,6 +47,7 @@ h1, h2, h3, h4, h5, h6, .navbar-brand {
     font-family: 'Poppins', sans-serif; /* Modern Headings */
     font-weight: 600;
     letter-spacing: -0.5px;
+    color: #1b5e20; /* Ensure Dark Green for headings */
 }
 
 /* Wallpaper Background with Overlay */
@@ -69,16 +72,16 @@ body::before {
 
 /* Sidebar Styling - Modern Dark Glass */
 .sidebar {
-    width: 280px;
+    width: 240px; /* Reduced from 280px */
     flex-shrink: 0;
     background: rgba(20, 40, 20, 0.85); /* Dark semi-transparent */
     backdrop-filter: blur(15px);
     border-right: 1px solid rgba(255,255,255,0.1);
     color: var(--text-light);
-    padding: 25px;
+    padding: 15px; /* Reduced from 25px */
     display: flex;
     flex-direction: column;
-    gap: 2rem; /* Minimum spacing between sections */
+    gap: 1rem; /* Reduced from 2rem */
     box-shadow: 10px 0 30px rgba(0,0,0,0.1);
     z-index: 100;
     min-height: 100vh;
@@ -86,19 +89,19 @@ body::before {
 
 .sidebar .navbar-brand {
     color: var(--text-light);
-    margin-bottom: 10px; /* Reduced because of gap */
+    margin-bottom: 5px;
     text-align: center;
     text-decoration: none;
     display: block;
     text-transform: uppercase;
-    font-size: 1.1rem;
+    font-size: 1rem; /* Reduced */
 }
 
 .sidebar .navbar-brand-logo {
-    width: 90px;
-    height: 90px;
-    margin-bottom: 15px;
-    border-radius: 25px; /* Squircle */
+    width: 75px; /* Increased to 75px */
+    height: 75px;
+    margin-bottom: 10px;
+    border-radius: 20px; /* Squircle */
     object-fit: cover;
     border: 2px solid rgba(255,255,255,0.5);
     box-shadow: 0 8px 20px rgba(0,0,0,0.3);
@@ -111,15 +114,16 @@ body::before {
 
 .sidebar .nav-link {
     color: rgba(255, 255, 255, 0.7);
-    padding: 14px 20px;
+    padding: 10px 15px; /* Reduced from 14px 20px */
     border-radius: var(--border-radius-md);
     transition: all 0.3s ease;
-    margin-bottom: 8px;
+    margin-bottom: 5px; /* Reduced */
     display: flex;
     align-items: center;
     text-decoration: none;
     font-weight: 500;
     font-family: 'Poppins', sans-serif;
+    font-size: 0.9rem; /* Compact font */
 }
 
 .sidebar .nav-link:hover {
@@ -132,30 +136,32 @@ body::before {
     background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary));
     color: var(--text-light);
     font-weight: 600;
-    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+    box-shadow: 0 4px 15px rgba(85, 139, 47, 0.4);
 }
 
 .sidebar .nav-link i.fa-fw {
-    margin-right: 25px; /* Increased icon spacing */
-    width: 24px; /* Slightly wider to center properly */
+    margin-right: 15px; /* Reduced */
+    width: 20px;
     text-align: center;
 }
 
 .sidebar .username-display {
     margin-top: auto;
-    padding-top: 30px; /* Increased padding */
+    padding-top: 20px;
     border-top: 1px solid rgba(255,255,255,0.1);
     text-align: center;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.7);
 }
+
+.card {
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border: var(--glass-border);
     border-radius: var(--border-radius-lg);
     box-shadow: var(--glass-shadow);
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem; /* Reduced */
     overflow: hidden;
     transition: transform 0.2s ease;
 }
@@ -167,11 +173,12 @@ body::before {
 
 .card-header {
     background-color: rgba(255, 255, 255, 0.5);
-    color: var(--color-primary-dark);
+    color: #1b5e20; /* Explicit Dark Green (var(--color-primary-dark)) */
     border-bottom: 1px solid rgba(0,0,0,0.05);
-    padding: 1.5rem;
-    font-weight: 600;
+    padding: 0.5rem 1rem; /* Further reduced padding */
+    font-weight: 700; /* Bolder */
     font-family: 'Poppins', sans-serif;
+    font-size: 0.95rem; /* Slightly smaller font */
 }
 
 /* Fix for buttons inside card header being invisible if they are outline-light */
@@ -185,7 +192,7 @@ body::before {
 }
 
 .card-body {
-    padding: 1.5rem;
+    padding: 1rem; /* Reduced padding */
 }
 
 /* Buttons */
@@ -193,7 +200,8 @@ body::before {
     background-color: var(--color-primary-light);
     border-color: var(--color-primary-light);
     border-radius: var(--border-radius-sm);
-    padding: 0.5rem 1.2rem;
+    padding: 0.375rem 1rem; /* Reduced */
+    font-size: 0.9rem;
     font-weight: 600;
     transition: all 0.2s;
 }
@@ -205,6 +213,12 @@ body::before {
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
+/* Global Compact Inputs */
+.form-control, .form-select {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.9rem;
+}
+
 .btn-outline-primary {
     color: var(--color-primary-light);
     border-color: var(--color-primary-light);
@@ -238,7 +252,7 @@ body::before {
 }
 .form-check-input:focus {
     border-color: var(--color-primary-light);
-    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba(85, 139, 47, 0.25);
 }
 
 /* Login & Register specific styles */
@@ -283,32 +297,33 @@ body::before {
 /* Charts & Dashboard */
 .chart-container {
     position: relative;
-    height: 300px;
+    height: 220px; /* Reduced from 300px */
     width: 100%;
 }
 
 /* Welcome Section (Dashboard) */
 .welcome-section {
     text-align: center;
-    padding: 40px 0;
+    padding: 20px 0; /* Reduced from 40px */
 }
 
 .welcome-section h1 {
-    font-size: 2.5rem;
-    margin-bottom: 15px;
+    font-size: 2rem; /* Reduced from 2.5rem */
+    margin-bottom: 10px;
     font-weight: 700;
     color: var(--color-primary);
 }
 
 .welcome-section p.lead {
-    font-size: 1.2rem;
+    font-size: 1rem; /* Reduced from 1.2rem */
     color: var(--text-muted);
+    margin-bottom: 1rem;
 }
 
 .welcome-image-container {
     max-width: 800px;
-    height: 350px;
-    margin: 40px auto;
+    height: 180px; /* Drastically reduced from 350px */
+    margin: 20px auto; /* Reduced margins */
     border-radius: var(--border-radius-lg);
     overflow: hidden;
     box-shadow: 0 15px 35px rgba(0,0,0,0.15);
@@ -394,7 +409,7 @@ body::before {
 /* Ensure main content pushes footer down */
 .main-content {
     flex-grow: 1;
-    padding: 30px;
+    padding: 30px 50px; /* Increased spacing as requested */
     display: flex;
     flex-direction: column;
 }
@@ -421,6 +436,12 @@ body::before {
     vertical-align: middle !important;
 }
 
+/* Force compact images in tables */
+.table img, .article-image-trigger {
+    width: 30px !important;
+    height: 30px !important;
+}
+
 .article-image-trigger {
     cursor: pointer;
     transition: transform 0.2s;
@@ -440,7 +461,8 @@ body::before {
     border: 1px solid rgba(0,0,0,0.08);
     border-radius: var(--border-radius-md);
     overflow: hidden; /* Ensure header radius respects container */
-    background-color: #fff;
+    background-color: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
 }
 
 .section-card .card-header {
@@ -451,7 +473,7 @@ body::before {
 }
 
 .section-card .card-body {
-    background-color: #fff;
+    background-color: transparent;
 }
 
 .paste-area {
@@ -460,7 +482,7 @@ body::before {
     padding: 2rem 1rem;
     text-align: center;
     color: var(--text-muted);
-    background-color: #fafafa;
+    background-color: rgba(250, 250, 250, 0.5);
     transition: all 0.2s;
     cursor: pointer;
 }
@@ -478,7 +500,7 @@ body::before {
     object-fit: contain;
     border: 1px solid rgba(0,0,0,0.1);
     padding: 5px;
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.8);
 }
 
 /* --- Packing List Editor Styles --- */
@@ -492,7 +514,8 @@ body::before {
     display: flex;
     flex-direction: column;
     height: 75vh;
-    background-color: #ffffff;
+    background-color: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
     border: 1px solid rgba(0,0,0,0.1);
     border-radius: var(--border-radius-md);
     box-shadow: 0 4px 12px rgba(0,0,0,0.05);
@@ -514,7 +537,7 @@ body::before {
 .available-item-card {
     padding: 8px 12px;
     margin-bottom: 6px;
-    background: #f8f9fa;
+    background: rgba(248, 249, 250, 0.7);
     border-radius: var(--border-radius-sm);
     cursor: grab;
     border: 1px solid rgba(0,0,0,0.05);
@@ -542,7 +565,7 @@ body::before {
 .carrier-list {
     min-height: 80px;
     padding: 10px;
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.3);
 }
 
 .packed-item-row {
@@ -551,13 +574,13 @@ body::before {
     padding: 8px;
     margin-bottom: 4px;
     border-bottom: 1px solid rgba(0,0,0,0.03);
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.6);
     border-radius: var(--border-radius-sm);
     transition: background-color 0.2s;
 }
 
 .packed-item-row:hover {
-    background-color: #fafafa;
+    background-color: rgba(255, 255, 255, 0.8);
 }
 
 .packed-item-row.ghost-class {
@@ -603,6 +626,8 @@ body::before {
     border: 1px solid rgba(0,0,0,0.1);
     border-radius: var(--border-radius-md);
     overflow: hidden;
+    background-color: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
 }
 
 .level-1-card .card-header {
@@ -613,11 +638,11 @@ body::before {
 }
 
 .level-1-card .card-body {
-    background-color: rgba(255, 255, 255, 0.6); /* Slightly transparent */
+    background-color: transparent;
 }
 
 .level-2-list .list-group-item {
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.5);
     border-left: 4px solid var(--color-primary-light);
     margin-bottom: 2px;
     border-radius: var(--border-radius-sm);
@@ -734,21 +759,40 @@ body::before {
 .table-responsive thead th {
     position: sticky;
     top: 0;
-    background-color: #fff; /* Opaque background to cover scrolling content */
+    background-color: var(--sidebar-bg); /* Match sidebar */
+    color: var(--text-light);
+    backdrop-filter: blur(15px);
     z-index: 10; /* Above content */
     box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
 }
 
+/* Reverted Table Styling (Light) */
+.table {
+    color: var(--text-main);
+    margin-bottom: 0;
+}
+
+.table th, .table td {
+    border-color: rgba(0, 0, 0, 0.05);
+    padding: 0.5rem 0.75rem; /* Compact padding */
+    vertical-align: middle;
+}
+
+/* Hover state */
+.table-hover tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
 /* Category Header Row */
 .category-header {
-    background-color: var(--color-primary-light);
-    color: #fff;
+    background-color: rgba(46, 125, 50, 0.15); /* Light subtle green */
+    color: var(--color-primary-dark); /* Dark text for contrast */
     cursor: pointer;
     font-weight: 600;
     font-family: 'Poppins', sans-serif;
 }
 .category-header:hover {
-    filter: brightness(95%);
+    background-color: rgba(46, 125, 50, 0.25);
 }
 .category-header i {
     transition: transform 0.2s;
@@ -757,8 +801,9 @@ body::before {
     transform: rotate(-90deg);
 }
 .category-header td {
-    background-color: var(--color-primary-light) !important; /* Override bootstrap stripes */
-    color: white;
+    background-color: rgba(46, 125, 50, 0.15) !important;
+    color: var(--color-primary-dark);
+    border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
 /* --- Print Styles --- */
@@ -896,4 +941,4 @@ body::before {
     .statistics-list li span {
         font-size: 11pt;
     }
-}
+}
\ No newline at end of file
diff --git a/config.ini b/config.ini
new file mode 100644
index 0000000..6ddae91
--- /dev/null
+++ b/config.ini
@@ -0,0 +1,4 @@
+servername = db
+username = packuser
+password = packpass
+dbname = packliste
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..baeb87b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,26 @@
+services:
+  web:
+    build: .
+    ports:
+      - "8000:80"
+    volumes:
+      - ./src:/var/www/html
+      - ./config.ini:/var/www/config.ini
+    depends_on:
+      - db
+
+  db:
+    image: mariadb:10.6
+    environment:
+      MYSQL_ROOT_PASSWORD: rootpassword
+      MYSQL_DATABASE: packliste
+      MYSQL_USER: packuser
+      MYSQL_PASSWORD: packpass
+    volumes:
+      - ./packliste.sql:/docker-entrypoint-initdb.d/init.sql
+    # Persist data locally so restarts don't wipe the DB (optional but good)
+    # volumes:
+    #   - db_data:/var/lib/mysql
+
+# volumes:
+#   db_data: