diff --git a/index.html b/index.html
index a6c9f34..08b482f 100644
--- a/index.html
+++ b/index.html
@@ -5,890 +5,1014 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TourVote - Futuristic Tour Planning</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+	* {
+	    margin: 0;
+	    padding: 0;
+	    box-sizing: border-box;
+	}
 
-        :root {
-            --bg-primary: #0a0a0f;
-            --bg-secondary: #1a1a2e;
-            --bg-card: rgba(255, 255, 255, 0.03);
-            --text-primary: #ffffff;
-            --text-secondary: #a0a0b8;
-            --accent-primary: #00d4ff;
-            --accent-secondary: #7b2ff7;
-            --accent-gradient: linear-gradient(135deg, #00d4ff, #7b2ff7);
-            --border-color: rgba(255, 255, 255, 0.1);
-            --glow: 0 0 20px rgba(0, 212, 255, 0.5);
-        }
+	:root {
+	    --bg-primary: #0a0a0f;
+	    --bg-secondary: #1a1a2e;
+	    --bg-card: rgba(255, 255, 255, 0.03);
+	    --text-primary: #ffffff;
+	    --text-secondary: #a0a0b8;
+	    --accent-primary: #00d4ff;
+	    --accent-secondary: #7b2ff7;
+	    --accent-gradient: linear-gradient(135deg, #00d4ff, #7b2ff7);
+	    --border-color: rgba(255, 255, 255, 0.1);
+	    --glow: 0 0 20px rgba(0, 212, 255, 0.5);
+	}
 
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-        }
+	body {
+	    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	    background: var(--bg-primary);
+	    color: var(--text-primary);
+	    min-height: 100vh;
+	    overflow-x: hidden;
+	    position: relative;
+	}
 
-        /* Animated background */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: 
-                radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(123, 47, 247, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
-            pointer-events: none;
-            z-index: -1;
-        }
-        a {
-            color: var(--accent-primary);
-            text-decoration: underline;
-        }
+	/* Animated background */
+	body::before {
+	    content: '';
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    width: 100%;
+	    height: 100%;
+	    background:
+		radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
+		radial-gradient(circle at 80% 80%, rgba(123, 47, 247, 0.1) 0%, transparent 50%),
+		radial-gradient(circle at 40% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
+	    pointer-events: none;
+	    z-index: -1;
+	}
+	a {
+	    color: var(--accent-primary);
+	    text-decoration: underline;
+	}
 
-        .idea-description a,
-        .tour-info a {
-            /* ensure they stand out against the dark bg */
-            color: var(--accent-primary);
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px 20px 40px;
-        }
+	.idea-description a,
+	.tour-info a {
+	    /* ensure they stand out against the dark bg */
+	    color: var(--accent-primary);
+	}
+	.container {
+	    max-width: 1200px;
+	    margin: 0 auto;
+	    padding: 20px 20px 40px;
+	}
 
-        /* Header */
-        .header {
-            text-align: center;
-            padding: 60px 0 20px;
-            position: relative;
-        }
+	/* Header */
+	.header {
+	    text-align: center;
+	    padding: 60px 0 20px;
+	    position: relative;
+	}
 
-        .logo {
-            font-size: 3rem;
-            font-weight: 900;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            margin-bottom: 10px;
-            text-shadow: var(--glow);
-        }
+	.logo {
+	    font-size: 3rem;
+	    font-weight: 900;
+	    background: var(--accent-gradient);
+	    -webkit-background-clip: text;
+	    -webkit-text-fill-color: transparent;
+	    background-clip: text;
+	    text-transform: uppercase;
+	    letter-spacing: 3px;
+	    margin-bottom: 10px;
+	    text-shadow: var(--glow);
+	}
 
-        .subtitle {
-            color: var(--text-secondary);
-            font-size: 1.1rem;
-            letter-spacing: 1px;
-        }
+	.subtitle {
+	    color: var(--text-secondary);
+	    font-size: 1.1rem;
+	    letter-spacing: 1px;
+	}
 
-        /* Glassmorphism cards */
-        .glass-card {
-            background: var(--bg-card);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid var(--border-color);
-            border-radius: 20px;
-            padding: 30px;
-            max-width: 700px;
-            margin: 0 auto 30px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-            transition: all 0.3s ease;
-        }
+	/* Glassmorphism cards */
+	.glass-card {
+	    background: var(--bg-card);
+	    backdrop-filter: blur(10px);
+	    -webkit-backdrop-filter: blur(10px);
+	    border: 1px solid var(--border-color);
+	    border-radius: 20px;
+	    padding: 30px;
+	    max-width: 700px;
+	    margin: 0 auto 30px;
+	    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+	    transition: all 0.3s ease;
+	}
 
-        .glass-card h2 {
-            margin-bottom: 20px;   /* pushes the next form‐group down */
-        }
+	.glass-card h2 {
+	    margin-bottom: 20px;   /* pushes the next form‐group down */
+	}
 
-        .glass-card h3 {
-            margin-bottom: 16px;   /* pushes the next form‐group down */
-        }
+	.glass-card h3 {
+	    margin-bottom: 16px;   /* pushes the next form‐group down */
+	}
 
-        .glass-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2);
-            border-color: rgba(0, 212, 255, 0.3);
-        }
+	.glass-card:hover {
+	    transform: translateY(-5px);
+	    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2);
+	    border-color: rgba(0, 212, 255, 0.3);
+	}
 
-        .date-row {
-            display: flex;
-            gap: 24px;
-        }
-        
-        .date-row .form-group {
-            width: calc((100% - 42px) / 2);
-            min-width: 0;
-        }
+	.date-row {
+	    display: flex;
+	    gap: 24px;
+	}
 
-        @media (max-width: 600px) {
-            .date-row {
-                flex-direction: column;
-                gap: 20px;
-            }
+	.date-row .form-group {
+	    width: calc((100% - 42px) / 2);
+	    min-width: 0;
+	}
 
-            .date-row .form-group {
-                flex: 1;
-            }
-        }
+	@media (max-width: 600px) {
+	    .date-row {
+		flex-direction: column;
+		gap: 20px;
+	    }
 
-        /* Forms */
-        .form-group {
-            margin-bottom: 20px;
-        }
+	    .date-row .form-group {
+		flex: 1;
+	    }
+	}
 
