diff --git a/.gitignore b/.gitignore
index 68dd01d..4253b88 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 node_modules/
+.env
 dist/
 .vite/
 .DS_Store
-*.local
+*.local
\ No newline at end of file
diff --git a/src/components/microsite/SectionRenderer.tsx b/src/components/microsite/SectionRenderer.tsx
index a7b88ae..79f7b7b 100644
--- a/src/components/microsite/SectionRenderer.tsx
+++ b/src/components/microsite/SectionRenderer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { AgendaItem, MicrositeSection, MicrositeSpeaker, PublicMicrositePayload } from '../../types';
 import { visitorApi } from '../../api/visitor';
-
+import 'bootstrap-icons/font/bootstrap-icons.css';
 type Ctx = {
   data: PublicMicrositePayload;
   eventId: string;
@@ -15,17 +15,27 @@ function str(v: unknown, fallback = ''): string {
 function HeaderSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }) {
   const c = section.config;
   const logoText = str(c.logoText, ctx.data.event.name);
-  const logoUrl = str(c.logoUrl, ctx.data.website.logo || ctx.data.event.logoUrl || '');
+  // const logoUrl = str(c.logoUrl, ctx.data.website.logo || ctx.data.event.logoUrl || '');
+  const logoUrl = str( c.logoUrl || ctx.data.website.logo || ctx.data.event.logoUrl, '');
   const menuItems = (Array.isArray(c.menuItems) ? c.menuItems : []) as { label?: string; url?: string }[];
 
+  // Temporary console logs for debugging for Logo in Navbar
+  // console.log("Header config:", c);
+  // console.log("Website logo:", ctx.data.website.logo);
+  // console.log("Event logo:", ctx.data.event.logoUrl);
+  // console.log("Final logoUrl:", logoUrl);
+
   return (
     <header className="eb-conference-header fixed-top">
       <nav className="navbar navbar-expand-lg navbar-dark">
         <div className="container-fluid px-3 px-lg-4" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
-          <a className="navbar-brand" href="#hero" style={{ textDecoration: 'none', color: '#fff' }}>
+          {/* <a className="navbar-brand" href="#hero" style={{ textDecoration: 'none', color: '#fff' }}>
             {logoUrl ? <img src={logoUrl} alt={logoText} className="eb-header-logo" /> : <span>{logoText}</span>}
+          </a> */}
+          <a className="navbar-brand" href="#hero" style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none', color: '#fff',}}> {logoUrl && ( <img src={logoUrl} alt={logoText} className="eb-header-logo" /> )}
+          <span>{logoText}</span>
           </a>
-          <ul className="navbar-nav" style={{ display: 'flex', gap: '0.75rem', listStyle: 'none', margin: 0, padding: 0, flexWrap: 'wrap' }}>
+          <ul className="navbar-nav" style={{ display: 'flex',alignItems: 'center', gap: '0.75rem', listStyle: 'none', margin: 0, padding: 0, flexWrap: 'wrap' }}>
             {menuItems.map((item, i) => {
               const label = str(item.label);
               const url = str(item.url, '#');
@@ -163,37 +173,560 @@ function AboutSection({ section }: { section: MicrositeSection }) {
   );
 }
 
-function AgendaSection({ section, items }: { section: MicrositeSection; items: AgendaItem[] }) {
-  const title = str(section.config.title, 'Schedule');
-  const list = items.length ? items : [{ title: 'Session 1', time: '9:00 AM', track: 'Main' }];
+// function AgendaSection({ section, items }: { section: MicrositeSection; items: AgendaItem[] }) {
+//   const title = str(section.config.title, 'Schedule');
+//   const list = items.length ? items : [{ title: 'Session 1', time: '9:00 AM', track: 'Main' }];
+//   const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
 
+//   return (
+//     <section id="schedule" className="eb-schedule-section section py-5">
+//       <div className="container">
+//         <h2 className="eb-section-heading text-center mb-5">{title}</h2>
+        
+//         <div
+//           style={{
+//             maxWidth: '900px',
+//             margin: '0 auto',
+//             background: '#fff',
+//             borderRadius: '12px',
+//             overflow: 'hidden',
+//             boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
+//             border: '0.5px solid #e2e8f0',
+//           }}
+//         >
+//           {list.map((item, index) => {
+//             const isExpanded = expandedIndex === index;
+//             const hasSp = !!str(item.speakerName);
+
+//             return (
+//               <div key={index} style={{ borderBottom: index < list.length - 1 ? '0.5px solid #e2e8f0' : 'none' }}>
+//                 <button
+//                   onClick={() => setExpandedIndex(isExpanded ? null : index)}
+//                   style={{
+//                     width: '100%',
+//                     background: isExpanded ? '#f8fafc' : '#fff',
+//                     border: 'none',
+//                     padding: '1rem 1.5rem',
+//                     textAlign: 'left',
+//                     cursor: 'pointer',
+//                     transition: 'background-color 0.3s, padding 0.3s',
+//                     display: 'flex',
+//                     alignItems: 'center',
+//                     gap: '1rem',
+//                     justifyContent: 'space-between',
+//                   }}
+//                   onMouseEnter={(e) => {
+//                     e.currentTarget.style.backgroundColor = '#f1f5f9';
+//                   }}
+//                   onMouseLeave={(e) => {
+//                     e.currentTarget.style.backgroundColor = isExpanded ? '#f8fafc' : '#fff';
+//                   }}
+//                 >
+//                   <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: 1, minWidth: 0, overflow: 'hidden'}}>
+//                     <span
+//                       style={{
+//                         background: '#0f3072',
+//                         color: '#fff',
+//                         padding: '0.5rem 0.75rem',
+//                         borderRadius: '4px',
+//                         fontSize: '0.8rem',
+//                         fontWeight: 600,
+//                         whiteSpace: 'nowrap',
+//                         flexShrink: 0,
+//                       }}
+//                     >
+//                       {item.time || 'TBA'}
+//                     </span>
+
+//                     <div style={{ minWidth: 0, flex: 1 }}>
+//                       <div
+//                         style={{
+//                           fontSize: '1rem',
+//                           fontWeight: 700,
+//                           color: '#0f172a',
+//                           margin: '0 0 0.25rem 0',
+//                           overflow: 'hidden',
+//                           textOverflow: 'ellipsis',
+//                           whiteSpace: 'nowrap',
+//                         }}
+//                       >
+//                         {item.title || 'Untitled Session'}
+//                       </div>
+//                       {item.track && (
+//                         <span
+//                           style={{
+//                             background: 'rgba(0, 194, 209, 0.1)',
+//                             color: '#0891b2',
+//                             padding: '0.25rem 0.6rem',
+//                             borderRadius: '3px',
+//                             fontSize: '0.65rem',
+//                             fontWeight: 600,
+//                             textTransform: 'uppercase',
+//                             letterSpacing: '0.3px',
+//                             display: 'inline-block',
+//                           }}
+//                         >
+//                           {item.track}
+//                         </span>
+//                       )}
+//                     </div>
+//                   </div>
+
+//                   <div
+//                     style={{
+//                       display: 'flex',
+//                       alignItems: 'center',
+//                       justifyContent: 'center',
+//                       width: '26px',
+//                       height: '26px',
+//                       background: isExpanded ? '#e0f2fe' : '#f1f5f9',
+//                       borderRadius: '6px',
+//                       transition: 'all 0.3s',
+//                       color: isExpanded ? '#0891b2' : '#64748b',
+//                       fontWeight: 600,
+//                       fontSize: '1.2rem',
+//                       flexShrink: 0,
+//                     }}
+//                   >
+//                     <i className={`bi ${isExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
+//                   </div>
+//                 </button>
+
+//                 {isExpanded && (
+//                   <div
+//                     style={{
+//                       background: '#f8fafc',
+//                       padding: '1.5rem',
+//                       borderTop: '1px solid #e2e8f0',
+//                       animation: 'slideDown 0.3s ease-out',
+//                     }}
+//                   >
+//                     {item.description && (
+//                       <div style={{ marginBottom: '1.5rem' }}>
+//                         <h4
+//                           style={{
+//                             fontSize: '0.85rem',
+//                             fontWeight: 600,
+//                             color: '#475569',
+//                             textTransform: 'uppercase',
+//                             letterSpacing: '0.5px',
+//                             marginBottom: '0.75rem',
+//                             margin: 0,
+//                           }}
+//                         >
+//                           Session Details
+//                         </h4>
+//                         <h3
+//                           style={{
+//                             margin: '0.75rem 0 0',
+//                             fontSize: '0.95rem',
+//                             color: '#536885',
+//                             lineHeight: 1.6,
+//                           }}
+//                         >
+//                           {item.title}
+//                         </h3>
+//                         {item.track && (
+//                         <span
+//                           style={{
+//                             background: 'rgba(0, 194, 209, 0.1)',
+//                             color: '#0891b2',
+//                             padding: '0.25rem 0.6rem',
+//                             borderRadius: '3px',
+//                             fontSize: '0.65rem',
+//                             fontWeight: 600,
+//                             textTransform: 'uppercase',
+//                             letterSpacing: '0.3px',
+//                             display: 'inline-block',
+//                           }}
+//                         >
+//                           {item.track}
+//                         </span>
+//                       )}
+                        
+//                         <p
+//                           style={{
+//                             margin: '0.75rem 0 0',
+//                             fontSize: '0.95rem',
+//                             color: '#475569',
+//                             lineHeight: 1.6,
+//                           }}
+//                         >
+//                           {item.description}
+//                         </p>
+//                       </div>
+//                     )}
+
+//                     {hasSp && (
+//                       <div style={{ paddingTop: '1rem', borderTop: '1px solid #e2e8f0' }}>
+//                         <h4
+//                           style={{
+//                             fontSize: '0.85rem',
+//                             fontWeight: 600,
+//                             color: '#475569',
+//                             textTransform: 'uppercase',
+//                             letterSpacing: '0.5px',
+//                             marginBottom: '0.75rem',
+//                             margin: 0,
+//                           }}
+//                         >
+//                           Speaker
+//                         </h4>
+//                         <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '0.75rem' }}>
+//                           {item.speakerPhotoUrl && (
+//                             <img
+//                               src={item.speakerPhotoUrl}
+//                               alt={str(item.speakerName)}
+//                               style={{
+//                                 width: '48px',
+//                                 height: '48px',
+//                                 borderRadius: '50%',
+//                                 objectFit: 'cover',
+//                                 border: '2px solid #e2e8f0',
+//                               }}
+//                             />
+//                           )}
+//                           <div>
+//                             <div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#0f172a' }}>
+//                               {item.speakerName}
+//                             </div>
+//                           </div>
+//                         </div>
+//                       </div>
+//                     )}
+//                   </div>
+//                 )}
+//               </div>
+//             );
+//           })}
+//         </div>
+
+//         <div className="text-center mt-4">
+//           <a className="btn btn-primary btn-lg me-2" href="#register">
+//             Register
+//           </a>
+//           <a className="btn btn-outline-secondary btn-lg" href="#hero">
+//             Back to top
+//           </a>
+//         </div>
+//       </div>
+
+//       <style>{`
+//         @keyframes slideDown {
+//           from {
+//             opacity: 0;
+//             transform: translateY(-10px);
+//           }
+//           to {
+//             opacity: 1;
+//             transform: translateY(0);
+//           }
+//         }
+//       `}</style>
+//     </section>
+//   );
+// }
+function AgendaSection({
+  
+  section,
+  items,
+}: {
+  
+  section: MicrositeSection;
+  items: AgendaItem[];
+}) {
+  console.log("Items:",items);
+ 
+  
+  const title = str(section.config.title, "Schedule");
+
+  const list = items.length
+    ? items
+    : [{ title: "Session 1", time: "9:00 AM", track: "Main", date: "" }];
+
+  // Get unique dates
+  const dates = [...new Set(list.map((item) => item.date).filter(Boolean))];
+
+  // Selected day
+  const [selectedDate, setSelectedDate] = useState(
+    dates.length ? dates[0] : ""
+  );
+
+  // Expanded accordion
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  // Filter sessions according to selected date
+  const filteredList = list.filter((item) => item.date === selectedDate);
+ console.log("dates:", dates);
+console.log("selectedDate:", selectedDate);
+console.log("filteredList:", filteredList);
+console.log("list:", list);
   return (
     <section id="schedule" className="eb-schedule-section section py-5">
       <div className="container">
-        <h2 className="eb-section-heading text-center mb-5">{title}</h2>
-        <div className="eb-schedule-list mx-auto" style={{ maxWidth: 820 }}>
-          {list.map((item, i) => {
+        <h2 className="eb-section-heading text-center mb-4">{title}</h2>
+
+        {/* Day Selector */}
+        <div
+          className="d-flex justify-content-center flex-wrap gap-2 mb-4"
+        >
+          {dates.map((date) => (
+            <button
+              key={date}
+              className={`btn ${
+                selectedDate === date
+                  ? "btn-primary"
+                  : "btn-outline-primary"
+              }`}
+              style={{ marginRight: "8px" }}
+              onClick={() => {
+                setSelectedDate(date);
+                setExpandedIndex(null);
+              }}
+            >
+              {date}
+            </button>
+          ))}
+        </div>
+
+        {/* Agenda */}
+        <div
+          style={{
+            maxWidth: "900px" ,
+            margin: "0 auto",
+            background: "#fff",
+            borderRadius: "12px",
+            overflow: "hidden",
+            boxShadow: "0 1px 3px rgba(0,0,0,.05)",
+            border: "0.5px solid #e2e8f0",
+          }}
+        >
+          {filteredList.map((item, index) => {
+            const isExpanded = expandedIndex === index;
             const hasSp = !!str(item.speakerName);
+
             return (
-              <div key={i} className={`eb-schedule-item py-3 ${hasSp ? 'item-talk' : 'item-other'}`}>
-                <div className="row align-items-start">
-                  <div className="col-md-3">
-                    <div className="eb-schedule-time">{item.time || ''}</div>
-                    {hasSp && item.speakerPhotoUrl ? (
-                      <img src={item.speakerPhotoUrl} className="rounded-circle mt-2" width={56} height={56} alt="" />
-                    ) : null}
-                    {hasSp ? <div className="small text-muted mt-1">{item.speakerName}</div> : null}
+              <div
+                key={index}
+                style={{
+                  borderBottom:
+                    index < filteredList.length - 1
+                      ? "0.5px solid #e2e8f0"
+                      : "none",
+                }}
+              >
+                {/* Your existing accordion code */}
+                <button
+                  onClick={() => setExpandedIndex(isExpanded ? null : index)}
+                  style={{
+                    width: '100%',
+                    background: isExpanded ? '#f8fafc' : '#fff',
+                    border: 'none',
+                    padding: '1rem 1.5rem',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    transition: 'background-color 0.3s, padding 0.3s',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '1rem',
+                    justifyContent: 'space-between',
+                    
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = '#f1f5f9';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = isExpanded ? '#f8fafc' : '#fff';
+                  }}
+                >
+                  {/* Left: Time and Title */}
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flex: 1, minWidth: 0, overflow: 'hidden'}}>
+                    {/* Time Badge */}
+                    <span
+                      style={{
+                        background: '#0f3072',
+                        color: '#fff',
+                        padding: '0.5rem 0.75rem',
+                        borderRadius: '4px',
+                        fontSize: '0.8rem',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                        flexShrink: 0,
+                      }}
+                    >
+                      {item.time || 'TBA'}
+                    </span>
+
+                    {/* Title and Track */}
+                    <div style={{ minWidth: 0, flex: 1 }}>
+                      <div
+                        style={{
+                          fontSize: '1rem',
+                          fontWeight: 700,
+                          color: '#0f172a',
+                          margin: '0 0 0.25rem 0',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {item.title || 'Untitled Session'}
+                      </div>
+                      {item.track && (
+                        <span
+                          style={{
+                            background: 'rgba(0, 194, 209, 0.1)',
+                            color: '#0891b2',
+                            padding: '0.25rem 0.6rem',
+                            borderRadius: '3px',
+                            fontSize: '0.65rem',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.3px',
+                            display: 'inline-block',
+                          }}
+                        >
+                          {item.track}
+                        </span>
+                      )}
+                    </div>
                   </div>
-                  <div className="col-md-9">
-                    <h3 className="eb-schedule-title h5">{item.title || ''}</h3>
-                    {item.track ? <div className="eb-schedule-track text-muted mb-2">{item.track}</div> : null}
-                    {item.description ? <p className="mb-0 text-muted small">{item.description}</p> : null}
+
+                  {/* Right: Expand/Collapse Icon */}
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '26px',
+                      height: '26px',
+                      background: isExpanded ? '#e0f2fe' : '#f1f5f9',
+                      borderRadius: '6px',
+                      transition: 'all 0.3s',
+                      color: isExpanded ? '#0891b2' : '#64748b',
+                      fontWeight: 600,
+                      fontSize: '1.2rem',
+                      flexShrink: 0,
+                    }}
+                  >
+                    {/* {isExpanded ? '−' : '+'} */}
+                    <i className={`bi ${isExpanded ? 'bi-chevron-up' : 'bi-chevron-down'}`}></i>
                   </div>
-                </div>
+                </button>
+
+                {/* Accordion Body/Content */}
+                {isExpanded && (
+                  <div
+                    style={{
+                      background: '#f8fafc',
+                      padding: '1.5rem',
+                      borderTop: '1px solid #e2e8f0',
+                      animation: 'slideDown 0.3s ease-out',
+                    }}
+                  >
+                    {/* Description/ Session Details*/}
+                    {item.description && (
+                      <div style={{ marginBottom: '1.5rem' }}>
+                        <h4
+                          style={{
+                            fontSize: '0.85rem',
+                            fontWeight: 600,
+                            color: '#475569',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.5px',
+                            marginBottom: '0.75rem',
+                            margin: 0,
+                          }}
+                        >
+                          Session Details
+                        </h4>
+                        <h3
+                          style={{
+                            margin: '0.75rem 0 0',
+                            fontSize: '0.95rem',
+                            color: '#536885',
+                            lineHeight: 1.6,
+                          }}
+                        >
+                          {item.title}
+                        </h3>
+                        {item.track && (
+                        <span
+                          style={{
+                            background: 'rgba(0, 194, 209, 0.1)',
+                            color: '#0891b2',
+                            padding: '0.25rem 0.6rem',
+                            borderRadius: '3px',
+                            fontSize: '0.65rem',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.3px',
+                            display: 'inline-block',
+                          }}
+                        >
+                          {item.track}
+                        </span>
+                      )}
+                        
+                        <p
+                          style={{
+                            margin: '0.75rem 0 0',
+                            fontSize: '0.95rem',
+                            color: '#475569',
+                            lineHeight: 1.6,
+                          }}
+                        >
+                          {item.description}
+                        </p>
+                      </div>
+                    )}
+
+                    {/* Speaker Info */}
+                    {hasSp && (
+                      <div style={{ paddingTop: '1rem', borderTop: '1px solid #e2e8f0' }}>
+                        <h4
+                          style={{
+                            fontSize: '0.85rem',
+                            fontWeight: 600,
+                            color: '#475569',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.5px',
+                            marginBottom: '0.75rem',
+                            margin: 0,
+                          }}
+                        >
+                          Speaker
+                        </h4>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '0.75rem' }}>
+                          {item.speakerPhotoUrl && (
+                            <img
+                              src={item.speakerPhotoUrl}
+                              alt={str(item.speakerName)}
+                              style={{
+                                width: '48px',
+                                height: '48px',
+                                borderRadius: '50%',
+                                objectFit: 'cover',
+                                border: '2px solid #e2e8f0',
+                              }}
+                            />
+                          )}
+                          <div>
+                            <div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#0f172a' }}>
+                              {item.speakerName}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
             );
           })}
         </div>
+
+        {/* Action Buttons */}
         <div className="text-center mt-4">
           <a className="btn btn-primary btn-lg me-2" href="#register">
             Register
@@ -203,6 +736,20 @@ function AgendaSection({ section, items }: { section: MicrositeSection; items: A
           </a>
         </div>
       </div>
+
+      <style>{`
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+           
     </section>
   );
 }
@@ -360,7 +907,7 @@ function FooterSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }
 
   return (
     <footer id="footer" className="py-4 mt-5" style={{ background: 'var(--eb-conf-footer-bg)', color: '#fff' }}>
-      <div className="container" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: '1rem' }}>
+      <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '1rem', textAlign: 'center' }}>
         <span style={{ opacity: 0.85 }}>{copyrightText}</span>
         <div>
           {links.map((link, i) => (
@@ -377,7 +924,7 @@ function FooterSection({ section, ctx }: { section: MicrositeSection; ctx: Ctx }
 function SponsorsSection({ section }: { section: MicrositeSection }) {
   const c = section.config;
   const title = str(c.title, 'Sponsors');
-  const sponsors = (Array.isArray(c.sponsors) ? c.sponsors : []) as { name?: string; logoUrl?: string; url?: string }[];
+  const sponsors = (Array.isArray(c.sponsors) ? c.sponsors : []) as Array<{ name?: string; logoUrl?: string; url?: string } | { name: string }>;  
   const cells =
     sponsors.length > 0
       ? sponsors
@@ -388,13 +935,19 @@ function SponsorsSection({ section }: { section: MicrositeSection }) {
       <div className="container">
         <h2 className="eb-section-heading text-center mb-5">{title}</h2>
         <div className="row g-3 justify-content-center">
-          {cells.map((s, i) => (
-            <div key={i} className="col-6 col-md-4 col-lg-2 text-center">
-              <a href={str(s.url, '#')} style={{ textDecoration: 'none', color: '#475569' }}>
-                {s.logoUrl ? <img src={s.logoUrl} alt={str(s.name)} style={{ maxHeight: 48 }} className="img-fluid" /> : str(s.name)}
-              </a>
-            </div>
-          ))}
+          {cells.map((s, i) => {
+            const sponsor = s as any;
+            const url = str(sponsor.url, '#');
+            const logoUrl = sponsor.logoUrl ? str(sponsor.logoUrl) : null;
+            const name = str(sponsor.name);
+            return (
+              <div key={i} className="col-6 col-md-4 col-lg-2 text-center">
+                <a href={url} style={{ textDecoration: 'none', color: '#475569' }}>
+                  {logoUrl ? <img src={logoUrl} alt={name} style={{ maxHeight: 48 }} className="img-fluid" /> : name}
+                </a>
+              </div>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/src/styles/conference.css b/src/styles/conference.css
index 4591eb6..b31c2b1 100644
--- a/src/styles/conference.css
+++ b/src/styles/conference.css
@@ -4,21 +4,44 @@
   box-sizing: border-box;
 }
 
+:root {
+  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
-  font-family: var(--eb-conf-body-font, system-ui, sans-serif);
+  font-family: var(--eb-conf-body-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
   color: #0f172a;
-  background: #f8fafc;
+  background: #ffffff;
+  line-height: 1.6;
 }
 
 .eb-microsite-root {
   min-height: 100vh;
   background: #fff;
+  overflow-x: hidden;
 }
 
+/* =====================
+   HEADER & NAVIGATION
+   ===================== */
+
 .eb-conference-header {
   background: var(--eb-conf-nav-bg);
-  padding-top: 0.5rem;
+  padding: 0.75rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: var(--shadow-md);
+  transition: box-shadow var(--transition-smooth);
 }
 
 .eb-conference-header .navbar {
@@ -29,24 +52,48 @@ body {
   color: #fff !important;
   font-family: var(--eb-conf-heading-font);
   font-weight: 700;
+  font-size: 1.25rem;
+  transition: opacity var(--transition-smooth);
+}
+
+.eb-conference-header .navbar-brand:hover {
+  opacity: 0.85;
 }
 
 .eb-conference-header .nav-link {
   color: rgba(255, 255, 255, 0.9) !important;
+  transition: color var(--transition-smooth);
+  font-weight: 500;
+  letter-spacing: 0.3px;
+}
+
+.eb-conference-header .nav-link:hover {
+  color: #fff !important;
 }
 
 .eb-header-logo {
   max-height: 40px;
   width: auto;
+  transition: transform var(--transition-smooth);
 }
 
+.eb-header-logo:hover {
+  transform: scale(1.05);
+}
+
+/* =====================
+   HERO SECTION
+   ===================== */
+
 .eb-hero-block {
-  min-height: 420px;
+  min-height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 6rem 1rem 4rem;
   background: var(--eb-conf-hero-gradient);
+  position: relative;
+  overflow: hidden;
 }
 
 .eb-hero-bg {
@@ -54,6 +101,7 @@ body {
   inset: 0;
   background-size: cover;
   background-position: center;
+  z-index: 1;
 }
 
 .eb-hero-has-image .eb-hero-bg {
@@ -63,115 +111,419 @@ body {
 .eb-hero-mask {
   position: absolute;
   inset: 0;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
+  z-index: 2;
 }
 
 .eb-hero-inner {
   position: relative;
-  z-index: 1;
+  z-index: 3;
   max-width: 820px;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .eb-hero-heading {
   font-family: var(--eb-conf-heading-font);
-  font-size: clamp(2rem, 5vw, 3rem);
+  font-size: clamp(2.25rem, 6vw, 3.5rem);
   font-weight: 800;
   line-height: 1.15;
+  color: #fff;
+  margin: 0 0 1.5rem;
+  letter-spacing: -0.02em;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .eb-hero-intro {
-  font-size: 1.125rem;
-  opacity: 0.95;
+  font-size: 1.25rem;
+  color: rgba(255, 255, 255, 0.95);
   max-width: 640px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto 2rem;
+  line-height: 1.6;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  font-style: italic;
 }
 
 .eb-hero-meta {
   font-size: 0.95rem;
-  opacity: 0.9;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 2rem;
 }
 
 .eb-hero-cta {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 1rem;
   justify-content: center;
 }
 
+/* =====================
+   SECTIONS & LAYOUT
+   ===================== */
+
+.section {
+  padding: 4rem 1rem;
+  transition: background-color var(--transition-smooth);
+}
+
 .eb-section-heading {
   font-family: var(--eb-conf-heading-font);
   font-weight: 700;
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
   color: var(--eb-conf-primary-dark);
+  margin: 0 0 1rem;
+  letter-spacing: -0.01em;
+}
+
+.eb-section-heading::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 4px;
+  background: linear-gradient(90deg, var(--eb-conf-accent) 0%, var(--eb-conf-primary) 100%);
+  margin: 1rem auto 0;
+  border-radius: 2px;
 }
 
 .eb-section-light {
-  background: #f8fafc;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 }
 
 .eb-static-stats {
-  background: var(--eb-conf-primary-dark);
+  background: linear-gradient(135deg, var(--eb-conf-primary-dark) 0%, var(--eb-conf-primary) 100%);
   color: #fff;
+  position: relative;
+  overflow: hidden;
 }
 
 .eb-countdown-heading {
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   opacity: 0.85;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.875rem;
 }
 
 .eb-countdown-phrase {
   font-family: var(--eb-conf-heading-font);
-  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  font-size: clamp(1.5rem, 4vw, 2rem);
   font-weight: 700;
+  margin: 0.5rem 0 0;
 }
 
+/* =====================
+   SCHEDULE SECTION
+   ===================== */
+
 .eb-schedule-section {
-  background: #f8fafc;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+/* New horizontal card layout */
+.eb-schedule-horizontal {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.eb-schedule-event-card {
+  background: #fff;
+  border-radius: 8px;
+  border: 0.5px solid #e2e8f0;
+  padding: 1.25rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  cursor: pointer;
+}
+
+.eb-schedule-event-card:hover {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
+  transform: translateY(-4px);
+  border-color: #cbd5e1;
+}
+
+/* Old list layout - kept for backward compatibility */
+.eb-schedule-list {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+}
+
+.eb-schedule-item {
+  padding: 1.5rem !important;
+  border-bottom: 0.5px solid #e2e8f0;
+  transition: background-color var(--transition-smooth), transform var(--transition-smooth);
+}
+
+.eb-schedule-item:last-child {
+  border-bottom: none;
+}
+
+.eb-schedule-item:hover {
+  background-color: #f8fafc;
+  transform: translateX(4px);
+}
+
+.eb-schedule-item.item-talk {
+  border-left: 3px solid var(--eb-conf-accent);
 }
 
 .eb-schedule-time {
   font-weight: 700;
-  color: var(--eb-conf-primary);
-  font-size: 0.95rem;
+  color: var(--eb-conf-accent);
+  font-size: 1.125rem;
+  letter-spacing: 0.3px;
 }
 
 .eb-schedule-title {
   font-family: var(--eb-conf-heading-font);
   color: #0f172a;
+  font-size: 1.125rem;
+  margin: 0.5rem 0;
 }
 
-.eb-schedule-item {
-  border-bottom: 1px solid #e2e8f0;
+.eb-schedule-track {
+  font-size: 0.85rem;
+  color: var(--eb-conf-primary);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive schedule */
+@media (max-width: 768px) {
+  .eb-schedule-horizontal {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+/* =====================
+   SPEAKERS SECTION
+   ===================== */
+
+.eb-speakers-section {
+  background: #fff;
 }
 
 .eb-speakers-section .card {
   border: none;
-  box-shadow: 0 2px 12px var(--eb-conf-card-glow);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-smooth);
+  height: 100%;
 }
 
-.eb-static-footer {
-  background: var(--eb-static-footer-bg);
-  color: rgba(255, 255, 255, 0.85);
-  padding: 1.5rem 0;
-  font-size: 0.875rem;
-  text-align: center;
+.eb-speakers-section .card:hover {
+  box-shadow: var(--shadow-xl);
+  transform: translateY(-8px);
+}
+
+.eb-speakers-section .card-img-top {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+  transition: transform var(--transition-smooth);
+}
+
+.eb-speakers-section .card:hover .card-img-top {
+  transform: scale(1.05);
+}
+
+.eb-speakers-section .card-body {
+  padding: 1.25rem;
+}
+
+.eb-speakers-section .card-title {
+  font-family: var(--eb-conf-heading-font);
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: #0f172a;
+}
+
+.eb-speakers-section .card-text {
+  color: #64748b;
+  font-size: 0.95rem;
+}
+
+/* =====================
+   SPONSORS SECTION
+   ===================== */
+
+.eb-static-sponsors {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.eb-static-sponsors .row {
+  gap: 2rem;
+}
+
+.eb-static-sponsors a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: #fff;
+  border-radius: 8px;
+  transition: all var(--transition-smooth);
+  box-shadow: var(--shadow-sm);
+  text-decoration: none;
+  color: #475569;
+}
+
+.eb-static-sponsors a:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-4px);
+  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
+}
+
+.eb-static-sponsors img {
+  max-height: 48px;
+  width: auto;
+  transition: filter var(--transition-smooth);
+}
+
+.eb-static-sponsors a:hover img {
+  filter: brightness(0.95);
+}
+
+/* =====================
+   BUTTONS
+   ===================== */
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.5;
+  transition: all var(--transition-smooth);
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  font-size: 0.95rem;
 }
 
 .btn-primary {
-  background: var(--eb-conf-accent) !important;
+  background: linear-gradient(135deg, var(--eb-conf-accent) 0%, var(--eb-conf-primary) 100%);
   border-color: var(--eb-conf-accent) !important;
   color: var(--eb-conf-accent-foreground) !important;
+  box-shadow: var(--shadow-md);
 }
 
 .btn-primary:hover {
-  background: var(--eb-conf-accent-hover) !important;
+  background: linear-gradient(135deg, var(--eb-conf-accent-hover) 0%, var(--eb-conf-primary) 100%);
   border-color: var(--eb-conf-accent-hover) !important;
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-lg {
+  padding: 0.875rem 2rem;
+  font-size: 1.0625rem;
+}
+
+.btn-outline-secondary {
+  background: transparent;
+  border-color: #94a3b8;
+  color: #475569;
+}
+
+.btn-outline-secondary:hover {
+  background: #f1f5f9;
+  border-color: #475569;
+  color: #0f172a;
+}
+
+.btn-outline-light {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  color: #fff;
 }
 
 .btn-outline-light:hover {
-  color: #0f172a !important;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: #fff;
+  color: #fff;
 }
 
+/* =====================
+   FORMS
+   ===================== */
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #0f172a;
+  letter-spacing: 0.2px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 1rem;
+  background: #fff;
+  color: #0f172a;
+  transition: all var(--transition-smooth);
+  font-family: inherit;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--eb-conf-accent);
+  box-shadow: 0 0 0 3px rgba(0, 194, 209, 0.1);
+  background: #fff;
+}
+
+.form-control::placeholder {
+  color: #94a3b8;
+}
+
+textarea.form-control {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.form-error {
+  color: #dc2626;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-top: 0.25rem;
+}
+
+/* =====================
+   UTILITIES
+   ===================== */
+
 .container {
   width: 100%;
   max-width: 1140px;
@@ -184,30 +536,6 @@ body {
   padding: 0 1rem;
 }
 
-@media (min-width: 992px) {
-  .px-lg-4 {
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
-  }
-}
-
-.py-5 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.mb-4 {
-  margin-bottom: 1.5rem;
-}
-
-.mb-5 {
-  margin-bottom: 3rem;
-}
-
 .row {
   display: flex;
   flex-wrap: wrap;
@@ -218,9 +546,10 @@ body {
 .col-md-3,
 .col-md-4,
 .col-md-9,
-.col-md-3,
+.col-lg-2,
 .col-lg-3 {
   padding: 0 0.75rem;
+  margin-bottom: 1.5rem;
 }
 
 .col-6 {
@@ -244,86 +573,16 @@ body {
 }
 
 @media (min-width: 992px) {
+  .col-lg-2 {
+    flex: 0 0 16.667%;
+    max-width: 16.667%;
+  }
   .col-lg-3 {
     flex: 0 0 25%;
     max-width: 25%;
   }
 }
 
-.card {
-  background: #fff;
-  border-radius: 0;
-  overflow: hidden;
-}
-
-.card-img-top {
-  width: 100%;
-  aspect-ratio: 4/3;
-  object-fit: cover;
-}
-
-.card-body {
-  padding: 1rem;
-}
-
-.card-title {
-  margin: 0 0 0.25rem;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.card-text {
-  margin: 0;
-}
-
-.btn {
-  display: inline-block;
-  padding: 0.625rem 1.25rem;
-  border-radius: 0.375rem;
-  border: 1px solid transparent;
-  font-weight: 600;
-  text-decoration: none;
-  cursor: pointer;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.btn-lg {
-  padding: 0.75rem 1.5rem;
-  font-size: 1.0625rem;
-}
-
-.btn-outline-secondary {
-  background: transparent;
-  border-color: #94a3b8;
-  color: #475569;
-}
-
-.btn-outline-light {
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  color: #fff;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.35rem;
-  font-weight: 600;
-  font-size: 0.875rem;
-}
-
-.form-control {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 0.375rem;
-  font-size: 1rem;
-}
-
-textarea.form-control {
-  resize: vertical;
-}
-
 .g-3 > * {
   margin-bottom: 1rem;
 }
@@ -333,22 +592,180 @@ textarea.form-control {
   margin-right: auto;
 }
 
-.small {
-  font-size: 0.875rem;
+.mt-4 {
+  margin-top: 1.5rem;
+}
+
+.me-2 {
+  margin-right: 0.5rem;
+}
+
+.ms-2 {
+  margin-left: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-5 {
+  margin-bottom: 3rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-5 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.px-lg-4 {
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+}
+
+.text-center {
+  text-align: center;
 }
 
 .text-muted {
   color: #64748b !important;
 }
 
+.small {
+  font-size: 0.875rem;
+}
+
 .rounded-circle {
   border-radius: 50%;
 }
 
+.h-100 {
+  height: 100%;
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
 .align-items-start {
   align-items: flex-start;
 }
 
+.align-items-center {
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.card {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  border: none;
+}
+
+.card-img-top {
+  width: 100%;
+  aspect-ratio: 4/3;
+  object-fit: cover;
+  display: block;
+}
+
+.card-body {
+  padding: 1.25rem;
+}
+
+.card-title {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.card-text {
+  margin: 0;
+  color: #64748b;
+}
+
+/* =====================
+   FOOTER
+   ===================== */
+
+.eb-static-footer {
+  background: linear-gradient(135deg, var(--eb-conf-footer-bg) 0%, rgba(0, 0, 0, 0.8) 100%);
+  color: rgba(255, 255, 255, 0.85);
+  padding: 2rem 0;
+  font-size: 0.875rem;
+  text-align: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.eb-static-footer strong {
+  color: #fff;
+  font-weight: 700;
+}
+
+/* =====================
+   CUSTOM SECTION
+   ===================== */
+
 .custom-section :first-child {
   margin-top: 0;
 }
+
+.eb-section-contact {
+  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
+}
+
+/* =====================
+   RESPONSIVE
+   ===================== */
+
+@media (max-width: 767px) {
+  .section {
+    padding: 3rem 1rem;
+  }
+
+  .eb-hero-block {
+    min-height: 400px;
+    padding: 4rem 1rem 3rem;
+  }
+
+  .eb-hero-cta {
+    gap: 0.5rem;
+  }
+
+  .btn-lg {
+    width: 100%;
+  }
+
+  .row {
+    margin: 0 -0.5rem;
+  }
+
+  .col-6,
+  .col-md-3,
+  .col-md-4,
+  .col-md-9,
+  .col-lg-2,
+  .col-lg-3 {
+    padding: 0 0.5rem;
+    margin-bottom: 1rem;
+  }
+}