diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 940bd98..528aa6e 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -467,7 +467,7 @@ h1, h2, h3, h4, h5, h6 {
    position: absolute;
    bottom: 0;
    left: 0;
-   width: clamp(150px, 20vw, 280px);
+   width: clamp(800px, 20vw, 280px);
    z-index: 2;
 }
 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 483c840..49caa6e 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -6,6 +6,8 @@
     <title><%= content_for?(:title) ? yield(:title) : "Reboot" %></title>
     <%= csrf_meta_tags %>
     <meta name="csrf-token" content="<%= form_authenticity_token %>">
+    <link rel="icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
+    <link rel="shortcut icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
     <link rel="stylesheet" href="/stylesheets/application.css?v=6">
     <script defer src="/javascripts/application.js?v=2"></script>
   </head>
diff --git a/app/views/pages/shop.html.erb b/app/views/pages/shop.html.erb
index 085e4aa..c9d1626 100644
--- a/app/views/pages/shop.html.erb
+++ b/app/views/pages/shop.html.erb
@@ -4,210 +4,146 @@
 <%= render "shared/navbar" %>
 
 <main class="container">
-  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
     <h1 class="page-title" style="margin: 0;">Shop</h1>
     <a href="/purchases" class="btn btn--secondary">Recent Purchases</a>
   </div>
 
-  <div style="display: grid; grid-template-columns: 250px 1fr; gap: 2rem;">
-    <aside class="shop-sidebar card">
-      <h3 style="margin: 0 0 1rem 0; color: #1f2430; font-size: 1.1rem;">Categories</h3>
-      
-      <div style="display: flex; flex-direction: column; gap: 0.75rem;">
-        <button class="shop-category-btn shop-category-btn--active" data-category="all">
-          All Items
-        </button>
-        <button class="shop-category-btn" data-category="economic">
-          Economic
-        </button>
-        <button class="shop-category-btn" data-category="standard">
-          Standard
-        </button>
-        <button class="shop-category-btn" data-category="quality">
-          Quality
-        </button>
-        <button class="shop-category-btn" data-category="advanced">
-          Advanced
-        </button>
-        <button class="shop-category-btn" data-category="professional">
-          Professional
-        </button>
-      </div>
+  <div class="shop-layout">
+    <aside class="shop-categories card">
+      <h3 class="shop-heading">Category</h3>
+      <ul class="shop-category-list">
+        <% categories = [ "Keyboard", "Mouse", "Monitor", "Headphones", "Webcam" ] %>
+        <% categories.each_with_index do |cat, idx| %>
+          <li>
+            <button class="shop-category-item <%= 'is-active' if idx == 0 %>" data-target="cat-<%= cat.downcase %>">
+              <%= cat %>
+            </button>
+          </li>
+        <% end %>
+      </ul>
     </aside>
 