-        label {
-            display: block;
-            margin-bottom: 8px;
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
+	/* Forms */
+	.form-group {
+	    margin-bottom: 20px;
+	}
 
-        input, textarea {
-            width: 100%;
-            padding: 15px;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            color: var(--text-primary);
-            font-size: 1rem;
-            transition: all 0.3s ease;
-            box-sizing: border-box;   /* ← ensure padding is included in width */
-        }
+	label {
+	    display: block;
+	    margin-bottom: 8px;
+	    color: var(--text-secondary);
+	    font-size: 0.9rem;
+	    text-transform: uppercase;
+	    letter-spacing: 1px;
+	}
 
-        input:focus, textarea:focus {
-            outline: none;
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
-            background: rgba(255, 255, 255, 0.08);
-        }
+	input, textarea {
+	    width: 100%;
+	    padding: 15px;
+	    background: rgba(255, 255, 255, 0.05);
+	    border: 1px solid var(--border-color);
+	    border-radius: 10px;
+	    color: var(--text-primary);
+	    font-size: 1rem;
+	    transition: all 0.3s ease;
+	    box-sizing: border-box;   /* ← ensure padding is included in width */
+	}
 
-        textarea {
-            resize: vertical;
-            min-height: 100px;
-        }
+	input:focus, textarea:focus {
+	    outline: none;
+	    border-color: var(--accent-primary);
+	    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
+	    background: rgba(255, 255, 255, 0.08);
+	}
 
-        /* Buttons */
-        .btn {
-            background: var(--accent-gradient);
-            color: white;
-            border: none;
-            padding: 15px 30px;
-            border-radius: 10px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            display: inline-block;
-            position: relative;
-            overflow: hidden;
-        }
+	textarea {
+	    resize: vertical;
+	    min-height: 100px;
+	}
 
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--glow);
-        }
+	/* Buttons */
+	.btn {
+	    background: var(--accent-gradient);
+	    color: white;
+	    border: none;
+	    padding: 15px 30px;
+	    border-radius: 10px;
+	    font-size: 1rem;
+	    font-weight: 600;
+	    cursor: pointer;
+	    transition: all 0.3s ease;
+	    text-transform: uppercase;
+	    letter-spacing: 1px;
+	    display: inline-block;
+	    position: relative;
+	    overflow: hidden;
+	}
 
-        .btn:active {
-            transform: translateY(0);
-        }
+	.btn:hover {
+	    transform: translateY(-2px);
+	    box-shadow: var(--glow);
+	}
 
-        .btn-secondary {
-            background: transparent;
-            border: 2px solid var(--accent-primary);
-            color: var(--accent-primary);
-        }
+	.btn:active {
+	    transform: translateY(0);
+	}
 
-        .btn-secondary:hover {
-            background: var(--accent-primary);
-            color: var(--bg-primary);
-        }
+	.btn-secondary {
+	    background: transparent;
+	    border: 2px solid var(--accent-primary);
+	    color: var(--accent-primary);
+	}
 
-        .btn-small {
-            padding: 8px 16px;
-            font-size: 0.9rem;
-        }
+	.btn-secondary:hover {
+	    background: var(--accent-primary);
+	    color: var(--bg-primary);
+	}
 
-        .ideas-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
-            margin-top: 30px;
-        }
+	.btn-small {
+	    padding: 8px 16px;
+	    font-size: 0.9rem;
+	}
 
-        .idea-card {
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid var(--border-color);
-            border-radius: 15px;
-            padding: 20px;
-            transition: all 0.3s ease;
-        }
+	.ideas-grid {
+	    display: grid;
+	    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	    gap: 20px;
+	    margin-top: 30px;
+	}
 
-        .idea-card h3 {
-            margin-bottom: 20px;   /* pushes the next form‐group down */
-        }
+	.idea-card {
+	    background: rgba(255, 255, 255, 0.02);
+	    border: 1px solid var(--border-color);
+	    border-radius: 15px;
+	    padding: 20px;
+	    transition: all 0.3s ease;
+	}
 
-        .idea-card:hover {
-            background: rgba(255, 255, 255, 0.05);
-            border-color: rgba(0, 212, 255, 0.3);
-            transform: translateY(-3px);
-        }
+	.idea-card h3 {
+	    margin-bottom: 20px;   /* pushes the next form‐group down */
+	}
 
-        .idea-title {
-            font-size: 1.2rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-            color: var(--accent-primary);
-        }
+	.idea-card:hover {
+	    background: rgba(255, 255, 255, 0.05);
+	    border-color: rgba(0, 212, 255, 0.3);
+	    transform: translateY(-3px);
+	}
 
-        .idea-description {
-            color: var(--text-secondary);
-            margin-bottom: 15px;
-            line-height: 1.6;
-        }
+	.idea-title {
+	    font-size: 1.2rem;
+	    font-weight: 700;
+	    margin-bottom: 10px;
+	    color: var(--accent-primary);
+	}
 
-        .voters-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 10px;
-        }
+	.idea-description {
+	    color: var(--text-secondary);
+	    margin-bottom: 15px;
+	    line-height: 1.6;
+	}
 
-        .voter-chip {
-            background: rgba(0, 212, 255, 0.1);
-            border: 1px solid rgba(0, 212, 255, 0.3);
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            color: var(--accent-primary);
-        }
+	.voters-list {
+	    display: flex;
+	    flex-wrap: wrap;
+	    gap: 8px;
+	    margin-top: 10px;
+	}
 
-        .vote-section {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            margin-top: 15px;
-        }
+	.voter-chip {
+	    background: rgba(0, 212, 255, 0.1);
+	    border: 1px solid rgba(0, 212, 255, 0.3);
+	    padding: 4px 12px;
+	    border-radius: 20px;
+	    font-size: 0.85rem;
+	    color: var(--accent-primary);
+	}
 
-        .vote-count {
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: var(--accent-primary);
-        }
+	.vote-section {
+	    display: flex;
+	    gap: 10px;
+	    align-items: center;
+	    margin-top: 15px;
+	}
 
-        /* Tour info */
-        .tour-info {
-            background: rgba(123, 47, 247, 0.1);
-            border: 1px solid rgba(123, 47, 247, 0.3);
-            border-radius: 15px;
-            padding: 20px;
-            margin-bottom: 30px;
-        }
+	.vote-count {
+	    font-size: 1.1rem;
+	    font-weight: 700;
+	    color: var(--accent-primary);
+	}
 
-        .tour-title {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-        }
+	/* Tour info */
+	.tour-info {
+	    background: rgba(123, 47, 247, 0.1);
+	    border: 1px solid rgba(123, 47, 247, 0.3);
+	    border-radius: 15px;
+	    padding: 20px;
+	    margin-bottom: 30px;
+	}
 
-        .tour-date {
-            color: var(--accent-primary);
-            font-size: 1.1rem;
-            margin-bottom: 10px;
-        }
+	.tour-title {
+	    font-size: 1.8rem;
+	    font-weight: 700;
+	    margin-bottom: 10px;
+	}
 
-        /* Hidden class */
-        .hidden {
-            display: none !important;
-        }
+	.tour-date {
+	    color: var(--accent-primary);
+	    font-size: 1.1rem;
+	    margin-bottom: 10px;
+	}
 
