diff --git a/site/pfp-updates/index.html b/site/pfp-updates/index.html
index 62b4f25..1add759 100644
--- a/site/pfp-updates/index.html
+++ b/site/pfp-updates/index.html
@@ -47,7 +47,7 @@
 
             .container {
                 display: grid;
-                grid-template-columns: 300px 1fr;
+                grid-template-columns: 350px 1fr;
                 gap: 20px;
                 margin-bottom: 20px;
             }
@@ -59,7 +59,7 @@
                 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                 height: fit-content;
                 overflow-y: auto;
-                overflow-x: hidden;
+                overflow-x: auto;
                 max-height: 90vh;
                 word-wrap: break-word;
                 overflow-wrap: break-word;
@@ -448,286 +448,300 @@
                 </div>
             </div>
 
-            <div class="timeline-area">
-                <div class="timeline-selector">
-                    <h3>Weather Timelines</h3>
-                    <div class="timeline-info">
-                        Create different timelines for various weather
-                        conditions. Each timeline defines how your profile
-                        picture should look throughout the day.
-                    </div>
-
-                    <div class="new-timeline">
-                        <input
-                            type="text"
-                            id="newTimelineName"
-                            placeholder="Timeline name (e.g. sunny, rainy, cloudy)"
-                            style="flex: 1; padding: 8px"
-                        />
-                        <button
-                            onclick="createTimeline()"
-                            class="btn btn-success"
-                        >
-                            Create
-                        </button>
-                    </div>
-
-                    <div class="timeline-tabs" id="timelineTabs">
-                        <div class="timeline-tab active" data-timeline="sunny">
-                            Sunny
+            <div class="main-area">
+                <div class="timeline-area">
+                    <div class="timeline-selector">
+                        <h3 style="margin-top: 0">Weather Timelines</h3>
+                        <div class="timeline-info">
+                            Create different timelines for various weather
+                            conditions. Each timeline defines how your profile
+                            picture should look throughout the day.
                         </div>
-                    </div>
-
-                    <div style="margin: 10px 0">
-                        <button
-                            onclick="duplicateTimeline()"
-                            class="btn btn-secondary"
-                        >
-                            Duplicate Current
-                        </button>
-                        <button
-                            onclick="deleteTimeline()"
-                            class="btn btn-danger"
-                        >
-                            Delete Current
-                        </button>
-                    </div>
-                </div>
 
-                <div>
-                    <h4>
-                        24-Hour Timeline:
-                        <span id="currentTimelineName">Sunny</span>
-                    </h4>
-                    <div class="hour-labels">
-                        <div class="hour-label">0</div>
-                        <div class="hour-label">1</div>
-                        <div class="hour-label">2</div>
-                        <div class="hour-label">3</div>
-                        <div class="hour-label">4</div>
-                        <div class="hour-label">5</div>
-                        <div class="hour-label">6</div>
-                        <div class="hour-label">7</div>
-                        <div class="hour-label">8</div>
-                        <div class="hour-label">9</div>
-                        <div class="hour-label">10</div>
-                        <div class="hour-label">11</div>
-                        <div class="hour-label">12</div>
-                        <div class="hour-label">13</div>
-                        <div class="hour-label">14</div>
-                        <div class="hour-label">15</div>
-                        <div class="hour-label">16</div>
-                        <div class="hour-label">17</div>
-                        <div class="hour-label">18</div>
-                        <div class="hour-label">19</div>
-                        <div class="hour-label">20</div>
-                        <div class="hour-label">21</div>
-                        <div class="hour-label">22</div>
-                        <div class="hour-label">23</div>
-                    </div>
-                    <div class="timeline-grid" id="timelineGrid">
-                        <!-- Hours 0-23 will be generated here -->
-                    </div>
-
-                    <div style="margin-top: 20px">
-                        <h4>Bulk Actions</h4>
-                        <div
-                            style="
-                                display: flex;
-                                gap: 10px;
-                                flex-wrap: wrap;
-                                margin-bottom: 15px;
-                            "
-                        >
+                        <div class="new-timeline">
+                            <input
+                                type="text"
+                                id="newTimelineName"
+                                placeholder="Timeline name (e.g. sunny, rainy, cloudy)"
+                                style="flex: 1; padding: 8px"
+                            />
                             <button
