diff --git a/application/static/css/style.css b/application/static/css/style.css
index 970537e..72c9708 100644
--- a/application/static/css/style.css
+++ b/application/static/css/style.css
@@ -44,7 +44,8 @@ textarea {
 }
 
 a:hover,
-button:hover {
+button:hover,
+#profile-info:hover {
   cursor: pointer;
 }
 
@@ -1013,4 +1014,151 @@ h4 {
 .search-grid button {
   background-color: white;
   border-color: gray;
-}
\ No newline at end of file
+}
+
+#groupdetailsbody>.resource {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  width: 80%;
+}
+
+#profile-info {
+  display: flex;
+}
+
+#profile-info * {
+  margin: 0px;
+}
+
+#profile-info h2 {
+  margin-top: 5px;
+}
+
+#profile-info>.pfp {
+  width: 15%;
+  height: 100%;
+  min-height: 45px;
+  min-width: 45px;
+  margin: 1px;
+}
+
+.small-box {
+  margin: 0px 10px;
+  width: 100%;
+  border: 1.5px solid #045BC0;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.small-box h3 {
+  margin: 8px 5px;
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.small-box p {
+  font-size: 13px;
+  margin: 3px 5px;
+}
+
+.small-box button {
+  font-size: 11px;
+  color: #045BC0;
+  margin: 5px 5px;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  padding: 0px;
+}
+
+.small-box .detail2 {
+  color: rgb(75, 75, 75);
+}
+
+.small-boxes {
+  display: flex;
+}
+
+.groupdetails {
+  grid-column: 1 / span 2;
+}
+
+.groupdetails h3 {
+  margin: 0px;
+  margin-top: 15px;
+  font-weight: 500;
+}
+
+.groupdetails p {
+  margin: 0px;
+  font-size: 13px;
+}
+
+#groupdetailsbody {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+#groupdetailsbody .resource {
+  padding: 40px;
+  border: none;
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-bottom: 60px;
+}
+
+#joingroup p {
+  font-size: 13px;
+  margin: 3px 5px;
+  color: rgb(75, 75, 75);
+}
+
+#joingroup {
+  display: flex;
+  align-content: center;
+  justify-content: end;
+  grid-column: 1 / span 2;
+}
+
+#groupdetailsbody>.resource {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  width: 80%;
+}
+
+#viewprofile {
+  display: grid;
+  grid-template-columns: 40% 60%;
+  width: 500px;
+  padding: 40px;
+  border: none;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  position: absolute;
+  display: none;
+  background-color: white;
+  top: 55%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#viewprofile p {
+  margin: 0px;
+}
+
+#viewprofile h2 {
+  margin: 0px;
+  font-size: 36px;
+}
+
+#viewprofile .pfp {
+  width: 120px;
+}
+
+#viewprofile>p {
+  grid-column: 1 / span 2;
+  font-size: 16px;
+  margin-top: 10px;
+  text-align: center;
+}
diff --git a/application/templates/base.html b/application/templates/base.html
index 842721a..151c0c8 100644
--- a/application/templates/base.html
+++ b/application/templates/base.html
@@ -18,11 +18,12 @@
         <nav>
             <a href="/" class="navbar-logo"><img src="/static/assets/logo.png" alt="logo" class="navbar-logo">open
                 course</a>
-            <a href="/saved/"style="margin-left: 6em">Saved Posts</a>
+            <a href="/saved/" style="margin-left: 6em">Saved Posts</a>
             <a href="/courses/">Courses</a>
             <a href="/view-user-profile/">View Users</a>
             <a href="/about/">About</a>
             <a href="/profile/test/">View Profile (test)</a>
+            <a href="/group-details/">Group Details</a>
         </nav>
     </header>
     <main>