-        /* Loading spinner */
-        .loader {
-            width: 50px;
-            height: 50px;
-            border: 3px solid var(--border-color);
-            border-top: 3px solid var(--accent-primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 50px auto;
-        }
+	/* Hidden class */
+	.hidden {
+	    display: none !important;
+	}
 
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
+	/* Loading spinner */
+	.loader {
+	    width: 50px;
+	    height: 50px;
+	    border: 3px solid var(--border-color);
+	    border-top: 3px solid var(--accent-primary);
+	    border-radius: 50%;
+	    animation: spin 1s linear infinite;
+	    margin: 50px auto;
+	}
 
-        /* Responsive */
-        @media (max-width: 768px) {
-            .logo {
-                font-size: 2rem;
-            }
-            
-            .container {
-                padding: 15px;
-            }
-            
-            .glass-card {
-                padding: 20px;
-            }
-            
-            .ideas-grid {
-                grid-template-columns: 1fr;
-            }
-        }
+	@keyframes spin {
+	    0% { transform: rotate(0deg); }
+	    100% { transform: rotate(360deg); }
+	}
 
-        /* Matrix view */
-        .matrix-view {
-            overflow-x: auto;
-            margin-top: 30px;
-        }
+	/* Responsive */
+	@media (max-width: 768px) {
+	    .logo {
+		font-size: 2rem;
+	    }
 
-        .matrix-table {
-            width: 100%;
-            border-collapse: collapse;
-            min-width: 600px;
-        }
+	    .container {
+		padding: 15px;
+	    }
 
-        .matrix-table th, .matrix-table td {
-            padding: 12px;
-            text-align: left;
-            border: 1px solid var(--border-color);
-        }
+	    .glass-card {
+		padding: 20px;
+	    }
 
-        .matrix-table th {
-            background: rgba(0, 212, 255, 0.1);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            font-size: 0.9rem;
-        }
+	    .ideas-grid {
+		grid-template-columns: 1fr;
+	    }
+	}
 
-        .matrix-table td {
-            background: var(--bg-card);
-        }
+	/* Matrix view */
+	.matrix-view {
+	    overflow-x: auto;
+	    margin-top: 30px;
+	}
 
-        .vote-cell {
-            text-align: center;
-            font-size: 1.2rem;
-            color: var(--accent-primary);
-        }
+	.matrix-table {
+	    width: 100%;
+	    border-collapse: collapse;
+	    min-width: 600px;
+	}
 
-        .toggle-view {
-            display: flex;
-            gap: 10px;
-            justify-content: center;
-            margin-bottom: 20px;
-        }
+	.matrix-table th, .matrix-table td {
+	    padding: 12px;
+	    text-align: left;
+	    border: 1px solid var(--border-color);
+	}
 
-        .date-badge {
-            background: var(--accent-gradient);
-            padding: 6px 12px;
-            border-radius: 12px;
-            display: inline-block;
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--bg-primary);
-            margin-right: 8px;
-            text-shadow: var(--glow);
-            letter-spacing: 0.5px;
-        }
-        .date-label {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 4px;
-            display: block;
-        }
+	.matrix-table th {
+	    background: rgba(0, 212, 255, 0.1);
+	    font-weight: 600;
+	    text-transform: uppercase;
+	    letter-spacing: 1px;
+	    font-size: 0.9rem;
+	}
+
+	.matrix-table td {
+	    background: var(--bg-card);
+	}
+
+	.vote-cell {
+	    text-align: center;
+	    font-size: 1.2rem;
+	    color: var(--accent-primary);
+	}
+
+	.toggle-view {
+	    display: flex;
+	    gap: 10px;
+	    justify-content: center;
+	    margin-bottom: 20px;
+	}
+
+	.date-badge {
+	    background: var(--accent-gradient);
+	    padding: 6px 12px;
+	    border-radius: 12px;
+	    display: inline-block;
+	    font-size: 0.9rem;
+	    font-weight: 600;
+	    color: var(--bg-primary);
+	    margin-right: 8px;
+	    text-shadow: var(--glow);
+	    letter-spacing: 0.5px;
+	}
+	.date-label {
+	    font-size: 0.85rem;
+	    color: var(--text-secondary);
+	    margin-bottom: 4px;
+	    display: block;
+	}
+
+	#voteModal {
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    width: 100%;
+	    height: 100%;
+	    z-index: 999;
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	}
+	#voteModal.hidden {
+	    display: none;
+	}
+	.modal-backdrop {
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    width: 100%;
+	    height: 100%;
+	    background: rgba(10, 10, 15, 0.8);
+	    backdrop-filter: blur(2px);
+	    z-index: 1;
+	}
+	.modal-content {
+	    position: relative;
+	    z-index: 2;
+	    width: 90%;
+	    max-width: 400px;
+	    padding: 30px;
+	    border-radius: 20px;
+	    background: rgba(255, 255, 255, 0.05);
+	    backdrop-filter: blur(10px);
+	    border: 1px solid var(--border-color);
+	    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+	    text-align: center;
+	    animation: modalFadeIn 0.3s ease-out;
+	}
+	.modal-title {
+	    font-size: 1.5rem;
+	    margin-bottom: 10px;
+	    color: var(--accent-primary);
+	}
+	.modal-subtitle {
+	    color: var(--text-secondary);
+	    font-size: 0.9rem;
+	    margin-bottom: 20px;
+	}
+	#voterNameInput {
+	    width: 100%;
+	    padding: 12px;
+	    border: 1px solid var(--border-color);
+	    border-radius: 8px;
+	    background: rgba(255, 255, 255, 0.05);
+	    color: var(--text-primary);
+	    font-size: 1rem;
+	    margin-bottom: 20px;
+	    transition: all 0.3s ease;
+	}
+	#voterNameInput:focus {
+	    outline: none;
+	    border-color: var(--accent-secondary);
+	    box-shadow: 0 0 0 3px rgba(123, 47, 247, 0.1);
+	    background: rgba(255, 255, 255, 0.08);
+	}
+	.modal-buttons {
+	    display: flex;
+	    justify-content: flex-end;
+	    gap: 10px;
+	}
+	.modal-buttons .btn {
+	    font-size: 0.9rem;
+	    padding: 8px 16px;
+	}
+	@keyframes modalFadeIn {
+	    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
+	    to   { opacity: 1; transform: translateY(0) scale(1); }
+	}
+	@keyframes modalFadeOut {
+	    from { opacity: 1; transform: translateY(0) scale(1); }
+	    to   { opacity: 0; transform: translateY(-10px) scale(0.97); }
+	}
     </style>
 </head>
 <body>
     <div class="container">