-    <section>
-      <h2 style="margin: 0 0 1.5rem 0; color: #1f2430;">Items</h2>
+    <section class="shop-items card">
+      <div class="shop-items__header">
+        <h2 class="shop-heading" style="margin: 0;">Items</h2>
+        <div aria-hidden="true" class="shop-cart">
+          <img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A793FGJ2V/bolt.png?pub_secret=7acc4044c5" alt="bolts" class="bolt-icon">
+        </div>
+      </div>
+
+      <% categories.each_with_index do |cat, idx| %>
+        <% item = @shop_items.find { |i| i.name.to_s.downcase.strip == cat.downcase } %>
+        <% base_cost = (item&.cost || 0).to_i %>
+        <div id="cat-<%= cat.downcase %>" class="shop-item-detail <%= 'is-active' if idx == 0 %>">
+          <div class="shop-item-detail__variants">
+            <% variants = [
+              ['Standard grant', 'standard'],
+              ['Quality grant', 'quality'],
+              ['Advanced grant', 'advanced'],
+              ['Professional grant', 'professional']
+            ] %>
+            <% images_for_keyboard = [
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6SJ1AQAH/vecteezy_keyboard-3d-rendering-icon-illustration_28606613.png?pub_secret=9418a400cb',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6SHUUGN9/vecteezy_gaming-keyboard-with-anti-ghosting-technology-transparent_57571865.png?pub_secret=2fe417ad9b',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A7QABPARW/vecteezy_rgb-illuminated-white-gaming-keyboard-top-view_52855142.png?pub_secret=3d3c0544c6',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6EHQKAUF/vecteezy_white-rgb-mechanical-gaming-keyboard-with-cable_52855199.png?pub_secret=3e689005bb'
+            ] if cat == 'Keyboard' %>
+            <% images_for_mouse = [
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A7QDJR56C/vecteezy_computer-mouse-isolated-on-a-transparent-background_47833235.png?pub_secret=206f7975e4',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6PNNB8HH/vecteezy_ai-generated-computer-mouse-png-isolated-on-transparent_36113136.png?pub_secret=5328baa9cd',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6ZMVP5RA/vecteezy_ai-generated-computer-mouse-png-isolated-on-transparent_36112700.png?pub_secret=4a6941278c',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6ELUDWQP/vecteezy_ai-generated-computer-mouse-png-isolated-on-transparent_36112693.png?pub_secret=8a1b07b884'
+            ] if cat == 'Mouse' %>
+            <% images_for_monitor = [
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A793DR88Z/10740609.png?pub_secret=edffb80446',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6ZNZN99A/3d-monitor-curved-free-png.webp?pub_secret=9d8649f57c',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6W5FN41Y/vecteezy_3d-monitor-for-office_53739745.png?pub_secret=6a16537f48',
+              'https://files.slack.com/files-pri/T09V59WQY1E-F0A6EN1NVP1/vecteezy_sleek-black-computer-monitor-with-vibrant-red-abstract_56609224.png?pub_secret=5e30e2cd74'
+            ] if cat == 'Monitor' %>
+            <% variants.each_with_index do |(label_text, key), variant_idx| %>
+              <% img_src = (
+                (cat == 'Keyboard' && images_for_keyboard && images_for_keyboard[variant_idx]) ||
+                (cat == 'Mouse' && images_for_mouse && images_for_mouse[variant_idx]) ||
+                (cat == 'Monitor' && images_for_monitor && images_for_monitor[variant_idx]) ||
+                '/images/signin/hackclub.svg'
+              ) %>
+              <% amount_map = { 'standard' => 50, 'quality' => 110, 'advanced' => 170, 'professional' => 230 } %>
+              <% grant_amount = amount_map[key] || 0 %>
+              <% bolts_map = { 'standard' => 500, 'quality' => 1100, 'advanced' => 1700, 'professional' => 2300 } %>
+              <% base_bolts = bolts_map[key] || 0 %>
+              <% price = base_bolts %>
+              <% desc_text = "This item provide a #{grant_amount}$ HCB card grant to spend on a #{cat}" %>
+              <div class="shop-variant">
+                <div class="shop-variant__thumb">
+                  <img src="<%= img_src %>" alt="<%= label_text %>">
+                </div>
 
