diff --git a/css/stock_cards/calendarCard.css b/css/stock_cards/calendarCard.css
index aada9c8..7e78ba1 100755
--- a/css/stock_cards/calendarCard.css
+++ b/css/stock_cards/calendarCard.css
@@ -6,7 +6,7 @@
     font-weight: 500;
 }
 
-.calendarCard .month {
+.calendarCard .calenMonth {
     width: 100%;
     min-height: 25px;
 
@@ -26,11 +26,11 @@
     justify-content: center;
 }
 
-.subCards.plated .calendarCard .month {
+.subCards.plated .calendarCard .calenMonth {
     background: #0000007c;
 }
 
-.subCards:not(.darkModeOn).plated .calendarCard .month {
+.subCards:not(.darkModeOn).plated .calendarCard .calenMonth {
     background: #ffffff7c;
     color: black
 }
@@ -56,33 +56,157 @@
     transform: translateZ(10px);
 }
 
+/* Expanded view */
+
+.calendarCard.expanded .calenMonth,
 .calendarCard.expanded .calenDay,
-.calendarCard.expanded .calenDayNo,
-.calendarCard.expanded .month {
-    opacity: 0;
+.calendarCard.expanded .calenDayNo {
+    display: none;
 }
 
 .calendarCard.expanded {
-    background-color: transparent !important;
+    height: 287px !important;
 }
 
-.calendarCard .expView {
+.calendarCard .wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
     display: none;
+    /* background: #fff; */
+    border-radius: 10px;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+}
+
+.calendarCard.expanded .wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.wrapper .header {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+    padding-left: 10px;
+    margin-bottom: auto;
+
+    background: linear-gradient(to bottom, #fa4c5b, red);
+    color: white;
+}
+
+.wrapper .header p {
+    margin: 0;
+    padding: 0;
+}
+
+.header .icons {
+    display: flex;
+}
+
+.header .icons i {
+    height: 35px;
+    width: 35px;
+    color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 17px;
+    user-select: none;
+    border-radius: 50%;
+}
+
+body:has(.darkModeOn) .header .icons i {
+    color: rgba(255, 255, 255, 0.75);
+}
 
+.header .icons i:hover {
+    background-color: white;
+    color: rgba(0, 0, 0, 0.75) !important;
+}
+
+.header .current-date {
+    font-size: 22px;
+    font-weight: 600;
+}
+
+.calendar {
     width: 100%;
-    height: 100%;
-    background-color: purple;
+    box-sizing: border-box;
+    margin-top: auto;
+    padding: 5px;
+}
 
-    opacity: .75;
+.calendar ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+}
 
-    position: absolute;
+.calendar .days {
+    margin-bottom: 20px;
+}
+
+.calendar li {
+    color: rgba(0, 0, 0, 0.75);
+    width: calc(100% / 7);
+    aspect-ratio: 1/1;
+    font-size: 1.07rem;
+}
+
+body:has(.darkModeOn) .calendar li {
+    color: rgba(255, 255, 255, 1);
+}
+
+.days li.inactive {
+    opacity: .5;
+}
+
+.days li.active {
+    box-shadow: inset 0 0 0 2px rgb(0, 0, 0);
 }
 
-.calendarCard .expView::after {
-    content: "Calendar fullview";
+body:has(.darkModeOn) .days li.active {
+    box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
 }
 
+.calendar .weeks li {
+    font-size: 15px;
+    opacity: .75;
+    font-weight: 500;
+    height: 20.70835px;
+}
 
-.calendarCard.expanded .expView {
+.calendar .days li {
+    z-index: 1;
+    position: relative;
+    margin-top: 1px;
+    border-radius: 500px;
     display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* .days li::before {
+    position: absolute;
+    content: "";
+    left: 50%;
+    top: 50%;
+    height: 40px;
+    width: 40px;
+    z-index: -1;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: .15s;
+}
+*/
+
+.days li:hover {
+    opacity: 1;
+    color: rgba(0, 0, 0, 0.75) !important;
+    background-color: white !important;
 }
\ No newline at end of file
diff --git a/css/stock_cards/textCard.css b/css/stock_cards/textCard.css
index 86a1621..faa737e 100755
--- a/css/stock_cards/textCard.css
+++ b/css/stock_cards/textCard.css
@@ -68,6 +68,7 @@
     top: -2px !important;
     border-radius: 13px;
     background-color: white;
+    color: #000;
 }
 
 .textCard textarea {
diff --git a/css/stock_cards/youtubeBrowseCard.css b/css/stock_cards/youtubeBrowseCard.css
index f5d63ca..26e54a2 100755
--- a/css/stock_cards/youtubeBrowseCard.css
+++ b/css/stock_cards/youtubeBrowseCard.css
@@ -20,12 +20,11 @@
     left: 10px;
 }
 
-.darkModeOn .youtubeCard-browse.squareCard::before {
+body:has(.darkModeOn) .youtubeCard-browse.squareCard::before {
     color: white;
 }
 
-
-.darkModeOn .youtubeCard-browse {
+body:has(.darkModeOn) .youtubeCard-browse {
     background: #0F0F0F;
 }
 
@@ -53,7 +52,7 @@
 }
 
 .searchCont>i::after {
-    content: "";
+    /* content: ""; */
     width: 9px;
     height: 9px;
 
@@ -85,7 +84,7 @@
     opacity: 0;
 }
 
-.darkModeOn .youtubeCard-browse .searchCont .ytSearch {
+body:has(.darkModeOn) .youtubeCard-browse .searchCont .ytSearch {
     background-color: #212121;
     color: white;
 }
@@ -125,7 +124,7 @@
     transition: .15s;
 }
 
-.darkModeOn .youtubeCard-browse .browseBtns .browseBtn {
+body:has(.darkModeOn) .youtubeCard-browse .browseBtns .browseBtn {
     /* background-color: #212121; */
     color: white;
 }
@@ -136,11 +135,10 @@
     box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
 }
 
-.darkModeOn .youtubeCard-browse .browseBtns .browseBtn:hover {
+body:has(.darkModeOn) .youtubeCard-browse .browseBtns .browseBtn:hover {
     background-color: rgba(35, 35, 35, 0.5) !important;
 }
 
-
 .browseBtns .browseBtn::before {
     content: attr(data-btnLabel);
 
@@ -160,10 +158,53 @@
     background-color: rgba(0, 0, 0, 0.3);
 }
 
-.darkModeOn .youtubeCard-browse .browseBtns .browseBtn:not(:last-of-type)::after {
+body:has(.darkModeOn) .youtubeCard-browse .browseBtns .browseBtn:not(:last-of-type)::after {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+/* Expanded */
+
+.youtubeCard-browse.expanded {
+    background-image: unset !important;
+}
+
+.youtubeCard-browse.expanded .searchCont .ytSearch {
+    padding-left: 10px;
+    margin-top: 65px;
+}
+
+.youtubeCard-browse.expanded .searchCont i {
+    top: 10px;
+    color: transparent;
+    height: 40px;
+    width: 25%;
+
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.youtubeCard-browse.expanded .searchCont i.fa-youtube {
+    right: unset;
+    left: 12.5%;
+    background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg');
+}
+
+.youtubeCard-browse.expanded .searchCont i.fa-youtube-music {
+    left: unset;
+    right: 12.5%;
+    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6a/Youtube_Music_icon.svg');
+}
+
+.youtubeCard-browse.expanded .searchCont i::after {
+    display: none;
+}
+
+.youtubeCard-browse.expanded .searchCont .ytSearch {
+    margin-left: 5%;
+    width: 90%;
+}
+
 .youtubeCard-browse.expanded .browseBtns {
     width: 95%;
 }
@@ -171,4 +212,12 @@
 .youtubeCard-browse.expanded .browseBtn {
     width: 100%;
     height: 50px;
+}
+
+.youtubeCard-browse.expanded .browseBtns .bb2::before {
+    content: 'Subscriptions';
+
+    position: absolute;
+    bottom: 4px;
+    font-size: 9px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f905289..9d9b24b 100755
--- a/index.html
+++ b/index.html
@@ -120,9 +120,7 @@
 
         <div class="surface controlPanelOptGroup backdropOpts" data-sect="Backdrop">
             <div class="backdropCont">
-                <div class="wallList">
-                    <!-- <div class="prevWall"></div> -->
-                </div>
+
                 <div class="wallBtns">
                     <div class="dcExpt siteDropToggleCont">
                         <input type="checkbox" name="siteDropToggle" id="siteDropToggle">
@@ -138,29 +136,62 @@
                         <i class="fa-solid fa-refresh"></i>
                     </div>
                 </div>
-                <div class="ccSep"></div>
                 <div class="dcExpt keyTBOptGroup solo interactable-hov unsplashTagsCont">
                     <input class="keyTB" type="text" placeholder="Unsplash filters" name="" id="unsplashTags">
                 </div>
                 <div class="dcExpt keyTBOptGroup solo interactable-hov liveLinkCont">
                     <input class="keyTB" type="text" placeholder="Site URL" name="" id="liveLinkTB">
                 </div>
+                <div class="ccSep"></div>
+                <div class="wallList">
+                    <!-- <div class="prevWall"></div> -->
+                </div>
                 <form class="liveLinkCont" name="liveLinkPresets">
+                    <div class="dcExpt interactable-hov liveLinkPreset" id=""
+                        url="https://lodev09.github.io/web-screensavers/flat-surface-shader">
+                        <input type="radio" name="liveLinkPresets" id="">
+                        <i class="fa-solid fa-f"></i>
+                        <label>Flat Surface Shader</label>
+                    </div>
+                    <div class="dcExpt interactable-hov liveLinkPreset" id=""
+                        url="https://roycurtis.github.io/Flurry-WebGL/">
+                        <input type="radio" name="liveLinkPresets" id="">
+                        <i class="fa-solid fa-f"></i>
+                        <label>Flurry</label>
+                    </div>
                     <div class="dcExpt interactable-hov liveLinkPreset" id="" url="https://flux.sandydoo.me">
                         <input type="radio" name="liveLinkPresets" id="">
                         <i class="fa-solid fa-f"></i>
                         <label>Flux</label>
                     </div>
+                    <div class="dcExpt interactable-hov liveLinkPreset" id=""
+                        url="https://lodev09.github.io/web-screensavers/jellyfish">
+                        <input type="radio" name="liveLinkPresets" id="">
+                        <i class="fa-solid fa-j"></i>
+                        <label>Jellyfish</label>
+                    </div>
+                    <div class="dcExpt interactable-hov liveLinkPreset" id=""
+                        url="https://lodev09.github.io/web-screensavers/matrix">
+                        <input type="radio" name="liveLinkPresets" id="">
+                        <i class="fa-solid fa-m"></i>
+                        <label>Matrix</label>
+                    </div>
                     <div class="dcExpt interactable-hov liveLinkPreset" id="" url="https://1j01.github.io/pipes/">
                         <input type="radio" name="liveLinkPresets" id="">
                         <i class="fa-solid fa-p"></i>
                         <label>Pipes</label>
                     </div>
                     <div class="dcExpt interactable-hov liveLinkPreset" id=""
-                        url="https://roycurtis.github.io/Flurry-WebGL/">
+                        url="https://lodev09.github.io/web-screensavers/plankton?title=⠀&subtitle=⠀&web=⠀">
                         <input type="radio" name="liveLinkPresets" id="">
-                        <i class="fa-solid fa-f"></i>
-                        <label>Flurry</label>
+                        <i class="fa-solid fa-p"></i>
+                        <label>Plankton</label>
+                    </div>
+                    <div class="dcExpt interactable-hov liveLinkPreset" id=""
+                        url="https://lodev09.github.io/web-screensavers/stardust?title=⠀&subtitle=⠀&web=⠀">
+                        <input type="radio" name="liveLinkPresets" id="">
+                        <i class="fa-solid fa-s"></i>
+                        <label>Stardust</label>
                     </div>
                     <div class="dcExpt interactable-hov liveLinkPreset" id=""
                         url="https://www.logan-cooper.com/starry-night/">
@@ -186,7 +217,7 @@
             <div class="header">
                 <img src="favicons/android-chrome-192x192.png" alt="">
                 <p id="title">(PlusUI)</p>
-                <p class="siteVer" id="ver">v2.4.2</p>
+                <p class="siteVer" id="ver">v2.5</p>
             </div>
             <div class="aboutText">
                 A hybrid dashboard and digital display for large-format screens, heavily inspired by TV & VisionOS
@@ -284,6 +315,7 @@
                 id="youtubeCard">
                 <div class="searchCont">
                     <i class="fa-brands fa-youtube"></i>
+                    <i class="fa-brands fa-youtube-music"></i>
                     <input type="text" class="ytSearch" placeholder="Search YouTube">
                 </div>
                 <div class="browseBtns">
@@ -373,12 +405,32 @@
             <div class="calendarCard card expandable labeled squareCard" data-enabled="y" data-resizableCard="n"
                 data-parallaxCard="y" data-friendlyName="Calendar" data-cardDesc="Day of the week and month"
                 id="calendarCard">
-                <div class="month"></div>
+                <div class="calenMonth"></div>
                 <div class="calenDayNo"></div>
                 <div class="calenDay"></div>
 
 
-                <div class="expView"></div>
+                <div class="wrapper">
+                    <div class="header">
+                        <p class="current-date"></p>
+                        <div class="icons">
+                            <i id="prev" class="fa-solid fa-chevron-left interactable-hov"></i>
+                            <i id="next" class="fa-solid fa-chevron-right interactable-hov"></i>
+                        </div>
+                    </div>
+                    <div class="calendar">
+                        <ul class="weeks">
+                            <li>Sun</li>
+                            <li>Mon</li>
+                            <li>Tue</li>
+                            <li>Wed</li>
+                            <li>Thu</li>
+                            <li>Fri</li>
+                            <li>Sat</li>
+                        </ul>
+                        <ul class="days"></ul>
+                    </div>
+                </div>
 
             </div>
             <div class="textCard card labeled expandable actionable squareCard" data-enabled="y" data-resizableCard="y"
@@ -397,11 +449,11 @@
             <div class="shortcutCard card expandable labeled actionable squareCard" data-enabled="y"
                 data-resizableCard="y" data-parallaxCard="n" data-friendlyName="Shortcuts"
                 data-cardDesc="Choose between 4 or 8 shortcuts to your favorite places on the web" id="shortcutCard">
-                <div class="cardOptions">
+                <!-- <div class="cardOptions">
                     <div class="cmItem cmi-IDENTIFIER interactable-hov" data-btnLabel="">
                         <input class="keyTB" type="text" placeholder="Unsplash filters" name="" id="">
                     </div>
-                </div>
+                </div> -->
                 <div class="shortcuts">
                     <div class="scApp" id="scaDeviantart" data-fn="DeviantArt" data-url="deviantart.com"
                         style="color: #30a628;">
diff --git a/js/app.js b/js/app.js
index 40c2c72..0ebfc9c 100755
--- a/js/app.js
+++ b/js/app.js
@@ -35,15 +35,24 @@ window.onload = function () {
     //     });
     // }
 
-    if (localStorage.getItem('liveLink') == null) {
-        localStorage.setItem('liveLink', 'https://flux.sandydoo.me')
-        clearInterval(repeater)
-    }
-
     if (localStorage.getItem('liveWall') == 'true') {
+        clearInterval(repeater)
         $('#backDrop2').css('background-image', "url(resc/dark.png)");
         $('body').css('background-image', "none");
+
+        if (localStorage.getItem('liveLink') == null) {
+            localStorage.setItem('liveLink', 'https://flux.sandydoo.me')
+        }
         $('<embed src="' + localStorage.getItem('liveLink') + '" type="">').appendTo('.siteDrop');
+
+        $('.liveLinkPreset').each(function () {
+            var url = $(this).attr('url');
+            // alert(url + ", " + localStorage.getItem('liveLink'))
+            if (url == localStorage.getItem('liveLink')) {
+                $(this).children('input').prop('checked', true);
+            }
+        });
+
         $('#liveLinkTB').val(localStorage.getItem('liveLink'));
         $('#siteDropToggle').prop('checked', true);
     } else {
@@ -52,14 +61,6 @@ window.onload = function () {
         repeater = setInterval(refreshWall, 60000);
     }
 
-    $('.liveLinkPreset').each(function () {
-        var url = $(this).attr('url');
-        // alert(url + ", " + localStorage.getItem('liveLink'))
-        if (url == localStorage.getItem('liveLink')) {
-            $(this).children('input').prop('checked', true);
-        }
-    });
-
     if (tempUnit == null) {
         localStorage.setItem('tempUnit', 'c');
     } else if (tempUnit == 'f') {
diff --git a/js/stock_cards.js b/js/stock_cards.js
index d0d2616..e8661c6 100755
--- a/js/stock_cards.js
+++ b/js/stock_cards.js
@@ -207,7 +207,6 @@ $('#textCardTB').on('keypress', function () {
     localStorage.setItem('textCard', $('#textCardTB').val());
 })
 
-
 // YTCard2 
 
 var ytsearch = "https://www.youtube.com/results?search_query=";
@@ -226,4 +225,62 @@ $('.ytSearch').keypress(function (event) {
 //     if ($(this).parent().hasClass('subCards')) {
 //         window.open('https://futur3sn0w.me');
 //     }
-// })
\ No newline at end of file
+// })
+
+// Calendar card (expanded view)
+
+const daysTag = document.querySelector(".calendarCard .days"),
+    currentDate = document.querySelector(".calendarCard .current-date"),
+    prevNextIcon = document.querySelectorAll(".calendarCard .icons i");
+
+// getting new date, current year and month
+let date = new Date(),
+    currYear = date.getFullYear(),
+    currMonth = date.getMonth();
+
+// storing full name of all months in array
+const months = ["January", "February", "March", "April", "May", "June", "July",
+    "August", "September", "October", "November", "December"];
+
+const renderCalendar = () => {
+    let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(), // getting first day of month
+        lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(), // getting last date of month
+        lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(), // getting last day of month
+        lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); // getting last date of previous month
+    let liTag = "";
+
+    for (let i = firstDayofMonth; i > 0; i--) { // creating li of previous month last days
+        liTag += `<li class="inactive interactable-hov">${lastDateofLastMonth - i + 1}</li>`;
+    }
+
+    for (let i = 1; i <= lastDateofMonth; i++) { // creating li of all days of current month
+        // adding active class to li if the current day, month, and year matched
+        let isToday = i === date.getDate() && currMonth === new Date().getMonth()
+            && currYear === new Date().getFullYear() ? "active" : "";
+        liTag += `<li class="${isToday} interactable-hov">${i}</li>`;
+    }
+
+    for (let i = lastDayofMonth; i < 6; i++) { // creating li of next month first days
+        liTag += `<li class="inactive interactable-hov">${i - lastDayofMonth + 1}</li>`
+    }
+    currentDate.innerText = `${months[currMonth]} ${currYear}`; // passing current mon and yr as currentDate text
+    daysTag.innerHTML = liTag;
+}
+renderCalendar();
+
+prevNextIcon.forEach(icon => { // getting prev and next icons
+    icon.addEventListener("click", () => { // adding click event on both icons
+        // if clicked icon is previous icon then decrement current month by 1 else increment it by 1
+        currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;
+
+        if (currMonth < 0 || currMonth > 11) { // if current month is less than 0 or greater than 11
+            // creating a new date of current year & month and pass it as date value
+            date = new Date(currYear, currMonth, new Date().getDate());
+            currYear = date.getFullYear(); // updating current year with new date year
+            currMonth = date.getMonth(); // updating current month with new date month
+        } else {
+            date = new Date(); // pass the current date as date value
+        }
+        renderCalendar(); // calling renderCalendar function
+    });
+});
\ No newline at end of file
diff --git a/js/topchrome.js b/js/topchrome.js
index f82f7e5..b0d5302 100755
--- a/js/topchrome.js
+++ b/js/topchrome.js
@@ -412,7 +412,7 @@ function showDate() {
     const currentYear = localDate.getFullYear();
     // document.getElementById('date').innerText = currentDay + ", " + currentMonth + " " + currentDate;
 
-    $('.calendarCard .month').text(currentMonth);
+    $('.calendarCard .calenMonth').text(currentMonth);
     $('.calendarCard .calenDayNo').text(currentDate);
     $('.calendarCard .calenDay').text(currentDay);
 }
\ No newline at end of file
diff --git a/master_cards.css b/master_cards.css
index 69c16fd..b0afde4 100644
--- a/master_cards.css
+++ b/master_cards.css
@@ -256,7 +256,7 @@
     width: 90%;
     height: 115%;
 
-    border: 1px solid black;
+    border: 1px solid white;
     opacity: .5;
     border-left-color: transparent !important;
     border-right-color: transparent !important;
@@ -273,10 +273,6 @@
     position: relative;
 }
 
-.contextMenuDiv.darkModeOn .cmSep.custom::after {
-    border: 1px solid white;
-}
-
 .cmItem.cmi-resize i {
     background-color: #63E369;
     color: rgba(0, 0, 0, 0.75) !important;
diff --git a/master_controlPanel.css b/master_controlPanel.css
index 2d413ba..075d1cb 100755
--- a/master_controlPanel.css
+++ b/master_controlPanel.css
@@ -314,22 +314,6 @@
     padding: 0;
 }
 
-.liveLinkCont {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.liveLinkCont .dcExpt {
-    width: 100%;
-}
-
-.liveLinkCont .dcExpt label {
-    width: fit-content;
-    margin-left: 5px;
-    margin-right: auto;
-}
-
 .dcExpt.button {
     width: 45px;
     padding-left: 0 !important;
@@ -537,7 +521,37 @@
     margin-right: 5px;
 }
 
-/* Live display fixes */
+/* Live display */
+
+.liveLinkCont {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.liveLinkCont:not(.keyTBOptGroup) {
+    width: 230px;
+    padding: 10px;
+    padding-top: 0;
+    margin-bottom: -10px;
+    margin-left: -11px;
+    box-sizing: border-box;
+
+    max-height: 300px;
+    overflow-y: scroll;
+    overflow-x: visible;
+}
+
+.liveLinkCont .dcExpt {
+    width: 100%;
+    flex-shrink: 0;
+}
+
+.liveLinkCont .dcExpt label {
+    width: fit-content;
+    margin-left: 5px;
+    margin-right: auto;
+}
 
 .backdropCont:has(#siteDropToggle:checked) .wallList,
 .backdropCont:has(#siteDropToggle:checked) .unsplashTagsCont {
diff --git a/master_expandable.css b/master_expandable.css
index c6fa90f..262de95 100644
--- a/master_expandable.css
+++ b/master_expandable.css
@@ -19,7 +19,7 @@
     justify-content: flex-end;
 
     width: 300px;
-    height: 200px;
+    height: fit-content;
 
     opacity: 0;
     transition: .2s;
@@ -147,7 +147,8 @@ body:has(.darkModeOn) .expandableWindow {
     /* top: 0; */
     /* left: 0; */
     width: 100%;
-    height: calc(100% - 30px);
+    height: auto;
+    min-height: 200px;
     box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .25);
 
     color: black;