diff --git a/application/templates/group-details.html b/application/templates/group-details.html
new file mode 100644
index 0000000..c629be4
--- /dev/null
+++ b/application/templates/group-details.html
@@ -0,0 +1,109 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="blue-header">
+   <div>
+      <h1>Group Details</h1>
+      <br>
+      <p>
+         Currently viewing a study group
+      </p>
+   </div>
+</div>
+<div id="groupdetailsbody">
+   <h2>Calculus Final Exam Study</h2>
+   <div class="resource">
+      <div>
+         <div id="profile-info">
+            <img src="/static/assets/logo.png" class="pfp" alt="pfp">
+            <div>
+               <h2>Martha Stewart</h2>
+               <div class="resource-info">
+                  <p>mstews@umich.edu</p>
+               </div>
+            </div>
+         </div>
+         <div>
+            <button class="info-tag tag-spacing" type="button">Topic</button>
+            <button class="info-tag tag-spacing" type="button">Topic</button>
+            <button class="info-tag tag-spacing" type="button">Topic</button>
+            <button class="info-tag tag-spacing" type="button">Topic</button>
+         </div>
+      </div>
+      <div class="small-boxes">
+         <div class="small-box">
+            <h3>Location</h3>
+            <p class="detail1">Mason Hall Room 2326</p>
+            <p class="detail2">419 State St, Ann Arbor</p>
+            <button>Open in Map</button>
+         </div>
+         <div class="small-box">
+            <h3>Date & Time</h3>
+            <p class="detail1">Saturday, 6 Feb 2024</p>
+            <p class="detail2">6:30pm - 7:30pm</p>
+            <button>Add to Calendar</button>
+         </div>
+      </div>
+      <br>
+      <div class="groupdetails">
+         <h3>Details</h3>
+         <p>Studying Together for calculus final exam in Mason Hall Saturday Night!</p>
+      </div>
+      <div id="joingroup">
+         <p>Send an email to the group creator to join the group! <button
+               class="course-button rounded-blue-button">Join</button></p>
+      </div>
+   </div>
+</div>
+<div id="viewprofile" class="resource">
+   <img src="/static/assets/logo.png" class="pfp" alt="pfp">
+   <div>
+      <h2>Martha Stewart</h2>
+      <p>(232)562-4293</p>
+      <p>mstews@umich.edu</p>
+      <button class="info-tag" type="button">Topic</button>
+      <button class="info-tag" type="button">Topic</button>
+      <button class="info-tag" type="button">Topic</button>
+      <button class="info-tag" type="button">Topic</button>
+   </div>
+   <p> Hi my name is Martha Stewart and I'm a current Sophomore
+      studying Computer Science at Umich! I love coffee and am
+      always looking for new books to read :)</p>
+</div>
+<script>
+   let popup;
+   let button = document.getElementById("profile-info");
+   let profile = document.getElementById("viewprofile");
+
+   let isMouseHover = false
+   button.addEventListener("mouseleave", function (event) {
+      isMouseHover = false
+      console.log(isMouseHover)
+   }, false);
+   button.addEventListener("mouseover", function (event) {
+      isMouseHover = true
+      console.log(isMouseHover)
+   }, false);
+
+   window.addEventListener("load", function () {
+      console.log("Good job opening the window");
+      profile.style.display = "none";
+      popup = false;
+   });
+
+   window.addEventListener("click", function () {
+      let body = document.querySelector("#groupdetailsbody");
+      if (isMouseHover && !popup) {
+         popup = true;
+         console.log(popup);
+         body.style.filter = "blur(5px)";
+         profile.style.display = "grid";
+      } else {
+         popup = false;
+         console.log(popup);
+         body.style.filter = "blur(0px)";
+         profile.style.display = "none";
+      }
+   });
+
+</script>
+{% endblock %}
diff --git a/application/views/__init__.py b/application/views/__init__.py
index b2343c9..209c038 100644
--- a/application/views/__init__.py
+++ b/application/views/__init__.py
@@ -7,3 +7,4 @@
 from application.views.saved import show_saved
 from application.views.login import show_login
 from application.views.login import show_privacy_policy
+from application.views.index import show_group_details
diff --git a/application/views/index.py b/application/views/index.py
index cecf1ba..4cb22b1 100644
--- a/application/views/index.py
+++ b/application/views/index.py
@@ -4,3 +4,7 @@
 @application.app.route('/')
 def show_index():
     return render_template('index.html')
+
+@application.app.route('/group-details/')
+def show_group_details():
+    return render_template('group-details.html')