-        <header class="header">
-            <h1 class="logo"><a href=".">TourVote</a></h1>
-            <p class="subtitle">Collaborative Tour Planning Platform</p>
-        </header>
+	<header class="header">
+	    <h1 class="logo"><a href=".">TourVote</a></h1>
+	    <p class="subtitle">Collaborative Tour Planning Platform</p>
+	</header>
 
-        <div id="createTourSection" class="glass-card">
-            <h2>Create a New Tour</h2>
-            <form id="createTourForm">
-                <div class="form-group">
-                    <label for="tourName">Tour Name</label>
-                    <input type="text" id="tourName" required placeholder="Enter tour name">
-                </div>
-                <div class="date-row">
-                  <div class="form-group">
-                    <label class="date-label" for="tourStartDate">Start Date</label>
-                    <input type="date" id="tourStartDate">
-                  </div>
-                  <div class="form-group">
-                    <label class="date-label" for="tourEndDate">End Date</label>
-                    <input type="date" id="tourEndDate">
-                  </div>
-                </div>
-                <div class="form-group">
-                    <label for="tourDescription">Description</label>
-                    <textarea id="tourDescription" required placeholder="Describe your tour"></textarea>
-                </div>
-                <button type="submit" class="btn">Create Tour</button>
-            </form>
-        </div>
+	<div id="createTourSection" class="glass-card">
+	    <h2>Create a New Tour</h2>
+	    <form id="createTourForm">
+		<div class="form-group">
+		    <label for="tourName">Tour Name</label>
+		    <input type="text" id="tourName" required placeholder="Enter tour name">
+		</div>
+		<div class="date-row">
+		  <div class="form-group">
+		    <label class="date-label" for="tourStartDate">Start Date</label>
+		    <input type="date" id="tourStartDate">
+		  </div>
+		  <div class="form-group">
+		    <label class="date-label" for="tourEndDate">End Date</label>
+		    <input type="date" id="tourEndDate">
+		  </div>
+		</div>
+		<div class="form-group">
+		    <label for="tourDescription">Description</label>
+		    <textarea id="tourDescription" required placeholder="Describe your tour"></textarea>
+		</div>
+		<button type="submit" class="btn">Create Tour</button>
+	    </form>
+	</div>
 
-        <!-- Tour View Section -->
-        <div id="tourViewSection" class="hidden">
-            <!-- Tour Info -->
-            <div id="tourInfo" class="tour-info"></div>
+	<!-- Tour View Section -->
+	<div id="tourViewSection" class="hidden">
+	    <!-- Tour Info -->
+	    <div id="tourInfo" class="tour-info"></div>
 
-            <!-- Add Idea Section -->
-            <div class="glass-card">
-                <h3>Add New Idea</h3>
-                <form id="addIdeaForm">
-                    <div class="form-group">
-                        <label for="ideaName">Idea Name</label>
-                        <input type="text" id="ideaName" required placeholder="Enter idea name">
-                    </div>
-                    <div class="form-group">
-                        <label for="ideaDescription">Description</label>
-                        <textarea id="ideaDescription" required placeholder="Describe your idea"></textarea>
-                    </div>
-                    <div class="date-row">
-                      <div class="form-group">
-                        <label class="date-label" for="ideaStartTime">Start Time</label>
-                        <input type="datetime-local" id="ideaStartTime">
-                      </div>
-                      <div class="form-group">
-                        <label class="date-label" for="ideaEndTime">End Time</label>
-                        <input type="datetime-local" id="ideaEndTime">
-                      </div>
-                    </div>
-                    <button type="submit" class="btn">Add Idea</button>
-                </form>
-            </div>
+	    <!-- Add Idea Section -->
+	    <div class="glass-card">
+		<h3>Add New Idea</h3>
+		<form id="addIdeaForm">
+		    <div class="form-group">
+			<label for="ideaName">Idea Name</label>
+			<input type="text" id="ideaName" required placeholder="Enter idea name">
+		    </div>
+		    <div class="form-group">
+			<label for="ideaDescription">Description</label>
+			<textarea id="ideaDescription" required placeholder="Describe your idea"></textarea>
+		    </div>
+		    <div class="date-row">
+		      <div class="form-group">
+			<label class="date-label" for="ideaStartTime">Start Time</label>
+			<input type="datetime-local" id="ideaStartTime">
+		      </div>
+		      <div class="form-group">
+			<label class="date-label" for="ideaEndTime">End Time</label>
+			<input type="datetime-local" id="ideaEndTime">
+		      </div>
+		    </div>
+		    <button type="submit" class="btn">Add Idea</button>
+		</form>
+	    </div>
 
-            <!-- View Toggle -->
-            <div class="toggle-view">
-                <button class="btn btn-secondary btn-small" onclick="showView('cards')">Card View</button>
-                <button class="btn btn-secondary btn-small" onclick="showView('matrix')">Matrix View</button>
-            </div>
+	    <!-- View Toggle -->
+	    <div class="toggle-view">
+		<button class="btn btn-secondary btn-small" onclick="showView('cards')">Card View</button>
+		<button class="btn btn-secondary btn-small" onclick="showView('matrix')">Matrix View</button>
+	    </div>
 
-            <!-- Ideas Display -->
-            <div id="ideasContainer">
-                <div id="cardsView" class="ideas-grid"></div>
-                <div id="matrixView" class="matrix-view hidden"></div>
-            </div>
-        </div>
+	    <!-- Ideas Display -->
+	    <div id="ideasContainer">
+		<div id="cardsView" class="ideas-grid"></div>
+		<div id="matrixView" class="matrix-view hidden"></div>
+	    </div>
+	</div>
 
-        <!-- Loading -->
-        <div id="loader" class="loader hidden"></div>
+	<!-- Loading -->
+	<div id="loader" class="loader hidden"></div>
+    </div>
+
+    <div id="voteModal" class="hidden">
+      <div class="modal-backdrop"></div>
+      <div class="modal-content glass-card">
+	<h3 class="modal-title">Cast Your Vote</h3>
+	<p class="modal-subtitle">Enter your name to vote for this idea</p>
+	<input
+	   type="text"
+	   id="voterNameInput"
+	   placeholder="Your name…"
+	   maxlength="50"
+	   autofocus
+	   />
+	<div class="modal-buttons">
+	  <button id="voteCancelBtn" class="btn btn-secondary btn-small">Cancel</button>
+	  <button id="voteSubmitBtn" class="btn btn-small">Submit</button>
+	</div>
+      </div>
     </div>
 
     <script>
