diff --git a/projects.html b/projects.html
index 34662ee..20bbb3b 100644
--- a/projects.html
+++ b/projects.html
@@ -18,20 +18,50 @@
 </nav>
 
 <main>
-
         <h1>Projects</h1>
             <hr>
                 <h4>Here are some of my projects that I work on.</h4>
             <hr>
-                <h4 class="joinlink"><a href="https://discord.angelauramc.dev" target="_blank">AAMC Discord</a></h4>
-                <h4 class="joinlink"><a href="https://wiki.angelauramc.dev" target="_blank">AAMC Wiki</a></h4>
-                <h4 class="joinlink"><a href="https://github.com/Dev1ss0/My-CSS-framework" target="_blank">My own CSS framework</a></h4>
-                <h4 class="joinlink"><a href="https://github.com/Dev1ss0/Simple-Media-Query" target="_blank">Simple @media query</a></h4>
+                <div class="projects-grid">
+                    <div class="project-card" onclick="openProjectModal(0)">
+                        <h4>AAMC Discord</h4>
+                    </div>
+                    <div class="project-card" onclick="openProjectModal(1)">
+                        <h4>AAMC Wiki</h4>
+                    </div>
+                    <div class="project-card" onclick="openProjectModal(2)">
+                        <h4>My own CSS framework</h4>
+                    </div>
+                    <div class="project-card" onclick="openProjectModal(3)">
+                        <h4>Simple @media query</h4>
+                    </div>
+                </div>
 </main>
 
+
+<div id="modalOverlay" class="modal-overlay" onclick="closeProjectModal()"></div>
+
+
+<div id="projectModal" class="project-modal">
+    <div class="modal-content">
+        <span class="close-btn" onclick="closeProjectModal()">&times;</span>
+        <h2 id="modalTitle"></h2>
+        <div class="modal-section">
+            <h3>Description</h3>
+            <p id="modalDescription"></p>
+        </div>
+        <div class="modal-section">
+            <h3>My Involvement</h3>
+            <p id="modalInvolvement"></p>
+        </div>
+        <a id="modalLink" href="#" target="_blank" class="modal-link-btn">View Project</a>
+    </div>
+</div>
+
 <footer class="footer">
         <a href="https://www.flaticon.com/icons">Icons by Flaticon</a>
     </footer>
     
+<script src="projects.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/projects.js b/projects.js
new file mode 100644
index 0000000..15a41f5
--- /dev/null
+++ b/projects.js
@@ -0,0 +1,50 @@
+const projectsData = [
+    {
+        title: "AAMC Discord",
+        description: "AngelAuraMC is an organization that develops Amethyst, a launcher that allows you to play Minecraft: Java Edition on your Android and iOS devices.",
+        involvement: "Administrator and Community Manager.",
+        link: "https://discord.angelauramc.dev"
+    },
+    {
+        title: "AAMC Wiki",
+        description: "Wiki documenting how to use Amethyst.",
+        involvement: "Wiki maintainer.",
+        link: "https://wiki.angelauramc.dev"
+    },
+    {
+        title: "My own CSS framework",
+        description: "A custom CSS framework created from scratch for fun, I need to rewrite it ughhh.",
+        involvement: "Creator.",
+        link: "https://github.com/Dev1ss0/My-CSS-framework"
+    },
+    {
+        title: "Simple @media query",
+        description: "A fun little project that changes color depending on your device.",
+        involvement: "Creator.",
+        link: "https://github.com/Dev1ss0/Simple-Media-Query"
+    }
+];
+
+function openProjectModal(index) {
+    const project = projectsData[index];
+    document.getElementById('modalTitle').textContent = project.title;
+    document.getElementById('modalDescription').textContent = project.description;
+    document.getElementById('modalInvolvement').textContent = project.involvement;
+    document.getElementById('modalLink').href = project.link;
+    
+    document.getElementById('projectModal').classList.add('active');
+    document.getElementById('modalOverlay').classList.add('active');
+    document.body.style.overflow = 'hidden';
+}
+
+function closeProjectModal() {
+    document.getElementById('projectModal').classList.remove('active');
+    document.getElementById('modalOverlay').classList.remove('active');
+    document.body.style.overflow = 'auto';
+}
+
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') {
+        closeProjectModal();
+    }
+});
diff --git a/styles.css b/styles.css
index b6e4242..9ef1895 100644
--- a/styles.css
+++ b/styles.css
@@ -285,4 +285,176 @@ span.important {
   background: #ee824e;
   color: black;
   text-shadow: none;
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+    margin: 20px auto;
+    max-width: 600px;
+    padding: 0 20px;
+}
+
+.project-card {
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    width: 100%;
+}
+
+.project-card h4 {
+    margin: 0;
+    color: var(--links);
+    font-size: 1.8em;
+    font-weight: 700;
+    padding: 10px 15px;
+    text-align: center;
+    border-radius: 8px;
+    background: transparent;
+    transition: background 0.2s, color 0.2s;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.project-card:hover h4 {
+    background: var(--links);
+    color: #1c1c1c;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    z-index: 998;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.modal-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.project-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    background: #1c1c1c;
+    border: 2px solid #ee824e;
+    border-radius: 12px;
+    padding: 30px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
+}
+
+.project-modal.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.modal-content {
+    position: relative;
+}
+
+.close-btn {
+    position: absolute;
+    top: -10px;
+    right: 0;
+    font-size: 2em;
+    font-weight: bold;
+    color: #ee824e;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    line-height: 1;
+}
+
+.close-btn:hover {
+    color: #ff9966;
+}
+
+#modalTitle {
+    color: #ee824e;
+    margin: 0 0 20px 0;
+    font-size: 1.8em;
+}
+
+.modal-section {
+    margin: 20px 0;
+    text-align: left;
+}
+
+.modal-section h3 {
+    color: #ee824e;
+    margin: 0 0 10px 0;
+    font-size: 1.2em;
+}
+
+.modal-section p {
+    color: #d3d3d3;
+    line-height: 1.6;
+    margin: 0;
+}
+
+.modal-link-btn {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 6px 20px;
+    background: transparent;
+    color: var(--links);
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1.05em;
+    transition: background 0.2s, color 0.2s;
+}
+
+.modal-link-btn:hover {
+    background: var(--links);
+    color: #1c1c1c;
+}
+
+/* god i hate this */
+@media (max-width: 600px) {
+    .projects-grid {
+        grid-template-columns: 1fr;
+        max-width: 300px;
+    }
+    
+    .project-card h4 {
+        font-size: 1.1em;
+    }
+    
+    .project-modal {
+        max-width: 90%;
+        padding: 20px;
+    }
+    
+    #modalTitle {
+        font-size: 1.4em;
+    }
 }
\ No newline at end of file