-      <% if @shop_items.any? %>
-        <div class="shop-grid">
-          <% @shop_items.each do |item| %>
-            <div class="shop-card card" data-id="<%= item.id %>" data-cost="<%= item.cost %>" data-category="<%= item.status || 'standard' %>">
-              <% if item.image_url.present? %>
-                <img class="shop-card__image" src="<%= item.image_url %>" alt="<%= item.name %>">
-              <% else %>
-                <div class="shop-card__image shop-card__image--placeholder">🪛</div>
-              <% end %>
-              
-              <div class="shop-card__body">
-                <h3 class="shop-card__title"><%= item.name.presence || "Unnamed Item" %></h3>
-                <p class="shop-card__description muted"><%= item.description.presence || "No description" %></p>
-                
-                <% item_cost = item.cost || 0 %>
-                <div class="shop-card__footer">
-                  <div>
-                    <span class="shop-card__price"><%= item_cost.to_i %> 🪛</span>
-                    <% if item.status.present? %>
-                      <span class="pill" style="background: #e8f0e8; color: #4a7c59; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; margin-left: 0.5rem;">
-                        <%= item.status.capitalize %>
-                      </span>
-                    <% end %>
-                  </div>
-                  <%= form_with url: purchase_path, method: :post, local: true, class: "purchase-form" do %>
-                    <input type="hidden" name="item_id" value="<%= item.id %>">
-                    <button type="submit" class="btn btn--primary"
-                            <%= 'disabled' if @current_user.balance < item_cost %>>
-                      <%= @current_user.balance >= item_cost ? 'Purchase' : 'Not enough screws' %>
-                    </button>
-                  <% end %>
+                <div class="shop-variant__name"><%= label_text %></div>
+
+                <div class="shop-variant__meta">
+                  <button type="button"
+                          class="shop-variant__priceBox price-btn"
+                          data-item-id="<%= item&.id %>"
+                          data-name="<%= cat %>"
+                          data-variant="<%= key %>"
+                          data-display="<%= label_text %>"
+                          data-price="<%= price %>"
+                          data-grant="<%= grant_amount %>"
+                          data-bolts="<%= base_bolts %>"
+                          data-img="<%= img_src %>"
+                          data-desc="<%= desc_text.to_s.gsub('\"','&quot;') %>">
+                    <span class="shop-variant__price"><%= price %></span>
+                    <img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A793FGJ2V/bolt.png?pub_secret=7acc4044c5" alt="bolts" class="bolt-icon">
+                  </button>
+                  <span class="shop-variant__pill shop-variant__pill--<%= key %>"><%= label_text %></span>
                 </div>
+
+                <!-- Purchase action moved to modal -->
               </div>
-            </div>
-          <% end %>
-        </div>
-      <% else %>
-        <div class="card" style="text-align: center; padding: 40px;">
-          <p class="muted">No items in the shop yet. Check back soon!</p>
+            <% end %>
+          </div>
         </div>
       <% end %>
     </section>
   </div>
+  <div class="card" style="margin-top: 12px; background: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 10px; text-align: center;">
+    Working progress! We're building the shop page, more items will be added soon!
+  </div>
 </main>
 