-        // Mock API URL - Replace with your actual API endpoint
-        const API_URL = 'https://kaizenkodo.no/tour/v1';
-        
-        // State management
-        let currentTour = null;
-        let currentView = 'cards';
-        
-        // Initialize app
-        document.addEventListener('DOMContentLoaded', () => {
-            checkForTourId();
-            setupEventListeners();
-        });
-        
-        // Check if tour ID is in URL
-        function checkForTourId() {
-            const tourId = window.location.hash.slice(1);
-            if (tourId) {
-                loadTour(tourId);
-            }
-        }
-        
-        // Setup event listeners
-        function setupEventListeners() {
-            document.getElementById('createTourForm').addEventListener('submit', createTour);
-            document.getElementById('addIdeaForm').addEventListener('submit', addIdea);
-            
-            // Listen for hash changes
-            window.addEventListener('hashchange', checkForTourId);
-        }
+	// Mock API URL - Replace with your actual API endpoint
+	const API_URL = 'https://kaizenkodo.no/tour/v1';
 
-        function linkify(text) {
-            if (!text) return '';
-            return text.replace(
-                /(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\))|(https?:\/\/[^\s]+)/g,
-                (match, mdFull, mdLabel, mdUrl, plainUrl) => {
-                    if (mdUrl) {
-                        // matched [label](url)
-                        return `<a href="${mdUrl}" target="_blank" rel="noopener">${mdLabel}</a>`;
-                    }
-                    // matched a bare URL
-                    return `<a href="${plainUrl}" target="_blank" rel="noopener">${plainUrl}</a>`;
-                }
-            );
-        }
-        
-        // Create new tour
-        async function createTour(e) {
-            e.preventDefault();
-        
-            const startDate = document.getElementById('tourStartDate').value;
-            const endDate   = document.getElementById('tourEndDate').value;
-            const payload = {
-                name: document.getElementById('tourName').value,
-                description: document.getElementById('tourDescription').value,
-                ...(startDate ? { start_date: startDate } : {}),
-                ...(endDate   ? { end_date:   endDate }   : {})
-            };
-        
-            showLoader();
-            try {
-                const response = await fetch(`${API_URL}/tours`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
-                });
-        
-                if (!response.ok) {
-                    throw new Error(`Server responded with ${response.status}`);
-                }
-        
-                // FastAPI returns the full Tour JSON (with id, createdAt, ideas=[])
-                const tourData = await response.json();
-                currentTour = tourData;
-        
-                // Push the new tour’s ID into the URL hash so loadTour() can pick it up
-                window.location.hash = tourData.id;
-        
-                showTourView();
-            } catch (error) {
-                console.error('Error creating tour:', error);
-                alert('Failed to create tour. Please try again.');
-            } finally {
-                hideLoader();
-            }
-        }
-        
-        // Load existing tour
-        async function loadTour(tourId) {
-            showLoader();
-            try {
-                const response = await fetch(`${API_URL}/tours/${tourId}`);
-                if (response.status === 404) {
-                    throw new Error('Not Found');
-                }
-                if (!response.ok) {
-                    throw new Error(`Server responded with ${response.status}`);
-                }
-                const tourData = await response.json();
-                currentTour = tourData;
-                showTourView();
-            } catch (error) {
-                console.error('Error loading tour:', error);
-                alert('Tour not found or access denied.');
-                window.location.hash = '';
-            } finally {
-                hideLoader();
-            }
-        }
-        
-        // Add new idea
-        async function addIdea(e) {
-            e.preventDefault();
-        
-            // Only send what FastAPI’s IdeaCreate expects:
-            const name = document.getElementById('ideaName').value;
-            const desc = document.getElementById('ideaDescription').value;
-            const startTime = document.getElementById('ideaStartTime').value;
-            const endTime   = document.getElementById('ideaEndTime').value;
-            
-            const payload = {
-                name,
-                description: desc,
-                ...(startTime ? { start_time: startTime } : {}),
-                ...(endTime   ? { end_time:   endTime   } : {})
-            };
-        
-            showLoader();
-            try {
-                const response = await fetch(
-                    `${API_URL}/tours/${currentTour.id}/ideas`,
-                    {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(payload)
-                    }
-                );
-                if (response.status === 404) {
-                    throw new Error('Tour not found');
-                }
-                if (!response.ok) {
-                    throw new Error(`Server responded with ${response.status}`);
-                }
-        
-                // FastAPI sends back the full Idea object, including id and empty voters
-                const newIdea = await response.json();
-                currentTour.ideas.push(newIdea);
-                renderIdeas();
-                document.getElementById('addIdeaForm').reset();
-            } catch (error) {
-                console.error('Error adding idea:', error);
-                alert('Failed to add idea. Please try again.');
-            } finally {
-                hideLoader();
-            }
-        }
-        
-        // Vote for idea
-        async function voteForIdea(ideaId) {
-            const voterName = prompt('Enter your name to vote:');
-            if (!voterName) return;
-        
-            showLoader();
-            try {
-                const response = await fetch(
-                    `${API_URL}/tours/${currentTour.id}/ideas/${ideaId}/vote`,
-                    {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ voterName })
-                    }
-                );
-                if (response.status === 404) {
-                    throw new Error('Tour or Idea not found');
-                }
-                if (!response.ok) {
-                    throw new Error(`Server responded with ${response.status}`);
-                }
-        
-                // FastAPI returns the Idea object (with updated voters list)
-                const updatedIdea = await response.json();
-                // Replace the old idea in currentTour.ideas with the updated one
-                currentTour.ideas = currentTour.ideas.map(i =>
-                    i.id === updatedIdea.id ? updatedIdea : i
-                );
-                renderIdeas();
-            } catch (error) {
-                console.error('Error voting:', error);
-                alert('Failed to vote. Please try again.');
-            } finally {
-                hideLoader();
-            }
-        }
-        
-        // Show tour view
-        function showTourView() {
-            document.getElementById('createTourSection').classList.add('hidden');
-            document.getElementById('tourViewSection').classList.remove('hidden');
-            
-            // Display tour info
-            const tourInfo = document.getElementById('tourInfo');
-            
-            // Build a friendly date‐range display:
-            let dateHTML = "";
-            if (currentTour.start_date && currentTour.end_date) {
-                const s = new Date(currentTour.start_date).toLocaleDateString('nb-NO', {
-                  day:   '2-digit',
-                  month: '2-digit',
-                  year:  'numeric'
-                });
-                const e = new Date(currentTour.end_date).toLocaleDateString('nb-NO', {
-                  day:   '2-digit',
-                  month: '2-digit',
-                  year:  'numeric'
-                });
-                dateHTML = `<span class="date-badge">📅 ${s} – ${e}</span>`;
-            } else if (currentTour.start_date) {
-                const s = new Date(currentTour.start_date).toLocaleDateString('nb-NO', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  year: 'numeric'
-                });
-                dateHTML = `<span class="date-badge">📅 Starts ${s}</span>`;
-            } else if (currentTour.end_date) {
-                const e = new Date(currentTour.end_date).toLocaleDateString('nb-NO', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  year: 'numeric'
-                });
-                dateHTML = `<span class="date-badge">📅 Ends ${e}</span>`;
-            } else {
-                dateHTML = `<span class="date-badge">📅 TBD</span>`;
-            }
-            
-            tourInfo.innerHTML = `
-                <h2 class="tour-title">${currentTour.name}</h2>
-                ${dateHTML}
-                <p style="margin-top: 12px;">${linkify(currentTour.description)}</p>
-            `;
-            
-            renderIdeas();
-        }
-        
-        // Render ideas
-        function renderIdeas() {
-            if (currentView === 'cards') {
-                renderCardsView();
-            } else {
-                renderMatrixView();
-            }
-        }
-        
-        // Render cards view
-        function renderCardsView() {
-            const container = document.getElementById('cardsView');
-            container.innerHTML = '';
-            
-            currentTour.ideas.forEach(idea => {
-                const card = document.createElement('div');
-                card.className = 'idea-card';
+	// State management
+	let currentTour = null;
+	let currentView = 'cards';
 
-                let timeBadge = "";
-                if (idea.start_time && idea.end_time) {
-                   const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
-                     day:    '2-digit',
-                     month:  '2-digit',
-                     year:   '2-digit',
-                     hour:   '2-digit',
-                     minute: '2-digit',
-                     hour12: false
-                   });
-                   const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
-                     day:    '2-digit',
-                     month:  '2-digit',
-                     year:   '2-digit',
-                     hour:   '2-digit',
-                     minute: '2-digit',
-                     hour12: false
-                   });
-                  timeBadge = `<span class="date-badge">${s} → ${e}</span>`;
-                } else if (idea.start_time) {
-                   const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
-                     day:    '2-digit',
-                     month:  '2-digit',
-                     year:   '2-digit',
-                     hour:   '2-digit',
-                     minute: '2-digit',
-                     hour12: false
-                   });
-                  timeBadge = `<span class="date-badge">🕒 Starts ${s}</span>`;
-                } else if (idea.end_time) {
-                   const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
-                     day:    '2-digit',
-                     month:  '2-digit',
-                     year:   '2-digit',
-                     hour:   '2-digit',
-                     minute: '2-digit',
-                     hour12: false
-                   });
-                  timeBadge = `<span class="date-badge">🕒 Ends ${e}</span>`;
-                }
-                
-                card.innerHTML = `
-                    <h3 class="idea-title">${idea.name}</h3>
-                    ${timeBadge}
-                    <p class="idea-description" style="margin-top: 8px;">${linkify(idea.description)}</p>
-                    <div class="vote-section">
-                        <span class="vote-count">👍 ${idea.voters.length} votes</span>
-                        <button class="btn btn-secondary btn-small" onclick="voteForIdea('${idea.id}')">Vote</button>
-                    </div>
-                    <div class="voters-list">
-                        ${idea.voters.map(voter => `<span class="voter-chip">${voter}</span>`).join('')}
-                    </div>
-                `;
-                container.appendChild(card);
-            });
-        }
-        
-        // Render matrix view
-        function renderMatrixView() {
-          const container = document.getElementById('matrixView');
-        
-          const allVoters = [...new Set(currentTour.ideas.flatMap(idea => idea.voters))];
-        
-          let html = '<table class="matrix-table"><thead><tr>'
-                   + '<th>Idea</th><th>Time Range</th>';
-          allVoters.forEach(voter => {
-            html += `<th>${voter}</th>`;
-          });
-          html += '<th>Total</th></tr></thead><tbody>';
-        
-          currentTour.ideas.forEach(idea => {
-            // Format time only (HH:mm) in Norwegian:
-            let timeCell = "";
-            if (idea.start_time && idea.end_time) {
-              const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
-                hour: '2-digit', minute: '2-digit', hour12: false
-              }).replace(/ /g, '&nbsp;');
-              const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
-                hour: '2-digit', minute: '2-digit', hour12: false
-              }).replace(/ /g, '&nbsp;');
-              timeCell = `<td>${s}<br/>→&nbsp;${e}</td>`;
-            } else if (idea.start_time) {
-              const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
-                hour: '2-digit', minute: '2-digit', hour12: false
-              });
-              timeCell = `<td>Starts ${s}</td>`;
-            } else if (idea.end_time) {
-              const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
-                hour: '2-digit', minute: '2-digit', hour12: false
-              });
-              timeCell = `<td>Ends ${e}</td>`;
-            } else {
-              timeCell = `<td style="color: var(--text-secondary);">—</td>`;
-            }
-        
-            html += `<tr>`
-                  + `<td><strong>${idea.name}</strong><br><small>${linkify(idea.description)}</small></td>`
-                  + timeCell;
-            allVoters.forEach(voter => {
-              html += `<td class="vote-cell">${idea.voters.includes(voter) ? '✓' : ''}</td>`;
-            });
-            html += `<td class="vote-cell">${idea.voters.length}</td></tr>`;
-          });
-        
-          html += '</tbody></table>';
-          container.innerHTML = html;
-        }
-        
-        // Switch view
-        function showView(view) {
-            currentView = view;
-            if (view === 'cards') {
-                document.getElementById('cardsView').classList.remove('hidden');
-                document.getElementById('matrixView').classList.add('hidden');
-            } else {
-                document.getElementById('cardsView').classList.add('hidden');
-                document.getElementById('matrixView').classList.remove('hidden');
-            }
-            renderIdeas();
-        }
-        
-        // Utility functions
-        function generateUUID() {
-            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-                const r = Math.random() * 16 | 0;
-                const v = c === 'x' ? r : (r & 0x3 | 0x8);
-                return v.toString(16);
-            });
-        }
-        
-        function showLoader() {
-            document.getElementById('loader').classList.remove('hidden');
-        }
-        
-        function hideLoader() {
-            document.getElementById('loader').classList.add('hidden');
-        }
+	// Initialize app
+	document.addEventListener('DOMContentLoaded', () => {
+	    checkForTourId();
+	    setupEventListeners();
+	});
+
+	// Check if tour ID is in URL
+	function checkForTourId() {
+	    const tourId = window.location.hash.slice(1);
+	    if (tourId) {
+		loadTour(tourId);
+	    }
+	}
+
+	// Setup event listeners
+	function setupEventListeners() {
+	    document.getElementById('createTourForm').addEventListener('submit', createTour);
+	    document.getElementById('addIdeaForm').addEventListener('submit', addIdea);
+
+	    // Listen for hash changes
+	    window.addEventListener('hashchange', checkForTourId);
+	}
+
+	function linkify(text) {
+	    if (!text) return '';
+	    return text.replace(
+		/(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\))|(https?:\/\/[^\s]+)/g,
+		(match, mdFull, mdLabel, mdUrl, plainUrl) => {
+		    if (mdUrl) {
+			// matched [label](url)
+			return `<a href="${mdUrl}" target="_blank" rel="noopener">${mdLabel}</a>`;
+		    }
+		    // matched a bare URL
+		    return `<a href="${plainUrl}" target="_blank" rel="noopener">${plainUrl}</a>`;
+		}
+	    );
+	}
+
+	// Create new tour
+	async function createTour(e) {
+	    e.preventDefault();
+
+	    const startDate = document.getElementById('tourStartDate').value;
+	    const endDate   = document.getElementById('tourEndDate').value;
+	    const payload = {
+		name: document.getElementById('tourName').value,
+		description: document.getElementById('tourDescription').value,
+		...(startDate ? { start_date: startDate } : {}),
+		...(endDate   ? { end_date:   endDate }   : {})
+	    };
+
+	    showLoader();
+	    try {
+		const response = await fetch(`${API_URL}/tours`, {
+		    method: 'POST',
+		    headers: { 'Content-Type': 'application/json' },
+		    body: JSON.stringify(payload)
+		});
+
+		if (!response.ok) {
+		    throw new Error(`Server responded with ${response.status}`);
+		}
+
+		// FastAPI returns the full Tour JSON (with id, createdAt, ideas=[])
+		const tourData = await response.json();
+		currentTour = tourData;
+
+		// Push the new tour’s ID into the URL hash so loadTour() can pick it up
+		window.location.hash = tourData.id;
+
+		showTourView();
+	    } catch (error) {
+		console.error('Error creating tour:', error);
+		alert('Failed to create tour. Please try again.');
+	    } finally {
+		hideLoader();
+	    }
+	}
+
+	// Load existing tour
+	async function loadTour(tourId) {
+	    showLoader();
+	    try {
+		const response = await fetch(`${API_URL}/tours/${tourId}`);
+		if (response.status === 404) {
+		    throw new Error('Not Found');
+		}
+		if (!response.ok) {
+		    throw new Error(`Server responded with ${response.status}`);
+		}
+		const tourData = await response.json();
+		currentTour = tourData;
+		showTourView();
+	    } catch (error) {
+		console.error('Error loading tour:', error);
+		alert('Tour not found or access denied.');
+		window.location.hash = '';
+	    } finally {
+		hideLoader();
+	    }
+	}
+
+	// Add new idea
+	async function addIdea(e) {
+	    e.preventDefault();
+
+	    // Only send what FastAPI’s IdeaCreate expects:
+	    const name = document.getElementById('ideaName').value;
+	    const desc = document.getElementById('ideaDescription').value;
+	    const startTime = document.getElementById('ideaStartTime').value;
+	    const endTime   = document.getElementById('ideaEndTime').value;
+
+	    const payload = {
+		name,
+		description: desc,
+		...(startTime ? { start_time: startTime } : {}),
+		...(endTime   ? { end_time:   endTime   } : {})
+	    };
+
+	    showLoader();
+	    try {
+		const response = await fetch(
+		    `${API_URL}/tours/${currentTour.id}/ideas`,
+		    {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(payload)
+		    }
+		);
+		if (response.status === 404) {
+		    throw new Error('Tour not found');
+		}
+		if (!response.ok) {
+		    throw new Error(`Server responded with ${response.status}`);
+		}
+
+		// FastAPI sends back the full Idea object, including id and empty voters
+		const newIdea = await response.json();
+		currentTour.ideas.push(newIdea);
+		renderIdeas();
+		document.getElementById('addIdeaForm').reset();
+	    } catch (error) {
+		console.error('Error adding idea:', error);
+		alert('Failed to add idea. Please try again.');
+	    } finally {
+		hideLoader();
+	    }
+	}
+
+	// Show tour view
+	function showTourView() {
+	    document.getElementById('createTourSection').classList.add('hidden');
+	    document.getElementById('tourViewSection').classList.remove('hidden');
+
+	    // Display tour info
+	    const tourInfo = document.getElementById('tourInfo');
+
+	    // Build a friendly date‐range display:
+	    let dateHTML = "";
+	    if (currentTour.start_date && currentTour.end_date) {
+		const s = new Date(currentTour.start_date).toLocaleDateString('nb-NO', {
+		  day:   '2-digit',
+		  month: '2-digit',
+		  year:  'numeric'
+		});
+		const e = new Date(currentTour.end_date).toLocaleDateString('nb-NO', {
+		  day:   '2-digit',
+		  month: '2-digit',
+		  year:  'numeric'
+		});
+		dateHTML = `<span class="date-badge">📅 ${s} – ${e}</span>`;
+	    } else if (currentTour.start_date) {
+		const s = new Date(currentTour.start_date).toLocaleDateString('nb-NO', {
+		  day: '2-digit',
+		  month: '2-digit',
+		  year: 'numeric'
+		});
+		dateHTML = `<span class="date-badge">📅 Starts ${s}</span>`;
+	    } else if (currentTour.end_date) {
+		const e = new Date(currentTour.end_date).toLocaleDateString('nb-NO', {
+		  day: '2-digit',
+		  month: '2-digit',
+		  year: 'numeric'
+		});
+		dateHTML = `<span class="date-badge">📅 Ends ${e}</span>`;
+	    } else {
+		dateHTML = `<span class="date-badge">📅 TBD</span>`;
+	    }
+
+	    tourInfo.innerHTML = `
+		<h2 class="tour-title">${currentTour.name}</h2>
+		${dateHTML}
+		<p style="margin-top: 12px;">${linkify(currentTour.description)}</p>
+	    `;
+
+	    renderIdeas();
+	}
+
+	// Render ideas
+	function renderIdeas() {
+	    if (currentView === 'cards') {
+		renderCardsView();
+	    } else {
+		renderMatrixView();
+	    }
+	}
+
+	// Render cards view
+	function renderCardsView() {
+	    const container = document.getElementById('cardsView');
+	    container.innerHTML = '';
+
+	    currentTour.ideas.forEach(idea => {
+		const card = document.createElement('div');
+		card.className = 'idea-card';
+
+		let timeBadge = "";
+		if (idea.start_time && idea.end_time) {
+		   const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
+		     day:    '2-digit',
+		     month:  '2-digit',
+		     year:   '2-digit',
+		     hour:   '2-digit',
+		     minute: '2-digit',
+		     hour12: false
+		   });
+		   const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
+		     day:    '2-digit',
+		     month:  '2-digit',
+		     year:   '2-digit',
+		     hour:   '2-digit',
+		     minute: '2-digit',
+		     hour12: false
+		   });
+		  timeBadge = `<span class="date-badge">${s} → ${e}</span>`;
+		} else if (idea.start_time) {
+		   const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
+		     day:    '2-digit',
+		     month:  '2-digit',
+		     year:   '2-digit',
+		     hour:   '2-digit',
+		     minute: '2-digit',
+		     hour12: false
+		   });
+		  timeBadge = `<span class="date-badge">🕒 Starts ${s}</span>`;
+		} else if (idea.end_time) {
+		   const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
+		     day:    '2-digit',
+		     month:  '2-digit',
+		     year:   '2-digit',
+		     hour:   '2-digit',
+		     minute: '2-digit',
+		     hour12: false
+		   });
+		  timeBadge = `<span class="date-badge">🕒 Ends ${e}</span>`;
+		}
+
+		card.innerHTML = `
+		    <h3 class="idea-title">${idea.name}</h3>
+		    ${timeBadge}
+		    <p class="idea-description" style="margin-top: 8px;">${linkify(idea.description)}</p>
+		    <div class="vote-section">
+			<span class="vote-count">👍 ${idea.voters.length} votes</span>
+			<button class="btn btn-secondary btn-small" onclick="voteForIdea('${idea.id}')">Vote</button>
+		    </div>
+		    <div class="voters-list">
+			${idea.voters.map(voter => `<span class="voter-chip">${voter}</span>`).join('')}
+		    </div>
+		`;
+		container.appendChild(card);
+	    });
+	}
+
+	// Render matrix view
+	function renderMatrixView() {
+	  const container = document.getElementById('matrixView');
+
+	  const allVoters = [...new Set(currentTour.ideas.flatMap(idea => idea.voters))];
+
+	  let html = '<table class="matrix-table"><thead><tr>'
+		   + '<th>Idea</th><th>Time Range</th>';
+	  allVoters.forEach(voter => {
+	    html += `<th>${voter}</th>`;
+	  });
+	  html += '<th>Total</th></tr></thead><tbody>';
+
+	  currentTour.ideas.forEach(idea => {
+	    // Format time only (HH:mm) in Norwegian:
+	    let timeCell = "";
+	    if (idea.start_time && idea.end_time) {
+	      const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
+		hour: '2-digit', minute: '2-digit', hour12: false
+	      }).replace(/ /g, '&nbsp;');
+	      const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
+		hour: '2-digit', minute: '2-digit', hour12: false
+	      }).replace(/ /g, '&nbsp;');
+	      timeCell = `<td>${s}<br/>→&nbsp;${e}</td>`;
+	    } else if (idea.start_time) {
+	      const s = new Date(idea.start_time).toLocaleDateString('nb-NO', {
+		hour: '2-digit', minute: '2-digit', hour12: false
+	      });
+	      timeCell = `<td>Starts ${s}</td>`;
+	    } else if (idea.end_time) {
+	      const e = new Date(idea.end_time).toLocaleDateString('nb-NO', {
+		hour: '2-digit', minute: '2-digit', hour12: false
+	      });
+	      timeCell = `<td>Ends ${e}</td>`;
+	    } else {
+	      timeCell = `<td style="color: var(--text-secondary);">—</td>`;
+	    }
+
+	    html += `<tr>`
+		  + `<td><strong>${idea.name}</strong><br><small>${linkify(idea.description)}</small></td>`
+		  + timeCell;
+	    allVoters.forEach(voter => {
+	      html += `<td class="vote-cell">${idea.voters.includes(voter) ? '✓' : ''}</td>`;
+	    });
+	    html += `<td class="vote-cell">${idea.voters.length}</td></tr>`;
+	  });
+
+	  html += '</tbody></table>';
+	  container.innerHTML = html;
+	}
+
+	// Switch view
+	function showView(view) {
+	    currentView = view;
+	    if (view === 'cards') {
+		document.getElementById('cardsView').classList.remove('hidden');
+		document.getElementById('matrixView').classList.add('hidden');
+	    } else {
+		document.getElementById('cardsView').classList.add('hidden');
+		document.getElementById('matrixView').classList.remove('hidden');
+	    }
+	    renderIdeas();
+	}
+
+	// Utility functions
+	function generateUUID() {
+	    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+		const r = Math.random() * 16 | 0;
+		const v = c === 'x' ? r : (r & 0x3 | 0x8);
+		return v.toString(16);
+	    });
+	}
+
+	function showLoader() {
+	    document.getElementById('loader').classList.remove('hidden');
+	}
+
+	function hideLoader() {
+	    document.getElementById('loader').classList.add('hidden');
+	}
+
+	const voteModal = document.getElementById('voteModal');
+	const voterNameInput = document.getElementById('voterNameInput');
+	const voteCancelBtn = document.getElementById('voteCancelBtn');
+	const voteSubmitBtn = document.getElementById('voteSubmitBtn');
+	let _pendingVoteIdeaId = null;
+
+	function voteForIdea(ideaId) {
+	    _pendingVoteIdeaId = ideaId;
+	    voterNameInput.value = '';
+	    voteSubmitBtn.disabled = true;
+	    voteModal.classList.remove('hidden');
+	    setTimeout(() => voterNameInput.focus(), 100);
+	}
+
+	voterNameInput.addEventListener('input', () => {
+	    voteSubmitBtn.disabled = voterNameInput.value.trim().length === 0;
+	});
+
+	function closeVoteModal() {
+	    const content = voteModal.querySelector('.modal-content');
+	    content.style.animation = 'modalFadeOut 0.2s ease-out forwards';
+	    setTimeout(() => {
+		voteModal.classList.add('hidden');
+		content.style.animation = 'modalFadeIn 0.3s ease-out'; // reset for next open
+		_pendingVoteIdeaId = null;
+	    }, 200);
+	}
+	voteCancelBtn.addEventListener('click', closeVoteModal);
+	voteSubmitBtn.addEventListener('click', async () => {
+	    const voterName = voterNameInput.value.trim();
+	    if (!voterName) return;
+
+	    closeVoteModal();
+	    showLoader();
+	    try {
+		const resp = await fetch(
+		    `${API_URL}/tours/${currentTour.id}/ideas/${_pendingVoteIdeaId}/vote`,
+		    {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ voterName }),
+		    }
+		);
+		if (resp.status === 404) throw new Error('Tour or Idea not found');
+		if (!resp.ok) throw new Error(`Server responded with ${resp.status}`);
+		const updatedIdea = await resp.json();
+		currentTour.ideas = currentTour.ideas.map((i) =>
+							  i.id === updatedIdea.id ? updatedIdea : i
+							 );
+		renderIdeas();
+	    } catch (err) {
+		console.error('Error voting:', err);
+		alert('Failed to vote. Please try again.');
+	    } finally {
+		hideLoader();
+		_pendingVoteIdeaId = null;
+	    }
+	});
     </script>
 </body>
 </html>
diff --git a/service.sh b/service.sh
new file mode 100755
index 0000000..730faed
--- /dev/null
+++ b/service.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+cd /home/kaizen/repos/tourplanner || exit 1
+exec python3.11 server.py --port=3002 --data-dir=/home/kaizen/repos/tourplanner/data