-                                onclick="loadPreset('dawn', [5,6,7])"
-                                class="btn btn-secondary"
+                                onclick="createTimeline()"
+                                class="btn btn-success"
                             >
-                                Dawn (5-7)
+                                Create
                             </button>
-                            <button
-                                onclick="loadPreset('morning', [8,9,10,11])"
-                                class="btn btn-secondary"
-                            >
-                                Morning (8-11)
-                            </button>
-                            <button
-                                onclick="loadPreset('afternoon', [12,13,14,15,16])"
-                                class="btn btn-secondary"
+                        </div>
+
+                        <div class="timeline-tabs" id="timelineTabs">
+                            <div
+                                class="timeline-tab active"
+                                data-timeline="sunny"
                             >
-                                Afternoon (12-16)
-                            </button>
+                                Sunny
+                            </div>
+                        </div>
+
+                        <div style="margin: 10px 0">
                             <button
-                                onclick="loadPreset('sunset', [17,18,19])"
+                                onclick="duplicateTimeline()"
                                 class="btn btn-secondary"
                             >
-                                Sunset (17-19)
+                                Duplicate Current
                             </button>
                             <button
-                                onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"
-                                class="btn btn-secondary"
+                                onclick="deleteTimeline()"
+                                class="btn btn-danger"
                             >
-                                Night (20-4)
+                                Delete Current
                             </button>
                         </div>
+                    </div>
 
-                        <div
-                            style="
-                                border: 1px solid #ddd;
-                                padding: 10px;
-                                border-radius: 4px;
-                                background: #f8f9fa;
-                            "
-                        >
-                            <h5 style="margin: 0 0 10px 0">Custom Range</h5>
+                    <div>
+                        <h4>
+                            24-Hour Timeline:
+                            <span id="currentTimelineName">Sunny</span>
+                        </h4>
+                        <div class="hour-labels">
+                            <div class="hour-label">0</div>
+                            <div class="hour-label">1</div>
+                            <div class="hour-label">2</div>
+                            <div class="hour-label">3</div>
+                            <div class="hour-label">4</div>
+                            <div class="hour-label">5</div>
+                            <div class="hour-label">6</div>
+                            <div class="hour-label">7</div>
+                            <div class="hour-label">8</div>
+                            <div class="hour-label">9</div>
+                            <div class="hour-label">10</div>
+                            <div class="hour-label">11</div>
+                            <div class="hour-label">12</div>
+                            <div class="hour-label">13</div>
+                            <div class="hour-label">14</div>
+                            <div class="hour-label">15</div>
+                            <div class="hour-label">16</div>
+                            <div class="hour-label">17</div>
+                            <div class="hour-label">18</div>
+                            <div class="hour-label">19</div>
+                            <div class="hour-label">20</div>
+                            <div class="hour-label">21</div>
+                            <div class="hour-label">22</div>
+                            <div class="hour-label">23</div>
+                        </div>
+                        <div class="timeline-grid" id="timelineGrid">
+                            <!-- Hours 0-23 will be generated here -->
+                        </div>
+
+                        <div style="margin-top: 20px">
+                            <h4>Bulk Actions</h4>
                             <div
                                 style="
                                     display: flex;
-                                    gap: 5px;
-                                    align-items: center;
-                                    margin-bottom: 10px;
+                                    gap: 10px;
+                                    flex-wrap: wrap;
+                                    margin-bottom: 15px;
                                 "
                             >
-                                <label style="font-size: 12px">From:</label>
-                                <input
-                                    type="number"
-                                    id="rangeStart"
-                                    min="0"
-                                    max="23"
-                                    value="9"
-                                    style="width: 50px; padding: 4px"
-                                />
-                                <label style="font-size: 12px">To:</label>
-                                <input
-                                    type="number"
-                                    id="rangeEnd"
-                                    min="0"
-                                    max="23"
-                                    value="11"
-                                    style="width: 50px; padding: 4px"
-                                />
                                 <button