-<style>
-  .shop-sidebar {
-    height: fit-content;
-    position: sticky;
-    top: 20px;
-  }
-
-  .shop-category-btn {
-    background: #f5f5f3;
-    border: none;
-    color: #1f2430;
-    padding: 12px 16px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 0.95rem;
-    transition: all 0.2s ease;
-    text-align: left;
-  }
-
-  .shop-category-btn:hover {
-    background: #efefeb;
-  }
-
-  .shop-category-btn--active {
-    background: #d6a161;
-    color: white;
-  }
-
-  .shop-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1.5rem;
-  }
-
-  .shop-card {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  .shop-card__image {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-  }
-
-  .shop-card__image--placeholder {
-    width: 100%;
-    height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #f0f0f0;
-    font-size: 4rem;
-  }
-
-  .shop-card__body {
-    padding: 1rem;
-  }
-
-  .shop-card__title {
-    margin: 0 0 0.5rem 0;
-    font-size: 1rem;
-    color: #1f2430;
-  }
-
-  .shop-card__description {
-    margin: 0 0 1rem 0;
-    font-size: 0.9rem;
-    line-height: 1.4;
-  }
-
-  .shop-card__footer {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid #f0f0f0;
-  }
-
-  .shop-card__price {
-    font-weight: 700;
-    color: #f25f2c;
-    font-size: 1.1rem;
-  }
-
-  .purchase-form {
-    display: contents;
-  }
-
-  @media (max-width: 768px) {
-    main.container {
-      display: block !important;
-    }
-
-    .shop-sidebar {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-      gap: 0.5rem;
-      position: static;
-      margin-bottom: 2rem;
-    }
-  }
-</style>
-
-<script>
-  const categoryBtns = document.querySelectorAll('.shop-category-btn');
-  const shopCards = document.querySelectorAll('.shop-card');
-
-  categoryBtns.forEach(btn => {
-    btn.addEventListener('click', () => {
-      categoryBtns.forEach(b => b.classList.remove('shop-category-btn--active'));
-      btn.classList.add('shop-category-btn--active');
-
-      const selectedCategory = btn.dataset.category;
-
-      shopCards.forEach(card => {
-        const cardCategory = card.dataset.category;
-        if (selectedCategory === 'all' || cardCategory === selectedCategory) {
-          card.style.display = 'block';
-        } else {
-          card.style.display = 'none';
-        }
-      });
-    });
-  });
-</script>
+<!-- Item Modal -->
+<div id="shop-item-modal" class="modal modal--hidden" data-user-balance="<%= @current_user.balance.to_i %>">
+  <div class="modal__backdrop"></div>
+  <div class="modal__content card">
+    <div class="modal__header">
+      <h3 id="shop-modal-title" class="modal__title">Item</h3>
+      <button type="button" class="modal__close" aria-label="Close">&times;</button>
+    </div>
+    <div class="shop-modal__body">
+      <img id="shop-modal-image" class="shop-modal__image" src="/images/signin/hackclub.svg" alt="item">
+      <p id="shop-modal-desc" class="shop-modal__desc muted">Description</p>
+      <div class="shop-modal__qty" style="display:flex;align-items:center;gap:8px;">
+        <label for="shop-modal-qty" class="muted">Quantity</label>
+        <input id="shop-modal-qty" type="number" min="1" step="1" value="1" style="width:80px;">
+      </div>
+      <div class="shop-modal__price">
+        <span id="shop-modal-price">0</span>
+        <img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A793FGJ2V/bolt.png?pub_secret=7acc4044c5" alt="bolts" class="bolt-icon">
+      </div>
+      <div id="shop-modal-warning" style="display:none;background:#fdecea;border:1px solid #f5c2c7;color:#842029;padding:8px 12px;border-radius:8px;">
+        Not enough bolts to purchase. You need <strong><span id="shop-modal-shortage">0</span></strong> more.
+      </div>
+      <%= form_with url: purchase_path, method: :post, local: true, id: "shop-modal-form" do %>
+        <input type="hidden" name="item_id" id="shop-modal-item-id" value="">
+        <input type="hidden" name="variant" id="shop-modal-variant" value="">
+        <button id="shop-modal-buy" type="submit" class="btn btn--primary btn--block">Purchase</button>
+      <% end %>
+    </div>
+  </div>
+  <style>
+    .shop-modal__body { display: grid; gap: 12px; }
+    .shop-modal__image { width: 100%; height: 180px; border-radius: 10px; object-fit: cover; background: var(--paper-alt); }
+    .shop-modal__price { display: inline-flex; align-items: center; gap: 8px; background: #efd1a4; padding: 8px 12px; border-radius: 12px; width: fit-content; }
+  </style>
+</div>
diff --git a/app/views/pages/signin.html.erb b/app/views/pages/signin.html.erb
index 05b0ec3..b456fcb 100644
--- a/app/views/pages/signin.html.erb
+++ b/app/views/pages/signin.html.erb
@@ -2,16 +2,25 @@
 <% content_for :page, "signin" %>
 
 <div class="signin-page">
-  <img src="/images/signin/hackclub.svg" class="signin-flag" alt="Hack Club 2025">
+  <a href="https://hackclub.com/" target="_blank" rel="noopener">
+    <img src="/images/signin/hackclub.svg" class="signin-flag" alt="Hack Club 2025">
+  </a>
   
   <div class="signin-content">
     <img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A6LSXCXPF/image.png?pub_secret=dc0d11081a" class="signin-crane-text" alt="Reboot">
     
-    <p class="signin-subtitle">Restore old projects --> upgrade your desktop setup!</p>
-    
     <%= form_tag("/auth/hack_club", method: :post) do %>
-      <button type="submit" class="signin-btn">Start Now</button>
+      <button type="submit" class="signin-btn" style="background: transparent; padding: 0; box-shadow: none; border: none;">
+        <img
+          src="https://files.slack.com/files-pri/T09V59WQY1E-F0A7999BL3T/startbutton.png?pub_secret=346938b95a"
+          alt="Start Now"
+          class="signin-start-img"
+          onerror="this.onerror=null;this.src='/img/signin/startButton.PNG';"
+        >
+      </button>
     <% end %>
+    
+    <p class="signin-subtitle">Restore old projects --> upgrade your desktop setup!</p>
   </div>
 
   <img src="/images/signin/animal.png" class="signin-mole" alt="Mole">
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index c7c857f..3d7ef0f 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -13,7 +13,10 @@
       <% end %>
     </span>
     <button id="signout-btn" class="btn btn--ghost">Sign out</button>
-    <div class="coins" title="Your screws"><%= @current_user&.balance&.to_i || 0 %> 🪛</div>
+    <div class="coins" title="Your screws" style="display:inline-flex;align-items:center;gap:6px;">
+      <%= @current_user&.balance&.to_i || 0 %>
+      <img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A793FGJ2V/bolt.png?pub_secret=7acc4044c5" alt="bolts" style="width:18px;height:18px;">
+    </div>
   </div>
   
   <style>
diff --git a/db/schema.rb b/db/schema.rb
index dc736dd..d7e21df 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -97,9 +97,7 @@
     t.string "last_name"
     t.date "birthday"
     t.decimal "balance", precision: 10, scale: 2, default: "0.0"
-    t.string "hackatime_uid"
     t.index ["email"], name: "index_users_on_email", unique: true
-    t.index ["hackatime_uid"], name: "index_users_on_hackatime_uid", unique: true
     t.index ["provider", "uid"], name: "index_users_on_provider_and_uid", unique: true
     t.index ["role"], name: "index_users_on_role"
   end
diff --git a/img/bolt.png b/img/bolt.png
new file mode 100644
index 0000000..498e457
Binary files /dev/null and b/img/bolt.png differ
diff --git a/img/signin/startButton.PNG b/img/signin/startButton.PNG
new file mode 100644
index 0000000..1a0c4bd
Binary files /dev/null and b/img/signin/startButton.PNG differ
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 845df34..78b066e 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -66,6 +66,121 @@
     });
   }
 
