diff --git a/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910 b/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910
index e478a45..397da4b 100644
--- a/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910
+++ b/.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910
@@ -1 +1 @@
-I"{"source"=>"/srv/jekyll", "destination"=>"/srv/jekyll/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/:categories/:year/:month/:day/:title:output_ext"}, "photos"=>{"output"=>true, "permalink"=>"/:collection/:path/"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>["Gemfile", "Gemfile.lock", "node_modules", "vendor", "README.md", ".sass-cache", ".jekyll-cache", "gemfiles", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>["jekyll-github-metadata", "jekyll-seo-tag"], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"0.0.0.0", "baseurl"=>"/photos", "show_dir_listing"=>false, "permalink"=>"date", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[{"scope"=>{"path"=>"", "type"=>"photos"}, "values"=>{"layout"=>"gallery"}}], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>[1, 2, 3, 4, 5, 6], "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false}, "title"=>"Photo Portfolio", "url"=>"http://0.0.0.0:4000", "theme"=>"jekyll-theme-primer", "livereload"=>true, "force_polling"=>true, "livereload_port"=>35729, "serving"=>true, "watch"=>true, "description"=>#<Jekyll::GitHubMetadata::Value:0x0000555557687200 @key="description", @value=#<Proc:0x0000555557687228 /usr/gem/gems/jekyll-github-metadata-2.16.1/lib/jekyll-github-metadata/site_github_munger.rb:76>>, "github"=>nil}:ET
\ No newline at end of file
+I"{"source"=>"/srv/jekyll", "destination"=>"/srv/jekyll/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/:categories/:year/:month/:day/:title:output_ext"}, "photos"=>{"output"=>true, "permalink"=>"/:collection/:path/"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>["Gemfile", "Gemfile.lock", "node_modules", "vendor", "README.md", ".sass-cache", ".jekyll-cache", "gemfiles", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>["jekyll-github-metadata", "jekyll-seo-tag"], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"0.0.0.0", "baseurl"=>"/photos", "show_dir_listing"=>false, "permalink"=>"date", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[{"scope"=>{"path"=>"", "type"=>"photos"}, "values"=>{"layout"=>"gallery"}}], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>[1, 2, 3, 4, 5, 6], "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false}, "title"=>"Photo Portfolio", "url"=>"http://0.0.0.0:4000", "theme"=>"jekyll-theme-primer", "livereload"=>true, "force_polling"=>true, "livereload_port"=>35729, "serving"=>true, "watch"=>true, "description"=>#<Jekyll::GitHubMetadata::Value:0x0000555557692600 @key="description", @value=#<Proc:0x0000555557692628 /usr/gem/gems/jekyll-github-metadata-2.16.1/lib/jekyll-github-metadata/site_github_munger.rb:76>>, "github"=>nil}:ET
\ No newline at end of file
diff --git a/_site/assets/css/styles.css b/_site/assets/css/styles.css
index 87aae36..7f905f1 100644
--- a/_site/assets/css/styles.css
+++ b/_site/assets/css/styles.css
@@ -6,7 +6,7 @@
 }
 
 body {
-    background: #4c4c4c;
+    background: #ffffff;
     color: #000;
     overflow-x: hidden;
 }