-                                    onclick="applyCurrentToRange()"
-                                    class="btn btn-success"
-                                    style="font-size: 11px"
+                                    onclick="loadPreset('dawn', [5,6,7])"
+                                    class="btn btn-secondary"
+                                >
+                                    Dawn (5-7)
+                                </button>
+                                <button
+                                    onclick="loadPreset('morning', [8,9,10,11])"
+                                    class="btn btn-secondary"
                                 >
-                                    Apply Current
+                                    Morning (8-11)
+                                </button>
+                                <button
+                                    onclick="loadPreset('afternoon', [12,13,14,15,16])"
+                                    class="btn btn-secondary"
+                                >
+                                    Afternoon (12-16)
+                                </button>
+                                <button
+                                    onclick="loadPreset('sunset', [17,18,19])"
+                                    class="btn btn-secondary"
+                                >
+                                    Sunset (17-19)
+                                </button>
+                                <button
+                                    onclick="loadPreset('night', [20,21,22,23,0,1,2,3,4])"
+                                    class="btn btn-secondary"
+                                >
+                                    Night (20-4)
                                 </button>
                             </div>
-                            <div style="font-size: 11px; color: #666">
-                                Uses current gradient & intensity settings for
-                                the specified hour range
+
+                            <div
+                                style="
+                                    border: 1px solid #ddd;
+                                    padding: 10px;
+                                    border-radius: 4px;
+                                    background: #f8f9fa;
+                                "
+                            >
+                                <h5 style="margin: 0 0 10px 0">Custom Range</h5>
+                                <div
+                                    style="
+                                        display: flex;
+                                        gap: 5px;
+                                        align-items: center;
+                                        margin-bottom: 10px;
+                                    "
+                                >
+                                    <label style="font-size: 12px">From:</label>
+                                    <input
+                                        type="number"
+                                        id="rangeStart"
+                                        min="0"
+                                        max="23"
+                                        value="9"
+                                        style="width: 50px; padding: 4px"
+                                    />
+                                    <label style="font-size: 12px">To:</label>
+                                    <input
+                                        type="number"
+                                        id="rangeEnd"
+                                        min="0"
+                                        max="23"
+                                        value="11"
+                                        style="width: 50px; padding: 4px"
+                                    />
+                                    <button
+                                        onclick="applyCurrentToRange()"
+                                        class="btn btn-success"
+                                        style="font-size: 11px"
+                                    >
+                                        Apply Current
+                                    </button>
+                                </div>
+                                <div style="font-size: 11px; color: #666">
+                                    Uses current gradient & intensity settings
+                                    for the specified hour range
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
 
-        <div id="renderGallery" style="margin-top: 20px">
-            <h3>🖼️ Render Gallery</h3>
-            <div
-                style="
-                    background: white;
-                    padding: 20px;
-                    border-radius: 8px;
-                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-                "
-            >
-                <div
-                    style="
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        margin-bottom: 15px;
-                        flex-wrap: wrap;
-                        gap: 10px;
-                    "
-                >
-                    <div id="galleryInfo" style="font-size: 14px; color: #666">
-                        Ready to render timelines
-                    </div>
-                    <div style="display: flex; gap: 10px">
-                        <button
-                            onclick="renderAllTimelines()"
-                            class="btn btn-success"
-                        >
-                            🎨 Render All
-                        </button>
-                        <button
-                            onclick="downloadAllRendered()"
-                            class="btn btn-primary"
-                            id="downloadAllBtn"
-                            disabled
-                        >
-                            💾 Download ZIP
-                        </button>
-                        <button onclick="clearGallery()" class="btn btn-danger">
-                            🗑️ Clear Gallery
-                        </button>
-                    </div>
-                </div>
-
-                <div
-                    id="bulkProgress"
-                    style="margin-bottom: 15px; display: none"
-                >
+                <div id="renderGallery" style="margin-top: 20px">
                     <div
                         style="
