diff --git a/css/homepage.css b/css/homepage.css
new file mode 100644
index 0000000..8760637
--- /dev/null
+++ b/css/homepage.css
@@ -0,0 +1,170 @@
+/* COLOR THEMES */
+:root {
+    --background-color: #ffdaca;
+    --content-color: #588b8b;
+    --accomp-color: #FFA343;
+    --bar-color: #c8553d;
+    --card-color: #ffffffeb;
+    --cal-color: #65c9c9be;
+}
+
+
+/* ENTIRE PAGE SELECTORS */
+body, html {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    height: 100%;
+    font-family: Arial, sans-serif;    /* temporary */
+    background-color: var(--background-color);
+    min-height: 500px;
+}
+
+
+
+/* NAV AND BOTTOM TAB SELECTORS  */
+.main-nav, .bottom-tab {
+    background-color: var(--bar-color); 
+    padding: 20px 0;
+    width: 100%;
+}
+
+
+/* MAIN SECTION SELECTORS */
+.card {
+    cursor: pointer;
+    display: flex;
+    height: 300px;
+    width: 200px;
+    border-radius: 8px;
+    background-color: var(--card-color);
+    transition: box-shadow 0.3s;
+}
+
+.card:hover {
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.main {
+    display: flex;
+    width: 100%;
+    height: calc(100% - 80px); 
+}
+
+.project-cards, .sidebar-sec {
+    border-radius: 8px; /* Rounded corners */
+}
+
+.project-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 25px;
+    padding: 30px;
+    background-color: var(--content-color); 
+    flex-grow: 1;
+    margin: 30px 15px 30px 30px;
+}
+
+.sidebar {
+    width: 380px; /* Fixed width for the sidebar */
+    display: flex;
+    height: calc(100% - 60px); 
+    flex-direction: column;
+    margin: 30px 30px 30px 15px;
+}
+
+
+.calendar {
+    margin-bottom: 15px;
+    background-color: var(--cal-color); /* Light grey for visibility */
+    height: 283px;
+    flex-direction: column;
+}
+
+.cal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+}
+
+.monthYear {
+    text-align: center;
+    font-weight: 600;
+    width: 150px;
+}
+
+.cal-header button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    box-shadow: 0 0 4px rgba(0,0,0,0.2);
+}
+
+.days {
+    display: grid;
+    grid-template-columns: repeat(7,1fr);
+}
+
+
+.day {
+    text-align: center;
+    padding: 5px;
+    font-weight: 600;
+}
+
+.dates {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+}
+
+.date {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 4px;
+    margin: auto;
+    cursor: pointer;
+    font-weight: 400;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    transition: 0.2s;
+}
+
+.date:hover, .date:active {
+    background: #ff5869;
+    color: #fff;
+}
+
+.date.inactive {
+    color: #d2d2d2;
+}
+
+.date.inactive:hover {
+    color: #fff;
+}
+
+.accomplishments {
+    background-color: var(--accomp-color); /* Slightly different grey for distinction */
+    margin-top: 15px;
+    flex-grow: 1;
+}
+
+
+/* MEDIA QUERY FOR MOBILE DEVICES */
+@media (max-width: 837px) {
+    .main {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/css/projectView.css b/css/projectView.css
new file mode 100644
index 0000000..151abae
--- /dev/null
+++ b/css/projectView.css
@@ -0,0 +1,46 @@
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);; /* Black with opacity for blur effect */
+    backdrop-filter: blur(8px); 
+}
+
+.modal-content {
+    background-color: #fff; /* White background */
+    margin: 10% auto; /* 10% from the top and centered horizontally */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 50%; /* Smaller width to keep it well-sized */
+    border-radius: 10px; /* Rounded edges */
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for 3D effect */
+    position: relative; /* Needed for absolute positioning of close button */
+    height: 65%;
+}
+
+.close {
+    color: #aaa;
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+}
+
+/* Ensure the modal content is scrollable if the content exceeds the viewport */
+.modal-content {
+    overflow: auto;
+    max-height: 80%; /* Limit the height to ensure it stays within the viewport */
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e1cd06e..3febe81 100644
--- a/index.html
+++ b/index.html
@@ -7,15 +7,14 @@
     <title>Developer Jounal</title>
     <!-- FONTS -->
 
-    <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="./assets/styles/styles.css">
-    <link rel="stylesheet" href="./assets/styles/project-card.css">
 
-    <!-- Web Components -->
-    <script src="./assets/components/project-card.js" type="module"></script>
+    <!-- SCRIPS -->
+    <script src="js/main.js"></script>
+
+    <!-- STYLESHEETS -->
+    <link rel="stylesheet" href="css/homepage.css">
+    <link rel="stylesheet" href="css/projectView.css">
 
-    <!-- Main Scripts -->
-    <script src="./assets/scripts/homepage.js" type="module"></script>
 </head>
 
 <body>
@@ -29,8 +28,40 @@
         <!-- PROJECT CARDS SECTION -->
         <div class="project-cards" id="project-cards-parent">
 
+        <!-- SIDEBAR -->
+        <div class="sidebar">
+            <!-- CALENDAR -->
+            <div class="sidebar-sec calendar">
+                <div class="cal-header">
+                    <button id="cal-prev"></button>
+                    <div class="monthYear" id="monthYear"></div>
+                    <button id="cal-next"></button>
+                </div>
+
+                <div class="days"> 
+                    <div class="day">Mon</div>
+                    <div class="day">Tue</div>
+                    <div class="day">Wed</div>
+                    <div class="day">Thu</div>
+                    <div class="day">Fri</div>
+                    <div class="day">Sat</div>
+                    <div class="day">Sun</div>
+                </div>
+                <div class="dates" id="dates"></div>
+            </div>
+
+            <!-- ACCOMPLISHMENTS -->
+            <div class="sidebar-sec accomplishments">
+
+            </div>
+        </div>
+    </div>
 
 
+    <div id="projectView" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <p>Some context in the minipage</p>
         </div>
     </div>
 
@@ -45,38 +76,10 @@
     <div class="bottom-tab">
 
     </div>
-    <template>
-        <!-- Sample project card Item -->
-        <!-- <div class="project-card">
-            <p class="name">Warmup project</p>
-            <img class="project-image" src="assets/images/sample_project_card_image.png"
-                alt="Fjallraven - Foldstack No. 1 Backpack, Fits 15 Laptops">
-            <div class="desc">a project</div>
-            <div class="progress-bar">
-                <div class="progress-bar-fill">
-                    12
-                </div>
 
-            </div>
-            <div class="actions">
-                <button onclick="{
-                    const pbf = this.parentNode.parentNode.querySelector(
-                        '.progress-bar > .progress-bar-fill'
-                    );
-                    var progress = Number(pbf.innerText);
-                    if (progress >= 100) {
-                        progress = 0;
-                    } else {
-                        progress= progress+Math.floor(Math.random()*10);
-                    }
-                    console.log(progress);
-                    pbf.style.width = progress + '%';
-                    pbf.innerText = progress;
-                }">progress + random</button>
-                <button onclick="alert('open click')">open</button>
-                <button onclick="alert('options click')">options</button>
-            </div> -->
-    </template>
+
+    <script src="js/calendar.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/calendar.js b/js/calendar.js
new file mode 100644
index 0000000..faf29af
--- /dev/null
+++ b/js/calendar.js
@@ -0,0 +1,52 @@
+const monthYearElement = document.getElementById('monthYear');
+const datesElement = document.getElementById('dates');
+const prevBttn = document.getElementById('cal-prev');
+const nextBttn = document.getElementById('cal-next');
+
+let currentDate = new Date();
+
+const updateCalendar = () => {
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+
+    const firstDay = new Date(currentYear, currentMonth, 0);
+    const lastDay = new Date(currentYear, currentMonth + 1, 0);
+    const totalDays = lastDay.getDate();
+    const firstDayIndex = firstDay.getDay();
+    const lastDayIndex = lastDay.getDay();
+
+    const monthYearString = currentDate.toLocaleString('default', {month: 'long', year: 'numeric'});
+    monthYearElement.textContent = monthYearString;
+
+    let datesHTML = '';
+
+    for (let i = firstDayIndex; i > 0; i--) {
+        const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
+        datesHTML += `<div class="date inactive">${prevDate.getDate()}</div>`;
+    }
+
+    for (let i = 1; i <= totalDays; i++) {
+        const date = new Date(currentYear, currentMonth, i);
+        const activeClass = date.toDateString() === new Date().
+            toDateString() ? 'active' : '';
+        datesHTML += `<div class="date ${activeClass}">${i}</div>`;
+    }
+
+    for (let i = 1; i <= 7 - lastDayIndex; i++) {
+        const nextDate = new Date(currentYear, currentMonth + 1, i);
+        datesHTML += `<div class="date inactive">${nextDate.getDate()}</div>`;
+    }
+
+    datesElement.innerHTML = datesHTML;
+}
+prevBttn.addEventListener('click', () => {
+    currentDate.setMonth(currentDate.getMonth() - 1);
+    updateCalendar();
+})
+
+nextBttn.addEventListener('click', () => {
+    currentDate.setMonth(currentDate.getMonth() + 1);
+    updateCalendar();
+})
+
+updateCalendar();
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..33c3efe
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,35 @@
+// Function to show the modal
+function showModal(card) {
+    const modal = document.getElementById('projectView');
+    const modalContent = modal.querySelector('.modal-content p');
+    modalContent.textContent = 'Content for ' + card.innerText; // Set the content dynamically
+    modal.style.display = 'block'; // Show the modal
+}
+
+// Initialization function to set up event handlers
+function init() {
+
+
+    // Get the element that closes the modal
+    const close = document.querySelector('.close');
+    close.onclick = function() {
+        const modal = document.getElementById('projectView');
+        modal.style.display = 'none';
+    }
+
+    // Setup event listeners for any existing cards (if any)
+    document.querySelectorAll('.card').forEach(card => {
+        card.onclick = function() { showModal(card); };
+    })
+
+    // Click anywhere outside of the modal to close it
+    window.onclick = function(event) {
+        const modal = document.getElementById('projectView');
+        if (event.target === modal) {
+            modal.style.display = 'none';
+        }
+    }
+}
+
+// Ensures all DOM content is loaded before executing scripts
+document.addEventListener('DOMContentLoaded', init);
\ No newline at end of file