@@ -19,7 +19,6 @@ body {
 .main-content {
     display: flex;
     width: 100%;
-    transition: width 0.3s ease;
 }
 
 .main-content.gallery-open {
@@ -30,6 +29,10 @@ body {
     width: 200px;
     padding: 1.5rem;
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    z-index: 1001;
 }
 
 .content {
@@ -40,58 +43,86 @@ body {
 }
 
 .gallery-view {
-    width: 75%;
+    width: calc(100% - 200px);
     height: 100vh;
     position: fixed;
     top: 0;
-    right: -75%;
+    right: 0;
     background: white;
-    transition: right 0.3s ease;
-    border-left: 1px solid #eee;
-    overflow-y: auto;
-    scroll-snap-type: y mandatory;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    z-index: 1000;
+    overflow-x: auto;
+    overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+}
+
+.photo-grid {
+    display: flex;
+    height: 100%;
+    width: fit-content;
 }
 
 .gallery-view.active {
-    right: 0;
+    opacity: 1;
+    pointer-events: auto;
 }
 
 .gallery-view .photo-item {
     height: 100vh;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
+    width: calc(100vw - 200px);
+    flex: 0 0 auto;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
+    justify-content: flex-start;
+    padding: 40px;
+    position: relative;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
 }
 
 .gallery-view .photo-item img {
-    max-width: 100%;
-    max-height: 100%;
+    max-width: calc(100% - 80px);
+    max-height: calc(80vh - 80px);
     object-fit: contain;
+    margin-bottom: 20px;
+}
+
+.photo-info {
+    position: static;
+    margin-top: 0;
+    text-align: left;
+    width: calc(100% - 80px);
+    align-self: center;
+}
+
+.photo-info .location {
+    font-weight: normal;
+    font-size: 0.9rem;
+    margin-bottom: 4px;
+}
+
+.photo-info .year {
+    color: #666;
+    font-size: 0.9rem;
 }
 
 .gallery-header {
     position: fixed;
-    top: 0;
-    right: 0;
-    width: 50px;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: white;
-    z-index: 1000;
-    cursor: pointer;
+    top: 40px;
+    right: 40px;
+    z-index: 1001;
 }
 
 .close-button {
     font-size: 1.5rem;
-    color: #666;
+    color: #000;
     text-decoration: none;
     line-height: 1;
+    padding: 10px;
 }
 
 h1 {
@@ -153,7 +184,7 @@ select {
 .works-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.25rem;
 }
 
 .work-row {
@@ -184,8 +215,8 @@ select {
     }
     
     .sidebar {
+        position: static;
         width: 100%;
-        padding: 1rem;
     }
     
     .content {
@@ -196,7 +227,8 @@ select {
 
     .gallery-view {
         width: 100%;
-        right: -100%;
+        overflow-x: auto;
+        overflow-y: hidden;
     }
 
     .main-content.gallery-open {
diff --git a/_site/index.html b/_site/index.html
index c2e1b3b..0c30d81 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -210,10 +210,12 @@ <h1>A MAGNO</h1>
     console.log('Showing gallery for:', folderPath);
     const galleryView = document.querySelector('.gallery-view');
     const photoGrid = galleryView.querySelector('.photo-grid');
-    const mainContent = document.querySelector('.main-content');
     
     photoGrid.innerHTML = '';
     
+    // Get folder info
+    const folderInfo = imageData.folders.find(f => f.path === folderPath);
+    
     // Filter images for this folder
     const folderImages = imageData.images.filter(img => img.folder === folderPath);
     console.log('Images found for folder:', folderImages);
@@ -222,22 +224,27 @@ <h1>A MAGNO</h1>
     folderImages.forEach(image => {
         const photoItem = document.createElement('div');
         photoItem.className = 'photo-item';
-        photoItem.innerHTML = `<img src="/photos${image.path}" loading="lazy">`;
+        photoItem.innerHTML = `
+            <img src="/photos${image.path}" loading="lazy">
+            <div class="photo-info">
+                <div class="location">${folderInfo.location}</div>
+                <div class="year">${folderInfo.year}</div>
+            </div>
+        `;
         photoGrid.appendChild(photoItem);
     });
 
     galleryView.classList.add('active');
-    mainContent.classList.add('gallery-open');
     document.body.style.overflow = 'hidden';
 }
 
 function hideGallery(event) {
-    event.preventDefault();
+    if (event) {
+        event.preventDefault();
+    }
     console.log('Hiding gallery');
     const galleryView = document.querySelector('.gallery-view');
-    const mainContent = document.querySelector('.main-content');
     galleryView.classList.remove('active');
-    mainContent.classList.remove('gallery-open');
     document.body.style.overflow = '';
 }
 
@@ -245,6 +252,16 @@ <h1>A MAGNO</h1>
 console.log('Initializing application');
 populateFilters();
 displayWorks();
+
+// Add this after your existing showGallery and hideGallery functions
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') {
+        const galleryView = document.querySelector('.gallery-view');
+        if (galleryView.classList.contains('active')) {
+            hideGallery(event);
+        }
+    }
+});
 </script> 
 </body>
 </html> 
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 0340685..649c31e 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -8,7 +8,7 @@
 }
 
 body {
-    background: #4c4c4c;
+    background: #ffffff;
     color: #000;
     overflow-x: hidden;
 }
@@ -21,7 +21,6 @@ body {
 .main-content {
     display: flex;
     width: 100%;
-    transition: width 0.3s ease;
 }
 
 .main-content.gallery-open {
@@ -32,6 +31,10 @@ body {
     width: 200px;
     padding: 1.5rem;
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    z-index: 1001;
 }
 
 .content {
@@ -42,58 +45,86 @@ body {
 }
 
 .gallery-view {
-    width: 75%;
+    width: calc(100% - 200px);
     height: 100vh;
     position: fixed;
     top: 0;
-    right: -75%;
+    right: 0;
     background: white;
-    transition: right 0.3s ease;
-    border-left: 1px solid #eee;
-    overflow-y: auto;
-    scroll-snap-type: y mandatory;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    z-index: 1000;
+    overflow-x: auto;
+    overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+}
+
+.photo-grid {
+    display: flex;
+    height: 100%;
+    width: fit-content;
 }
 
 .gallery-view.active {
-    right: 0;
+    opacity: 1;
+    pointer-events: auto;
 }
 
 .gallery-view .photo-item {
     height: 100vh;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
+    width: calc(100vw - 200px);
+    flex: 0 0 auto;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
+    justify-content: flex-start;
+    padding: 40px;
+    position: relative;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
 }
 
 .gallery-view .photo-item img {
-    max-width: 100%;
-    max-height: 100%;
+    max-width: calc(100% - 80px);
+    max-height: calc(80vh - 80px);
     object-fit: contain;
+    margin-bottom: 20px;
+}
+
+.photo-info {
+    position: static;
+    margin-top: 0;
+    text-align: left;
+    width: calc(100% - 80px);
+    align-self: center;
+}
+
+.photo-info .location {
+    font-weight: normal;
+    font-size: 0.9rem;
+    margin-bottom: 4px;
+}
+
+.photo-info .year {
+    color: #666;
+    font-size: 0.9rem;
 }
 
 .gallery-header {
     position: fixed;
-    top: 0;
-    right: 0;
-    width: 50px;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: white;
-    z-index: 1000;
-    cursor: pointer;
+    top: 40px;
+    right: 40px;
+    z-index: 1001;
 }
 
 .close-button {
     font-size: 1.5rem;
-    color: #666;
+    color: #000;
     text-decoration: none;
     line-height: 1;
+    padding: 10px;
 }
 
 h1 {
@@ -155,7 +186,7 @@ select {
 .works-list {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.25rem;
 }
 
 .work-row {
@@ -186,8 +217,8 @@ select {
     }
     
     .sidebar {
+        position: static;
         width: 100%;
-        padding: 1rem;
     }
     
     .content {
@@ -198,7 +229,8 @@ select {
 
     .gallery-view {
         width: 100%;
-        right: -100%;
+        overflow-x: auto;
+        overflow-y: hidden;
     }
 
     .main-content.gallery-open {
diff --git a/index.html b/index.html
index c5bc29d..bb0afff 100644
--- a/index.html
+++ b/index.html
@@ -170,10 +170,12 @@ <h1>A MAGNO</h1>
     console.log('Showing gallery for:', folderPath);
     const galleryView = document.querySelector('.gallery-view');
     const photoGrid = galleryView.querySelector('.photo-grid');
-    const mainContent = document.querySelector('.main-content');
     
     photoGrid.innerHTML = '';
     
+    // Get folder info
+    const folderInfo = imageData.folders.find(f => f.path === folderPath);
+    
     // Filter images for this folder
     const folderImages = imageData.images.filter(img => img.folder === folderPath);
     console.log('Images found for folder:', folderImages);
@@ -182,22 +184,27 @@ <h1>A MAGNO</h1>
     folderImages.forEach(image => {
         const photoItem = document.createElement('div');
         photoItem.className = 'photo-item';
-        photoItem.innerHTML = `<img src="{{ site.baseurl }}${image.path}" loading="lazy">`;
+        photoItem.innerHTML = `
+            <img src="{{ site.baseurl }}${image.path}" loading="lazy">
+            <div class="photo-info">
+                <div class="location">${folderInfo.location}</div>
+                <div class="year">${folderInfo.year}</div>
+            </div>
+        `;
         photoGrid.appendChild(photoItem);
     });
 
     galleryView.classList.add('active');
-    mainContent.classList.add('gallery-open');
     document.body.style.overflow = 'hidden';
 }
 
 function hideGallery(event) {
-    event.preventDefault();
+    if (event) {
+        event.preventDefault();
+    }
     console.log('Hiding gallery');
     const galleryView = document.querySelector('.gallery-view');
-    const mainContent = document.querySelector('.main-content');
     galleryView.classList.remove('active');
-    mainContent.classList.remove('gallery-open');
     document.body.style.overflow = '';
 }
 
@@ -205,4 +212,14 @@ <h1>A MAGNO</h1>
 console.log('Initializing application');
 populateFilters();
 displayWorks();
+
+// Add this after your existing showGallery and hideGallery functions
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') {
+        const galleryView = document.querySelector('.gallery-view');
+        if (galleryView.classList.contains('active')) {
+            hideGallery(event);
+        }
+    }
+});
 </script> 
\ No newline at end of file