-                            background: #e9ecef;
-                            border-radius: 4px;
-                            overflow: hidden;
+                            background: white;
+                            padding: 20px;
+                            padding-top: 5px;
+                            border-radius: 8px;
+                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                         "
                     >
+                        <h3>🖼️ Render Gallery</h3>
+
                         <div
-                            id="progressBar"
                             style="
-                                background: #28a745;
-                                height: 20px;
-                                width: 0%;
-                                transition: width 0.3s;
+                                display: flex;
+                                justify-content: space-between;
+                                align-items: center;
+                                margin-bottom: 15px;
+                                flex-wrap: wrap;
+                                gap: 10px;
                             "
-                        ></div>
-                    </div>
-                    <div
-                        id="progressText"
-                        style="
-                            font-size: 12px;
-                            text-align: center;
-                            margin-top: 5px;
-                        "
-                    >
-                        0/0
-                    </div>
-                </div>
+                        >
+                            <div
+                                id="galleryInfo"
+                                style="font-size: 14px; color: #666"
+                            >
+                                Ready to render timelines
+                            </div>
+                            <div style="display: flex; gap: 10px">
+                                <button
+                                    onclick="renderAllTimelines()"
+                                    class="btn btn-success"
+                                >
+                                    🎨 Render All
+                                </button>
+                                <button
+                                    onclick="downloadAllRendered()"
+                                    class="btn btn-primary"
+                                    id="downloadAllBtn"
+                                    disabled
+                                >
+                                    💾 Download ZIP
+                                </button>
+                                <button
+                                    onclick="clearGallery()"
+                                    class="btn btn-danger"
+                                >
+                                    🗑️ Clear Gallery
+                                </button>
+                            </div>
+                        </div>
 
-                <div
-                    id="galleryContent"
-                    style="
-                        display: grid;
-                        grid-template-columns: repeat(
-                            auto-fill,
-                            minmax(120px, 1fr)
-                        );
-                        gap: 15px;
-                        min-height: 100px;
-                        border: 2px dashed #ddd;
-                        border-radius: 8px;
-                        padding: 20px;
-                        align-items: center;
-                        justify-content: center;
-                    "
-                >
-                    <div
-                        id="galleryPlaceholder"
-                        style="
-                            grid-column: 1 / -1;
-                            text-align: center;
-                            color: #999;
-                            font-style: italic;
-                        "
-                    >
-                        Click "Render All" to generate images and see them here
+                        <div
+                            id="bulkProgress"
+                            style="margin-bottom: 15px; display: none"
+                        >
+                            <div
+                                style="
+                                    background: #e9ecef;
+                                    border-radius: 4px;
+                                    overflow: hidden;
+                                "
+                            >
+                                <div
+                                    id="progressBar"
+                                    style="
+                                        background: #28a745;
+                                        height: 20px;
+                                        width: 0%;
+                                        transition: width 0.3s;
+                                    "
+                                ></div>
+                            </div>
+                            <div
+                                id="progressText"
+                                style="
+                                    font-size: 12px;
+                                    text-align: center;
+                                    margin-top: 5px;
+                                "
+                            >
+                                0/0
+                            </div>
+                        </div>
+
+                        <div
+                            id="galleryContent"
+                            style="
+                                display: grid;
+                                grid-template-columns: repeat(
+                                    auto-fill,
+                                    minmax(120px, 1fr)
+                                );
+                                gap: 15px;
+                                min-height: 100px;
+                                border: 2px dashed #ddd;
+                                border-radius: 8px;
+                                padding: 20px;
+                                align-items: center;
+                                justify-content: center;
+                            "
+                        >
+                            <div
+                                id="galleryPlaceholder"
+                                style="
+                                    grid-column: 1 / -1;
+                                    text-align: center;
+                                    color: #999;
+                                    font-style: italic;
+                                "
+                            >
+                                Click "Render All" to generate images and see
+                                them here
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>