+  /**
+   * Shop page interactions:
+   * - Clicking a category item on the left shows its detail panel on the right
+   * - Visually toggles the active state
+   */
+  function initShopPage() {
+    const buttons = document.querySelectorAll(".shop-category-item");
+    const panels = document.querySelectorAll(".shop-item-detail");
+    if (!buttons.length || !panels.length) return;
+
+    // Modal elements
+    const modal = document.getElementById("shop-item-modal");
+    const modalClose = modal?.querySelector(".modal__close");
+    const modalBackdrop = modal?.querySelector(".modal__backdrop");
+    const modalTitle = document.getElementById("shop-modal-title");
+    const modalImage = document.getElementById("shop-modal-image");
+    const modalDesc = document.getElementById("shop-modal-desc");
+    const modalPrice = document.getElementById("shop-modal-price");
+    const modalQty = document.getElementById("shop-modal-qty");
+    const modalWarning = document.getElementById("shop-modal-warning");
+    const modalShortage = document.getElementById("shop-modal-shortage");
+    const modalForm = document.getElementById("shop-modal-form");
+    const modalItemId = document.getElementById("shop-modal-item-id");
+    const modalVariant = document.getElementById("shop-modal-variant");
+    const modalBuy = document.getElementById("shop-modal-buy");
+    const userBalance = Number(modal?.dataset.userBalance || 0);
+
+    function activate(targetId) {
+      buttons.forEach((b) => b.classList.remove("is-active"));
+      panels.forEach((p) => p.classList.remove("is-active"));
+      const btn = Array.from(buttons).find((b) => b.dataset.target === targetId);
+      const panel = document.getElementById(targetId);
+      if (btn) btn.classList.add("is-active");
+      if (panel) panel.classList.add("is-active");
+    }
+
+    function updateModalTotals() {
+      if (!modal) return;
+      const baseBolts = Number(modal.dataset.baseBolts || 0);
+      const grant = Number(modal.dataset.grant || 0);
+      const name = modal.dataset.itemName || "Item";
+      const qty = Math.max(1, Number(modalQty?.value || 1));
+      const totalBolts = baseBolts * qty;
+      if (modalPrice) modalPrice.textContent = String(totalBolts);
+      if (modalDesc) {
+        modalDesc.textContent = `This item provide a ${grant}$ HCB card grant to spend on a ${name}. Quantity: ${qty}.`;
+      }
+      // enable/disable buy based on computed total bolts
+      const canBuy = Boolean(modalItemId?.value) && userBalance >= totalBolts;
+      if (modalBuy) modalBuy.disabled = !canBuy;
+      if (modalWarning) {
+        const shortage = Math.max(0, totalBolts - userBalance);
+        modalWarning.style.display = canBuy ? "none" : "block";
+        if (modalShortage) modalShortage.textContent = String(shortage);
+      }
+    }
+
+    function openModal(data) {
+      if (!modal) return;
+      const variantLower = (data.variant || "").toLowerCase();
+      const display = data.display || (data.name ? `${data.name}_${variantLower}` : 'Item');
+      modalTitle.textContent = display;
+      modalImage.src = data.img || "/images/signin/hackclub.svg";
+      // store computation inputs on modal dataset
+      modal.dataset.baseBolts = String(Number(data.bolts || 0));
+      modal.dataset.grant = String(Number(data.grant || 0));
+      modal.dataset.itemName = data.name || "Item";
+      // reset qty to 1 each open
+      if (modalQty) modalQty.value = "1";
+      // compute totals, description, and buy state
+      updateModalTotals();
+      modalItemId.value = data.itemId || "";
+      modalVariant.value = data.variant || "";
+      modal.classList.remove("modal--hidden");
+    }
+
+    function closeModal() {
+      if (!modal) return;
+      modal.classList.add("modal--hidden");
+    }
+
+    document.addEventListener("click", (e) => {
+      const btn = e.target.closest(".price-btn");
+      if (btn) {
+        const data = {
+          itemId: btn.dataset.itemId,
+          name: btn.dataset.name,
+          variant: btn.dataset.variant,
+          display: btn.dataset.display,
+          price: Number(btn.dataset.price || 0),
+          grant: Number(btn.dataset.grant || 0),
+          bolts: Number(btn.dataset.bolts || 0),
+          img: btn.dataset.img,
+          desc: btn.dataset.desc,
+        };
+        openModal(data);
+      }
+    });
+
+    // React to quantity changes
+    modalQty?.addEventListener("input", updateModalTotals);
+
+    modalClose?.addEventListener("click", closeModal);
+    modalBackdrop?.addEventListener("click", closeModal);
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") closeModal();
+    });
+
+    buttons.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        activate(btn.dataset.target);
+      });
+    });
+  }
+
   // Page initialization
   document.addEventListener("DOMContentLoaded", () => {
     initSignout();
@@ -74,5 +189,8 @@
     if (page === "projects") {
       initProjectModal();
     }
+    if (page === "shop") {
+      initShopPage();
+    }
   });
 })();
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index d353727..dc61f4e 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -547,6 +547,223 @@ a.project-row:hover {
    font-size: 13px;
 }
 
+/* New Shop layout (category left, detail right) */
+.shop-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 20px;
+}
+.shop-heading {
+  font-family: 'Jolly Lodger', cursive;
+  font-size: 28px;
+  margin: 0 0 10px;
+}
+.shop-categories {
+  position: sticky;
+  top: 20px;
+  height: fit-content;
+}
+.shop-category-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.shop-category-item {
+  width: 100%;
+  text-align: left;
+  background: #f5f5f3;
+  border: 1px solid var(--border);
+  color: var(--ink);
+  padding: 12px 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 18px;
+  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
+}
+.shop-category-item:hover {
+  background: #efefeb;
+  box-shadow: 0 6px 12px var(--shadow);
+  transform: translateY(-1px);
+}
+.shop-category-item.is-active {
+  background: #e8dcc8;
+  border-color: var(--gold);
+  box-shadow: 0 0 0 2px rgba(214, 161, 97, 0.2);
+}
+.shop-items {
+  padding: 16px;
+}
+.shop-items__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.shop-cart {
+  font-size: 0;
+}
+/* (Removed rules button animation) */
+.shop-item-detail {
+  display: none;
+  padding: 8px 0 0;
+  margin-top: 8px;
+}
+.shop-item-detail.is-active {
+  display: block;
+}
+.shop-item-title {
+  margin: 0 0 6px;
+  font-size: 28px;
+}
+.shop-item-desc {
+  margin: 0 0 12px;
+  color: var(--ink-muted);
+}
+.shop-item-image {
+  width: 100%;
+  height: 180px;
+  border-radius: 10px;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  object-fit: cover;
+}
+.shop-item-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+}
+.shop-item-image--placeholder {
+  background: linear-gradient(135deg, var(--paper-alt), #f0f0ee);
+}
+.shop-item-detail__variants {
+  display: grid;
+  gap: 12px;
+}
+.shop-variant {
+  display: grid;
+  grid-template-columns: 120px 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--paper);
+  border: 1px solid var(--border);
+}
+.shop-variant__thumb {
+  width: 120px;
+  height: 90px;
+  border-radius: 10px;
+  background: var(--paper-alt);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.shop-variant__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.shop-variant__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
+  justify-self: end;
+}
+.shop-variant__name {
+  font-family: 'Jolly Lodger', cursive;
+  font-size: 22px;
+  color: var(--ink);
+}
+.shop-variant__price {
+  font-weight: 800;
+  color: #e05a2a;
+  font-size: 20px;
+}
+.shop-variant__priceBox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #efd1a4;
+  color: #3a2a18;
+  padding: 8px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+}
+.bolt-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  vertical-align: middle;
+}
+.bolt-svg {
+  width: 20px;
+  height: 20px;
+}
+.shop-cart .bolt-svg {
+  width: 24px;
+  height: 24px;
+}
+.shop-cart .bolt-icon {
+  width: 24px;
+  height: 24px;
+}
+.shop-variant__pill {
+  justify-self: start;
+  padding: 6px 10px;
+  border-radius: 10px;
+  font-weight: 800;
+  font-size: 16px;
+}
+.shop-variant__pill--economic {
+  background: #e7f4e7;
+  color: #326f3d;
+}
+.shop-variant__pill--quality {
+  background: #e5f2ff;
+  color: #1e4f7a;
+}
+.shop-variant__pill--standard {
+  background: #f3ecd8;
+  color: #6b4f1d;
+}
+.shop-variant__pill--advanced {
+  background: #f0e7ff;
+  color: #4e2f91;
+}
+.shop-variant__pill--professional {
+  background: #e6f6ef;
+  color: #0c6b4a;
+}
+
+@media (max-width: 900px) {
+  .shop-layout {
+    grid-template-columns: 1fr;
+  }
+  .shop-categories {
+    position: static;
+  }
+  .shop-item-detail {
+    grid-template-columns: 1fr;
+  }
+  .shop-variant {
+    grid-template-columns: 100px 1fr auto;
+  }
+  .shop-variant .purchase-form {
+    grid-column: 1 / -1;
+  }
+}
 /* Purchases */
 .purchases-list {
   display: flex;
@@ -688,7 +905,8 @@ a.project-row:hover {
 
 /* Signin Page */
 [data-page="signin"] {
-  background: transparent;
+  background: var(--bg) url('/images/signin/background.PNG') no-repeat center center fixed;
+  background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }
@@ -706,8 +924,8 @@ a.project-row:hover {
 .signin-flag {
   position: absolute;
   top: 16px;
-  left: 16px;
-  width: 120px;
+  left: 0px;
+  width: 200px;
   z-index: 10;
 }
 
@@ -721,14 +939,21 @@ a.project-row:hover {
 }
 
 .signin-crane-text {
-   width: clamp(300px, 80vw, 800px);
+   width: clamp(550px, 90vw, 1100px);
    height: auto;
-   margin-bottom: 20px;
+   margin-bottom: 0px;
    order: 1;
 }
 
+/* Start button image */
+.signin-start-img {
+  width: clamp(100px, 22vw, 200px);
+  height: auto;
+}
+
 .signin-content form {
-   order: 4;
+   order: 2;
+   margin-top: -150px;
 }
 
 .signin-subtitle {
@@ -750,7 +975,7 @@ a.project-row:hover {
    color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
-   margin-top: 16px;
+   margin-top: 0;
 }
 
 .signin-btn:hover {
@@ -761,7 +986,7 @@ a.project-row:hover {
    position: absolute;
    bottom: 0;
    left: 0;
-   width: clamp(150px, 20vw, 280px);
+   width: clamp(400px, 20vw, 280px);
    z-index: 2;
 }