diff --git a/client/agora/public/assets/img/buttons/invite-friend.png b/client/agora/public/assets/img/buttons/invite-friend.png
new file mode 100644
index 00000000..b04dd622
Binary files /dev/null and b/client/agora/public/assets/img/buttons/invite-friend.png differ
diff --git a/client/agora/public/css/agora-theme.css b/client/agora/public/css/agora-theme.css
index 4a329746..e7757bca 100644
--- a/client/agora/public/css/agora-theme.css
+++ b/client/agora/public/css/agora-theme.css
@@ -81,42 +81,55 @@ Tetradic: #414d53, #4d4153, #535041
 .primary {
     color: #F39845;
 }
+
 .complementary {
     color: #2C8895;
 }
+
 .complementary-light {
     color: #78C0CA;
 }
+
 .harmony {
     color: #6d4f40;
 }
+
 .analogous {
     color: #534c41;
 }
+
 .analogous2 {
     color: #534341;
 }
+
 .split-complementary {
     color: #444153;
 }
+
 .split-complementary2 {
     color: #415347;
 }
+
 .triadic {
     color: #4d4153;
 }
+
 .triadic2 {
     color: #475341;
 }
+
 .tetradic {
     color: #414d53;
 }
+
 .tetradic2 {
     color: #4d4153;
 }
+
 .tetradic3 {
     color: #535041;
 }
+
 .agoraColor {
     color: #f39945;
 }
@@ -136,7 +149,7 @@ Tetradic: #414d53, #4d4153, #535041
 .cherry-red-color {
     color: rgba(99, 19, 18) !important;
 }
-  
+
 .cherry-red-bg-color {
     background-color: rgba(99, 19, 18) !important;
 }
@@ -147,35 +160,41 @@ Tetradic: #414d53, #4d4153, #535041
     font-family: 'Luxurious Roman', cursive !important;
     color: #171717;
 }
+
 .agora-font-light {
     font-family: 'Luxurious Roman', cursive !important;
     color: #F6F6F6;
 }
+
 .agora-font-1em {
     font-family: 'Luxurious Roman', cursive !important;
-    font-size:1em !important
+    font-size: 1em !important
 }
+
 .agora-font-1p5em {
     font-family: 'Luxurious Roman', cursive !important;
-    font-size:1.5em !important
+    font-size: 1.5em !important
 }
+
 .agora-font-2em {
     font-family: 'Luxurious Roman', cursive !important;
-    font-size:2em !important
+    font-size: 2em !important
 }
+
 .agora-font-3em {
     font-family: 'Luxurious Roman', cursive !important;
-    font-size:3em !important
+    font-size: 3em !important
 }
-  
+
 .agora-font-large {
     font-family: 'Luxurious Roman', cursive !important;
-    font-size:4em !important
+    font-size: 4em !important
 }
+
 @media (min-width: 992px) {
     .agora-font-large {
-      font-family: 'Luxurious Roman', cursive !important;
-      font-size:5em !important
+        font-family: 'Luxurious Roman', cursive !important;
+        font-size: 5em !important
     }
 }
 
@@ -184,7 +203,8 @@ Tetradic: #414d53, #4d4153, #535041
     color: #AE7A0B !important;
 }
 
-a.text-primary:hover, a.text-primary:focus {
+a.text-primary:hover,
+a.text-primary:focus {
     color: #085F6B !important;
 }
 
@@ -193,7 +213,8 @@ a.text-primary:hover, a.text-primary:focus {
     padding-left: 25px !important;
 }
 
-a.text-secondary:hover, a.text-secondary:focus {
+a.text-secondary:hover,
+a.text-secondary:focus {
     color: #11181f !important;
 }
 
@@ -203,68 +224,91 @@ a.text-secondary:hover, a.text-secondary:focus {
     background-color: #826131;
     border-color: #826131;
 }
+
 .btn-primary:hover {
     color: #fff;
     background-color: #d8a348;
     border-color: #d8a348;
 }
+
 .btn-primary:active {
     color: #fff;
     background-color: #d8a348;
     border-color: #826131;
 }
-.btn-primary:focus, .btn-primary.focus {
+
+.btn-primary:focus,
+.btn-primary.focus {
     color: #fff;
     background-color: #d8a348;
     border-color: #826131;
     box-shadow: 0 0 0 0.2rem rgba(60, 198, 171, 0.5);
 }
-.btn-primary.disabled, .btn-primary:disabled {
+
+.btn-primary.disabled,
+.btn-primary:disabled {
     color: #fff;
     background-color: #826131;
     border-color: #826131;
 }
-.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+
+.btn-primary:not(:disabled):not(.disabled):active,
+.btn-primary:not(:disabled):not(.disabled).active,
+.show>.btn-primary.dropdown-toggle {
     color: #fff;
     background-color: #d8a348;
     border-color: #826131;
 }
-.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
+
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.show>.btn-primary.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(60, 198, 171, 0.5);
 }
-  
+
 .btn-secondary {
     color: #fff;
     background-color: #494949;
     border-color: #494949;
 }
+
 .btn-secondary:hover {
     color: #fff;
     background-color: #383d3f;
     border-color: #383d3f;
 }
-.btn-secondary:focus, .btn-secondary.focus {
+
+.btn-secondary:focus,
+.btn-secondary.focus {
     color: #fff;
     background-color: #383d3f;
     border-color: #383d3f;
     box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
 }
-.btn-secondary.disabled, .btn-secondary:disabled {
+
+.btn-secondary.disabled,
+.btn-secondary:disabled {
     color: #fff;
     background-color: #222222;
     border-color: #222222;
 }
-.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
+
+.btn-secondary:not(:disabled):not(.disabled):active,
+.btn-secondary:not(:disabled):not(.disabled).active,
+.show>.btn-secondary.dropdown-toggle {
     color: #fff;
     background-color: #17191a;
     border-color: #17191a;
 }
-.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus {
+
+.btn-secondary:not(:disabled):not(.disabled):active:focus,
+.btn-secondary:not(:disabled):not(.disabled).active:focus,
+.show>.btn-secondary.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
 }
 
 .centered {
-    display:block; 
+    display: block;
     margin: auto;
 }
 
@@ -297,7 +341,7 @@ a.text-secondary:hover, a.text-secondary:focus {
 /* website topmenu responsive */
 .ml-auto,
 .mx-auto {
-  margin-left: auto !important;
+    margin-left: auto !important;
 }
 
 .container,
@@ -314,7 +358,12 @@ a.text-secondary:hover, a.text-secondary:focus {
 }
 
 @media (min-width: 1200px) {
-    .container-xl, .container-lg, .container-md, .container-sm, .container {
+
+    .container-xl,
+    .container-lg,
+    .container-md,
+    .container-sm,
+    .container {
         max-width: 98%;
     }
 }
@@ -346,10 +395,12 @@ a.text-secondary:hover, a.text-secondary:focus {
     z-index: 2;
     font-size: 2.75rem;
 }
+
 .masthead .masthead-subheading {
     z-index: 2;
     font-size: 1.25rem;
 }
+
 .masthead .masthead-avatar {
     z-index: 2;
     width: 15rem;
@@ -358,30 +409,33 @@ a.text-secondary:hover, a.text-secondary:focus {
 
 @media (min-width: 576px) {
     .masthead {
-      background-position-x:5em;
-      background-size: cover;
-      height: 750px;
+        background-position-x: 5em;
+        background-size: cover;
+        height: 750px;
     }
 }
+
 @media (min-width: 768px) {
     .masthead {
-      background-position-x:10rem;
-      background-size: cover;
-      height: 750px;
+        background-position-x: 10rem;
+        background-size: cover;
+        height: 750px;
     }
 }
+
 @media (min-width: 992px) {
     .masthead {
-      background-position-x:13rem;  
-      background-size: cover;
-      height: 750px;
+        background-position-x: 13rem;
+        background-size: cover;
+        height: 750px;
     }
-  }
+}
+
 @media (min-width: 1200px) {
     .masthead {
-      background-position-x:20rem;
-      background-size: cover;
-      height: 750px;
+        background-position-x: 20rem;
+        background-size: cover;
+        height: 750px;
     }
 }
 
@@ -401,77 +455,83 @@ a.text-secondary:hover, a.text-secondary:focus {
 .footer-interior {
     z-index: 2;
 }
-  
+
 .nuge-forward {
-    z-index:2;
+    z-index: 2;
 }
-  
+
 .yt-sub {
     width: 20%;
 }
-  
+
 .yt-sub-sm {
     width: 15%;
 }
-  
+
 
 
 
 
 /* make containers content centered */
 .center {
-    display: inline-block; 
+    display: inline-block;
     text-align: center;
 }
 
 
 
-  
+
 /*CSS for right click sub menu*/
-#ctxMenu{
-    display:none;
-    z-index:100;
+#ctxMenu {
+    display: none;
+    z-index: 100;
 }
-#notepad{
-    position:absolute;
-    width:100vw;
-    height:100vh;
+
+#notepad {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
 }
+
 menu {
-    position:absolute;
-    display:block;
-    height:20px;
-    width:20px;
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
     margin-bottom: 10px;
-    padding:0;
-    margin:0;
-    border:1px solid;
-    border-color:rgba(0, 0, 0, 0.125);
-    border-radius:20px;
-    background-color:white;
-    font-weight:normal;
-    white-space:nowrap;
-}
-menu:hover{
-    background-color:#eef;
-    font-weight:bold;
-}
-menu:hover > menu{
-    display:block;
-}
-menu > menu{
-    display:none;
-    position:relative;
-    top:-20px;
-    left:100%;
-    width:75px;
-    height:25px;
-    border-radius:2px;
+    padding: 0;
+    margin: 0;
+    border: 1px solid;
+    border-color: rgba(0, 0, 0, 0.125);
+    border-radius: 20px;
+    background-color: white;
+    font-weight: normal;
+    white-space: nowrap;
 }
-menu[title]:before{
-    content:attr(title);
+
+menu:hover {
+    background-color: #eef;
+    font-weight: bold;
+}
+
+menu:hover>menu {
+    display: block;
 }
-  
+
+menu>menu {
+    display: none;
+    position: relative;
+    top: -20px;
+    left: 100%;
+    width: 75px;
+    height: 25px;
+    border-radius: 2px;
+}
+
+menu[title]:before {
+    content: attr(title);
+}
+
 /* Header background image */
 
 
@@ -481,6 +541,7 @@ a {
     text-decoration: none;
     background-color: transparent;
 }
+
 a:hover {
     color: #142C76;
     text-decoration: none;
@@ -490,98 +551,114 @@ a:hover {
     color: #FFF !important;
     text-decoration: none !important;
     background-color: transparent !important;
-} 
+}
+
 .a-light:hover {
     color: #AE590B !important;
     text-decoration: none !important;
 }
 
 
-  
+
 /* navigation */
 #mainNav {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
     font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-weight: 700;
-    background: rgb(255,255,255);
+    background: rgb(255, 255, 255);
     background: linear-gradient(180deg, #171717 94%, #f39945 100%);
 }
 
 #mainNav .navbar-nav {
     margin-top: 1rem;
 }
+
 #mainNav .navbar-nav li.nav-item a.nav-link {
     color: rgb(209, 209, 209);
 }
+
 #mainNav .navbar-nav li.nav-item a.nav-link:hover {
     color: #534741;
 }
-#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
+
+#mainNav .navbar-nav li.nav-item a.nav-link:active,
+#mainNav .navbar-nav li.nav-item a.nav-link:focus {
     color: #a9c6d4;
 }
+
 #mainNav .navbar-nav li.nav-item a.nav-link.active {
     color: #534741;
 }
+
 #mainNav .navbar-toggler {
     font-size: 80%;
     padding: 0.8rem;
 }
+
 @media (min-width: 992px) {
     #mainNav {
-      padding-top: 1.5rem;
-      padding-bottom: 1.5rem;
-      padding-left:2rem;
-      transition: padding-top 0.3s, padding-bottom 0.3s;
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
+        padding-left: 2rem;
+        transition: padding-top 0.3s, padding-bottom 0.3s;
     }
+
     #mainNav .navbar-brand {
-      font-size: 1.75em;
-      transition: font-size 0.3s;
+        font-size: 1.75em;
+        transition: font-size 0.3s;
     }
+
     #mainNav .navbar-nav {
-      margin-top: 0;
+        margin-top: 0;
     }
-    #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
-      color: #fff;
-      background: #534741;
+
+    #mainNav .navbar-nav>li.nav-item>a.nav-link.active {
+        color: #fff;
+        background: #534741;
     }
-    #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
-      color: #fff;
-      background: #a9c6d4;
+
+    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:active,
+    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:focus,
+    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover {
+        color: #fff;
+        background: #a9c6d4;
     }
-  
+
     #mainNav.navbar-shrink {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
     }
+
     #mainNav.navbar-shrink .navbar-brand {
-      font-size: 1.5em;
+        font-size: 1.5em;
     }
 }
-.homepageButton{
+
+.homepageButton {
     color: white;
     font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
-    /* background-color: #a4b072; */ 
+    /* background-color: #a4b072; */
     border-style: solid;
     border-width: 5px;
     border-color: white;
-    border-radius:10px;
-    padding:30px;
+    border-radius: 10px;
+    padding: 30px;
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
-.homepageButton:hover{
+.homepageButton:hover {
     color: #142C76;
     border-color: #142C76;
 }
 
 /* Header background image */
 .navbar {
-    background-position-x:10rem;
+    background-position-x: 10rem;
     background-size: cover;
 }
-  
+
 .navbar::before {
     content: "";
     position: absolute;
@@ -590,7 +667,7 @@ a:hover {
     height: 100%;
     width: 100%;
 }
-  
+
 .navbar-interior {
     z-index: 2;
 }
@@ -604,7 +681,9 @@ a:hover {
     line-height: inherit;
     white-space: nowrap;
 }
-.navbar-brand:hover, .navbar-brand:focus {
+
+.navbar-brand:hover,
+.navbar-brand:focus {
     text-decoration: none;
 }
 
@@ -614,7 +693,7 @@ a:hover {
 .page-section-top-padded {
     padding-top: 8rem;
 }
-  
+
 
 /* Dashboard side menu */
 /* SIDE MENu */
@@ -640,7 +719,7 @@ a:hover {
     color: #818181;
     display: block;
     transition: 0.3s;
-    
+
 }
 
 .sidebar a:hover {
@@ -656,11 +735,11 @@ a:hover {
 }
 
 .side-menu-home {
-    padding-left:3.5em;
+    padding-left: 3.5em;
 }
 
 .side-menu-icon {
-    padding-left:2em;
+    padding-left: 2em;
 }
 
 .material-icons,
@@ -682,6 +761,10 @@ a:hover {
     transition: margin-left .5s;
 }
 
+/* .friends-content {
+    transition: margin-left .5s;
+} */
+
 .sidenav a,
 .dropdown-btn {
     padding: 6px 8px 6px 16px;
@@ -834,6 +917,7 @@ a:hover {
     height: 40px;
     margin-left: -5px;
 }
+
 .logo {
     position: absolute;
     top: 5px;
@@ -920,6 +1004,7 @@ a:hover {
     .sidebar {
         padding-top: 15px;
     }
+
     .sidebar a {
         font-size: 18px;
     }
@@ -935,6 +1020,7 @@ a:hover {
     justify-content: center;
     align-items: center;
 }
+
 .divider-custom .divider-custom-line {
     width: 100%;
     max-width: 7rem;
@@ -943,19 +1029,24 @@ a:hover {
     border-radius: 1rem;
     border-color: #414d53 !important;
 }
+
 .divider-custom .divider-custom-line:first-child {
     margin-right: 1rem;
 }
+
 .divider-custom .divider-custom-line:last-child {
     margin-left: 1rem;
 }
+
 .divider-custom .divider-custom-icon {
     color: #414d53 !important;
     font-size: 2rem;
 }
+
 .divider-custom .divider-light .divider-custom-line {
     background-color: #fff;
 }
+
 .divider-custom .divider-light .divider-custom-icon {
     color: #fff !important;
 }
@@ -963,6 +1054,7 @@ a:hover {
 .divider-color {
     color: #414d53
 }
+
 .divider-bg-color {
     color: #414d53
 }
@@ -970,6 +1062,7 @@ a:hover {
 .divider-color-light {
     color: #FFF
 }
+
 .divider-bg-color-light {
     color: #FFF
 }
@@ -981,97 +1074,96 @@ a:hover {
 .tag-line-you {
     text-decoration: underline;
     font-size: x-large;
-    font-weight:bold;
+    font-weight: bold;
 }
 
 /* style for messages */
-.alert-message
-{
+.alert-message {
     margin: 20px 0;
     padding: 20px;
     border-left: 3px solid #eee;
 }
-.alert-message h4
-{
+
+.alert-message h4 {
     margin-top: 0;
     margin-bottom: 5px;
 }
-.alert-message p:last-child
-{
+
+.alert-message p:last-child {
     margin-bottom: 0;
 }
-.alert-message code
-{
+
+.alert-message code {
     background-color: #fff;
     border-radius: 3px;
 }
-.alert-message-success
-{
+
+.alert-message-success {
     background-color: #F4FDF0;
     border-color: #3C763D;
 }
-.alert-message-success h4
-{
+
+.alert-message-success h4 {
     color: #3C763D;
 }
-.alert-message-danger
-{
+
+.alert-message-danger {
     background-color: #fdf7f7;
     border-color: #d9534f;
 }
-.alert-message-danger h4
-{
+
+.alert-message-danger h4 {
     color: #d9534f;
 }
-.alert-message-warning
-{
+
+.alert-message-warning {
     background-color: #fcf8f2;
     border-color: #f0ad4e;
 }
-.alert-message-warning h4
-{
+
+.alert-message-warning h4 {
     color: #f0ad4e;
 }
-.alert-message-info
-{
+
+.alert-message-info {
     background-color: #f4f8fa;
     border-color: #5bc0de;
 }
-.alert-message-info h4
-{
+
+.alert-message-info h4 {
     color: #5bc0de;
 }
-.alert-message-default
-{
+
+.alert-message-default {
     background-color: #EEE;
     border-color: #B4B4B4;
 }
-.alert-message-default h4
-{
+
+.alert-message-default h4 {
     color: #000;
 }
-.alert-message-notice
-{
+
+.alert-message-notice {
     background-color: #FCFCDD;
     border-color: #BDBD89;
 }
-.alert-message-notice h4
-{
+
+.alert-message-notice h4 {
     color: #444;
-}    
-        
+}
+
 
 /* Password */
 /* The message box is shown when the user clicks on the password field */
 #passwordRequirementsMessage {
-    display:none;
+    display: none;
     position: relative;
 }
-  
-  /* Add a green text color and a checkmark when the requirements are right */
+
+/* Add a green text color and a checkmark when the requirements are right */
 .valid {
     color: green;
-} 
+}
 
 
 
@@ -1092,9 +1184,11 @@ a:hover {
     box-sizing: border-box;
     margin-left: 2rem;
 }
+
 .profile-picture:hover {
     color: red;
 }
+
 .profile-top-image {
     width: 3rem;
     height: 3rem;
@@ -1113,7 +1207,7 @@ a:hover {
 /* badge image */
 .badge-image {
     position: relative;
-    clear:left;
+    clear: left;
     left: 1px;
     width: 6rem;
     height: 6rem;
@@ -1127,7 +1221,7 @@ a:hover {
     z-index: 2;
     justify-content: left;
     align-items: left;
-  }
+}
 
 .product-img-overlay {
     position: absolute;
@@ -1137,8 +1231,8 @@ a:hover {
     left: 0;
     padding: 1.25rem;
     border-radius: 0.375rem;
-    width:100%;
-    height:95%;
+    width: 100%;
+    height: 95%;
     overflow: hidden;
     opacity: 18%;
     z-index: 1;
@@ -1146,16 +1240,18 @@ a:hover {
 
 
 .product-image-large {
-    display:block;
+    display: block;
     margin-left: auto;
     margin-right: auto;
     width: 70%;
 }
+
 /* product cards */
 .product-card {
     width: 100%;
     padding: 1rem;
 }
+
 .card-body-low-padding {
     opacity: 1;
     display: block;
@@ -1171,7 +1267,7 @@ div.product-card a {
 
 .product-card-text-raised {
     z-index: 5;
-    padding:2rem;
+    padding: 2rem;
 }
 
 .card-text {
@@ -1180,17 +1276,17 @@ div.product-card a {
 
 .product-card-med-image {
     width: 20%;
-    float:left;
+    float: left;
 }
 
-.card{
-    border-radius:5px;
-    text-decoration: none  !important;
+.card {
+    border-radius: 5px;
+    text-decoration: none !important;
     cursor: pointer;
 }
 
 .card-body {
-    border-radius:5px;
+    border-radius: 5px;
     opacity: 1;
     display: block;
     width: 100%;
@@ -1198,6 +1294,7 @@ div.product-card a {
     transition: .5s ease;
     backface-visibility: hidden;
 }
+
 .card-hover {
     transition: .5s ease;
     opacity: 0;
@@ -1208,6 +1305,7 @@ div.product-card a {
     -ms-transform: translate(-50%, -50%);
     text-align: center;
 }
+
 .card-hover-text {
     background-color: #04AA6D;
     color: white;
@@ -1218,7 +1316,7 @@ div.product-card a {
 .card:hover .card-body {
     opacity: 0.6;
 }
-  
+
 .card:hover .card-hover {
     opacity: 1;
 }
@@ -1231,7 +1329,7 @@ div.product-card a {
     width: 5rem;
 }
 
-  /* Welcome text */
+/* Welcome text */
 .welcome-text {
     text-align: right;
     padding-top: 1.5rem;
@@ -1263,7 +1361,8 @@ div.product-card a {
     color: #3c5b6d;
     padding: 150px 0 20px;
 }
-.file-button  {
+
+.file-button {
     display: block;
     width: 240px;
     height: 50px;
@@ -1280,7 +1379,7 @@ div.product-card a {
 
 /* website image (static pages) */
 .website-image {
-    padding-top:1rem;
+    padding-top: 1rem;
     display: inline-flex;
     font-size: .75rem;
     justify-content: center;
@@ -1291,57 +1390,64 @@ div.product-card a {
 
 .website-image-95 {
     width: 95%;
-    
+
 }
 
 /* Workspace progress */
 .pb-line {
     stroke: #2c3e50;
-    stroke-width:2;
+    stroke-width: 2;
 }
+
 .pb-line-enroll {
-    stroke:#534741;
-    stroke-width:5;
+    stroke: #534741;
+    stroke-width: 5;
 }
+
 .pb-line-complete {
-    stroke:#5de239;
-    stroke-width:5;
+    stroke: #5de239;
+    stroke-width: 5;
 }
+
 .pb-line-in-progress {
-    stroke:#5de239;
-    stroke-width:5;
+    stroke: #5de239;
+    stroke-width: 5;
 }
+
 .pb-circle {
-    fill: #2c3e50; 
-    stroke-width:0;
+    fill: #2c3e50;
+    stroke-width: 0;
 }
+
 .pb-circle-in-progress {
     /*fill: #238d76; */
     fill: #534741;
-    stroke-width:0;
+    stroke-width: 0;
 }
+
 .pb-circle-complete {
-    fill: #5de239; 
-    stroke-width:1;
+    fill: #5de239;
+    stroke-width: 1;
 }
+
 .pb-circle-enroll {
-    fill: #534741; 
-    stroke-width:0;
+    fill: #534741;
+    stroke-width: 0;
 }
 
 
 
 .pb-container {
-    float:left;
-    width:5%;
+    float: left;
+    width: 5%;
 }
 
 .pb-text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    float:left;
-    width:95%;
+    float: left;
+    width: 95%;
     padding-top: 3rem;
 
 }
@@ -1354,14 +1460,16 @@ div.product-card a {
 
 .pb-item-icon {
     position: relative;
-    left:-4.65rem;
-    top:0rem;
+    left: -4.65rem;
+    top: 0rem;
 }
+
 .pb-item {
     position: relative;
     left: 2.7rem;
     padding-bottom: 2rem;
 }
+
 .pb-item-in-progress {
     position: relative;
     left: 2.5rem;
@@ -1378,21 +1486,21 @@ div.product-card a {
     padding-left: .7rem;
 }
 
- /* The switch  */
+/* The switch  */
 .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
 }
-  
+
 /* Hide default HTML checkbox */
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }
-  
+
 /* The slider */
 .switch {
     position: relative;
@@ -1400,9 +1508,11 @@ div.product-card a {
     width: 90px;
     height: 34px;
 }
-  
-.switch input {display:none;}
-  
+
+.switch input {
+    display: none;
+}
+
 .slider {
     position: absolute;
     cursor: pointer;
@@ -1413,9 +1523,9 @@ div.product-card a {
     background-color: #2c3e50;
     -webkit-transition: .4s;
     transition: .4s;
-     border-radius: 34px;
+    border-radius: 34px;
 }
-  
+
 .slider:before {
     position: absolute;
     content: "";
@@ -1428,51 +1538,52 @@ div.product-card a {
     transition: .4s;
     border-radius: 50%;
 }
-  
-input:checked + .slider {
+
+input:checked+.slider {
     background-color: #534741;
 }
-  
-input:focus + .slider {
+
+input:focus+.slider {
     box-shadow: 0 0 1px #2196F3;
 }
-  
-input:checked + .slider:before {
+
+input:checked+.slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(55px);
 }
-  
+
 
 .slider:after {
-   content:'To Do';
-   color: white;
-   display: block;
-   position: absolute;
-   transform: translate(-50%,-50%);
-   top: 50%;
-   left: 60%;
-   font-size: 10px;
-   font-family: Verdana, sans-serif;
-}
-  
-input:checked + .slider:after {  
-    content:'Done';
+    content: 'To Do';
+    color: white;
+    display: block;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 60%;
+    font-size: 10px;
+    font-family: Verdana, sans-serif;
+}
+
+input:checked+.slider:after {
+    content: 'Done';
     top: 50%;
     left: 40%;
 }
-  
-  /*--------- END the switch --------*/
+
+/*--------- END the switch --------*/
 
 .grouping {
     position: relative;
-    width:100%;
-    height:4rem;
+    width: 100%;
+    height: 4rem;
     padding-top: 1rem;
     padding-left: 1rem;
 }
+
 .grouping a {
-    color: rgba(99, 19, 18, 0.85);  
+    color: rgba(99, 19, 18, 0.85);
 }
 
 .grouping-background {
@@ -1483,37 +1594,39 @@ input:checked + .slider:after {
     float: left;
     width: 26%;
 }
+
 .float-right {
-    float:left;
-    width:70%;
+    float: left;
+    width: 70%;
 }
 
 .codingcoach-red {
-    color: rgba(99, 19, 18, 0.85);  
+    color: rgba(99, 19, 18, 0.85);
 }
+
 .codingcoach-red-45-opacity {
     color: rgba(99, 19, 18, 0.45);
 }
 
-  
+
 .txt-white {
-    color:#FFF !important;
-    text-decoration:none;
+    color: #FFF !important;
+    text-decoration: none;
 }
 
 
 
 /* Iframe size */
 .iframe-size-control {
-    position: relative;    
-    width: 100%; 
+    position: relative;
+    width: 100%;
 }
 
 
 
 
 
-  /* New Card stuff */
+/* New Card stuff */
 .card {
     position: relative;
     display: flex;
@@ -1523,46 +1636,49 @@ input:checked + .slider:after {
     background-clip: border-box;
     border: 1px solid rgba(0, 0, 0, 0.125);
 }
-.card > hr {
+
+.card>hr {
     margin-right: 0;
-    margin-left: 0; 
+    margin-left: 0;
 }
-.card > .list-group:first-child .list-group-item:first-child {
+
+.card>.list-group:first-child .list-group-item:first-child {
     border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem; 
+    border-top-right-radius: 0.25rem;
 }
-.card > .list-group:last-child .list-group-item:last-child {
+
+.card>.list-group:last-child .list-group-item:last-child {
     border-bottom-right-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem; 
+    border-bottom-left-radius: 0.25rem;
 }
 
 .card-body {
-    border-radius:5px;
+    border-radius: 5px;
     flex: 1 1 auto;
-    padding: 1.25rem; 
+    padding: 1.25rem;
 }
 
 .card-title {
-    margin-bottom: 0.75rem; 
+    margin-bottom: 0.75rem;
 }
-  
+
 .card-subtitle {
     margin-top: -0.375rem;
-    margin-bottom: 0; 
+    margin-bottom: 0;
 }
-  
+
 .card-text:last-child {
-    margin-bottom: 0; 
+    margin-bottom: 0;
 }
 
 .card-link:hover {
-    text-decoration: none; 
+    text-decoration: none;
 }
 
-.card-link + .card-link {
-    margin-left: 1.25rem; 
+.card-link+.card-link {
+    margin-left: 1.25rem;
 }
-  
+
 .card-header {
     padding: 0.5rem .5rem;
     margin-bottom: 0;
@@ -1570,32 +1686,33 @@ input:checked + .slider:after {
 }
 
 .card-header:first-child {
-    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; 
+    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
 }
-.card-header + .list-group .list-group-item:first-child {
-    border-top: 0; 
+
+.card-header+.list-group .list-group-item:first-child {
+    border-top: 0;
 }
 
 .card-footer {
     padding: 0.75rem 1.25rem;
     background-color: #17191a;
-    border-top: 1px solid rgba(0, 0, 0, 0.125); 
+    border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
 .card-footer:last-child {
-    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); 
+    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
 }
 
 .card-header-tabs {
     margin-right: -0.625rem;
     margin-bottom: -0.75rem;
     margin-left: -0.625rem;
-    border-bottom: 0; 
+    border-bottom: 0;
 }
 
 .card-header-pills {
     margin-right: -0.625rem;
-    margin-left: -0.625rem; 
+    margin-left: -0.625rem;
 }
 
 .card-img-overlay {
@@ -1604,129 +1721,151 @@ input:checked + .slider:after {
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 1.25rem; 
+    padding: 1.25rem;
 }
 
 .card-img {
     width: 100%;
-    border-radius: calc(0.25rem - 1px); 
+    border-radius: calc(0.25rem - 1px);
 }
 
 .card-img-top {
     width: 100%;
     border-top-left-radius: calc(0.25rem - 1px);
-    border-top-right-radius: calc(0.25rem - 1px); 
+    border-top-right-radius: calc(0.25rem - 1px);
 }
 
 .card-img-bottom {
     width: 100%;
     border-bottom-right-radius: calc(0.25rem - 1px);
-    border-bottom-left-radius: calc(0.25rem - 1px); 
+    border-bottom-left-radius: calc(0.25rem - 1px);
 }
-  
-  .card-deck {
+
+.card-deck {
     display: flex;
-    flex-direction: column; }
-    .card-deck .card {
-      margin-bottom: 15px; }
-    @media (min-width: 576px) {
-      .card-deck {
+    flex-direction: column;
+}
+
+.card-deck .card {
+    margin-bottom: 15px;
+}
+
+@media (min-width: 576px) {
+    .card-deck {
         flex-flow: row wrap;
         margin-right: -15px;
-        margin-left: -15px; }
-        .card-deck .card {
-          display: flex;
-          flex: 1 0 0%;
-          flex-direction: column;
-          margin-right: 15px;
-          margin-bottom: 0;
-          margin-left: 15px; } }
-  
+        margin-left: -15px;
+    }
+
+    .card-deck .card {
+        display: flex;
+        flex: 1 0 0%;
+        flex-direction: column;
+        margin-right: 15px;
+        margin-bottom: 0;
+        margin-left: 15px;
+    }
+}
+
 .card-group {
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 }
-.card-group > .card {
-    margin-bottom: 15px; 
+
+.card-group>.card {
+    margin-bottom: 15px;
 }
 
 @media (min-width: 576px) {
     .card-group {
-        flex-flow: row wrap; 
+        flex-flow: row wrap;
     }
-    .card-group > .card {
+
+    .card-group>.card {
         flex: 1 0 0%;
-        margin-bottom: 0; 
+        margin-bottom: 0;
     }
-    .card-group > .card + .card {
+
+    .card-group>.card+.card {
         margin-left: 0;
-        border-left: 0; 
+        border-left: 0;
     }
-    .card-group > .card:not(:last-child) {
+
+    .card-group>.card:not(:last-child) {
         border-top-right-radius: 0;
-        border-bottom-right-radius: 0; 
+        border-bottom-right-radius: 0;
     }
-    .card-group > .card:not(:last-child) .card-img-top,
-    .card-group > .card:not(:last-child) .card-header {
-        border-top-right-radius: 0; 
+
+    .card-group>.card:not(:last-child) .card-img-top,
+    .card-group>.card:not(:last-child) .card-header {
+        border-top-right-radius: 0;
     }
-    .card-group > .card:not(:last-child) .card-img-bottom,
-    .card-group > .card:not(:last-child) .card-footer {
-        border-bottom-right-radius: 0; 
+
+    .card-group>.card:not(:last-child) .card-img-bottom,
+    .card-group>.card:not(:last-child) .card-footer {
+        border-bottom-right-radius: 0;
     }
-    .card-group > .card:not(:first-child) {
+
+    .card-group>.card:not(:first-child) {
         border-top-left-radius: 0;
-        border-bottom-left-radius: 0; 
+        border-bottom-left-radius: 0;
     }
-    .card-group > .card:not(:first-child) .card-img-top,
-    .card-group > .card:not(:first-child) .card-header {
-        border-top-left-radius: 0; 
+
+    .card-group>.card:not(:first-child) .card-img-top,
+    .card-group>.card:not(:first-child) .card-header {
+        border-top-left-radius: 0;
     }
-    .card-group > .card:not(:first-child) .card-img-bottom,
-    .card-group > .card:not(:first-child) .card-footer {
-        border-bottom-left-radius: 0; 
+
+    .card-group>.card:not(:first-child) .card-img-bottom,
+    .card-group>.card:not(:first-child) .card-footer {
+        border-bottom-left-radius: 0;
     }
 }
-  
+
 .card-columns .card {
-    margin-bottom: 0.75rem; 
+    margin-bottom: 0.75rem;
 }
-  
+
 @media (min-width: 576px) {
     .card-columns {
         column-count: 3;
         column-gap: 1.25rem;
         orphans: 1;
-        widows: 1; 
+        widows: 1;
     }
+
     .card-columns .card {
         display: inline-block;
-        width: 100%; 
-    } 
+        width: 100%;
+    }
 }
-  
-.accordion > .card {
-    overflow: hidden; 
+
+.accordion>.card {
+    overflow: hidden;
 }
-.accordion > .card:not(:first-of-type) .card-header:first-child {
-    border-radius: 0; 
+
+.accordion>.card:not(:first-of-type) .card-header:first-child {
+    border-radius: 0;
 }
-.accordion > .card:not(:first-of-type):not(:last-of-type) {
+
+.accordion>.card:not(:first-of-type):not(:last-of-type) {
     border-bottom: 0;
-    border-radius: 0; 
+    border-radius: 0;
 }
 
-.accordion > .card:first-of-type {
+.accordion>.card:first-of-type {
     border-bottom: 0;
     border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0; 
+    border-bottom-left-radius: 0;
 }
-.accordion > .card:last-of-type {
+
+.accordion>.card:last-of-type {
     border-top-left-radius: 0;
-    border-top-right-radius: 0; 
+    border-top-right-radius: 0;
 }
-.accordion > .card .card-header {
-    margin-bottom: -1px; 
+
+.accordion>.card .card-header {
+    margin-bottom: -1px;
 }
 
 .resource-complete {
@@ -1737,11 +1876,11 @@ input:checked + .slider:after {
 }
 
 .resource-complete-checkbox {
-    width: 30px; 
+    width: 30px;
     height: 30px;
-    position:relative;
+    position: relative;
     float: left;
-    padding-left:2rem;
+    padding-left: 2rem;
 }
 
 .resource-complete-text {
@@ -1749,12 +1888,13 @@ input:checked + .slider:after {
     color: #2c3e50;
     float: left;
     padding-right: 2rem;
-    padding-left:2rem;  
+    padding-left: 2rem;
 }
 
 .fs-large {
     font-size: large;
 }
+
 .fs-xlarge {
     font-size: x-large;
 }
@@ -1774,6 +1914,7 @@ input:checked + .slider:after {
     padding-right: 2rem;
     padding-bottom: 3rem;
 }
+
 .chosen-container {
     width: 50%;
     float: left;
@@ -1782,12 +1923,13 @@ input:checked + .slider:after {
 }
 
 .available-items {
-    
+
     display: grid;
     /*grid-template-rows: repeat(5, 1fr); */
     gap: 10px;
     min-height: 3rem;
 }
+
 .chosen-items {
     display: grid;
     /*grid-template-rows: repeat(5, 1fr); */
@@ -1816,6 +1958,7 @@ input:checked + .slider:after {
     border-radius: .5em;
     padding: 10px;
 }
+
 .option-border {
     border: 3px solid #aaa;
     background-color: #eee;
@@ -1828,10 +1971,11 @@ input:checked + .slider:after {
     width: 48%;
     padding-right: 1rem;
 }
+
 .results-right {
     float: left;
     width: 48%;
-    
+
 }
 
 /* accordion */
@@ -1876,9 +2020,9 @@ input:checked + .slider:after {
     font-size: 30px;
     transform: translateY(-50%);
 }
-  
+
 /* Hides the content (height: 0), decreases font size, justifies text and adds transition */
-  
+
 .accordion .content {
     position: relative;
     height: 0;
@@ -1910,16 +2054,16 @@ input:checked + .slider:after {
     font-size: 30px;
 }
 
-  /* END accordion */
+/* END accordion */
 
 
 
-  .button-right {
-      float:right;
-  }
+.button-right {
+    float: right;
+}
 
-  /*  EVENT founder */
-  .founder-event-card {
+/*  EVENT founder */
+.founder-event-card {
     background-color: #04AA6D;
     color: white;
     font-size: 1.4rem;
@@ -1934,17 +2078,23 @@ input:checked + .slider:after {
 .material-icons {
     padding-bottom: 3px;
 }
-.material-icons.md-48 { 
+
+.material-icons.md-48 {
     font-size: 192px;
     padding-left: 25%;
- }
+}
 
 
-.dashboard-content{
+.dashboard-content {
     transition: margin-left .5s;
 }
 
-.sidenav a, .dropdown-btn {
+/* .friends-content {
+    transition: margin-left .5s;
+} */
+
+.sidenav a,
+.dropdown-btn {
     padding: 6px 8px 6px 16px;
     text-decoration: none;
     font-size: 20px;
@@ -1952,16 +2102,18 @@ input:checked + .slider:after {
     display: block;
     border: none;
     background: none;
-    width:100%;
+    width: 100%;
     text-align: left;
     cursor: pointer;
     outline: none;
 }
 
 /* On mouse-over */
-.sidenav a:hover, .dropdown-btn:hover {
+.sidenav a:hover,
+.dropdown-btn:hover {
     color: #f1f1f1;
 }
+
 /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
 .dropdown-container {
     display: none;
@@ -1974,6 +2126,7 @@ input:checked + .slider:after {
     float: right;
     padding-right: 8px;
 }
+
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 
 
@@ -1982,7 +2135,7 @@ input:checked + .slider:after {
     border: none;
     border-radius: 5%;
     cursor: pointer;
-    
+
 }
 
 .item-list:hover {
@@ -1993,7 +2146,7 @@ input:checked + .slider:after {
     margin-left: 2%;
 }
 
-.list-grid{
+.list-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 }
diff --git a/client/agora/public/css/topic.css b/client/agora/public/css/topic.css
index b88b4037..64d4f0f4 100644
--- a/client/agora/public/css/topic.css
+++ b/client/agora/public/css/topic.css
@@ -586,7 +586,7 @@
 
   .profile-status {
     margin-top: 36px;
-    margin-left: 230px;
+    margin-left: 225px;
     font-weight: 500px;
   }
 
@@ -619,16 +619,22 @@
     width: 100%;
   }
 
+  .profile-status-container {
+    display: flex;
+    align-items: center;
+}
+
   .arrow {
     cursor: pointer;
     border: solid black;
     border-width: 0 3px 3px 0;
     display: inline-block;
-    padding: 3px;
-    height: 15px;
-    width: 15px;
+    padding: 1px;
+    height: 10px;
+    width: 10px;
     background-color: transparent;
-    margin-right: 20px;
+    margin-top: 36px;
+    margin-left: 20px;
   }
 
   .arrow:focus {
diff --git a/client/agora/public/js/dashboard.js b/client/agora/public/js/dashboard.js
index 64f373c6..9fdf5942 100644
--- a/client/agora/public/js/dashboard.js
+++ b/client/agora/public/js/dashboard.js
@@ -1187,6 +1187,50 @@ function getOffset( el ) {
     };
 }
 
+const friendsContainer = document.querySelectorAll( '#friend-card' );
+
+function filterFriends( searchTerm ){
+
+    for ( const friend of friendsContainer ){
+
+        const friendCard = friend.outerText.toLowerCase();
+
+        if ( friendCard.includes( searchTerm.toLowerCase() ) ){
+            friend.style.display = 'block';
+        } else {
+            friend.style.display = 'none';
+        }
+    }
+}
+
+function deleteFriend( friendshipId ) {
+    if (confirm( "Are you sure you want to remove this friend?") == true){
+        fetch( "/api/v1/auth/friends/deleteFriend", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify( {
+                "friendshipId": friendshipId,
+            })
+        })
+        .then( (response) => {
+            if ( response.status == 200 ) {
+                const message = 'Friend deleted successfully';
+                console.log( message );
+                alert( message );
+                location.reload();
+            }
+            else{
+                const errorMessage = 'Failed to delete friend.';
+                console.error( errorMessage );
+                alert( errorMessage );
+            }
+        })
+        .catch( ( error ) => {
+            console.error( 'Error deleting friend:', error);
+            alert( 'Error deleting friend: ' + error );
+        });
+    }
+};
 
 // manage highlighting of control bar buttons
 if( document.getElementById( "controlbar-buttons-group-1" ) ) {
diff --git a/client/agora/public/js/friends.js b/client/agora/public/js/friends.js
new file mode 100644
index 00000000..3ab7ebca
--- /dev/null
+++ b/client/agora/public/js/friends.js
@@ -0,0 +1,116 @@
+// Takes you to the adding friends page
+const addFriendPage = () => {
+    window.location.href = "/friends/add-friends";
+};
+
+var displayedUsers = new Set();
+const userSearch = document.getElementById( 'user-search' );
+const searchButton = document.getElementById( 'btn-search' );
+const friendsDashboard = document.getElementById( 'friends-dashboard' );
+const redCircle = document.getElementById( 'requestCount' );
+var authUser = [ ];
+var friends = [ ];
+var requests = [ ];
+
+// gets the authenticated user, their friends and sent friend requests
+window.onload = getResources = () => {
+    
+    fetch( "/api/v1/auth/friends/getResources", {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    } )
+        .then( ( response ) => response.json() )
+        .then( ( response ) => {
+            authUser.push( response[0]);
+            friends.push( response[1] );
+            requests.push( response[2] );
+            let requestCount = response[3][0].count;
+            if ( requestCount > 0){
+                let span = document.createElement("span");
+                span.textContent = requestCount;
+                redCircle.appendChild(span);
+                redCircle.style.display = "flex";
+            }
+        } );
+};
+
+
+// queries the users by username
+searchButton.addEventListener( 'click', queryUsers = () => {
+    fetch( "/api/v1/auth/user/username/" + userSearch.value, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    } )
+        .then( ( response ) =>  response.json() )
+        .then( ( response ) => {
+
+            for ( i = 0; i < response.length; i++ ) {
+                var data = response[i];
+                var isFriend = false;
+                var isSentRequest = false;
+                for( j = 0; j < friends[0].length; j++ ){
+                    if ( ( data.username == friends[0][j].friend_username ) ){
+                        isFriend = true;
+                    }
+                }
+                for( k = 0; k < requests[0].length; k++ ){
+                    if( ( data.userId == requests[0][k].initiatedby_id ) ||
+                        ( data.userId == requests[0][k].recipient_id ) ){
+                        isSentRequest =  true;
+                    }
+                }
+                if ( !( displayedUsers.has( data.username ) ) && 
+                !( data.username == authUser[0].username ) && !( isFriend ) && !( isSentRequest ) ) {
+                    createUserCard( data );
+                    displayedUsers.add( data.username );
+                }
+            }
+        } );
+} );
+
+// creates a user card for each user
+function createUserCard( userData ){
+    var rowDiv = document.createElement( "div" );
+    rowDiv.className = "row row-cols-1 row-cols-md-3 g-4";
+    var columnDiv = document.createElement( "div" );
+    columnDiv.className = "col mb-3 gallery-col align-items-stretch gallery-col";
+    var cardDiv = document.createElement( "div" );
+    cardDiv.className = "card h-100";
+    var cardBodyDiv = document.createElement( "div" );
+    cardBodyDiv.className = "card-body d-flex flex-column";
+    var username = document.createElement( "h5" );
+    username.id = userData.userId;
+    username.innerText = userData.username;
+    var userProfile = document.createElement( "img" );
+    userProfile.width = 225;
+    userProfile.src = "/assets/uploads/profile/" + userData.profileFilename;
+    userProfile.alt = "user's profile";
+    var userContainer = document.createElement( "div" );
+    userContainer.id = "user-container-" + userData.userId;
+    userContainer.style.display = "flex";
+    userContainer.style.marginRight = "5px";
+
+    cardBodyDiv.appendChild( username );
+    cardBodyDiv.appendChild( userProfile );
+    cardDiv.appendChild( cardBodyDiv );
+    columnDiv.appendChild( cardDiv );
+    rowDiv.append( columnDiv );
+    userContainer.appendChild( rowDiv );
+    friendsDashboard.appendChild( userContainer );
+    
+    
+    userContainer.addEventListener( 'click', sendFriendRequest = () => {
+        if( confirm("Are you sure you want to send a friend request to " + userData.username + "?") == true){
+            userContainer.style.display = "none";
+            fetch( "/api/v1/auth/friends/sendFriendRequest", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify ( {
+                    "username": userData.username,
+                    "userId": userData.userId
+                } )
+            } ); 
+        }
+    } );
+    
+}
diff --git a/client/agora/public/js/scripts.js b/client/agora/public/js/scripts.js
index eb1c6387..7abe2447 100644
--- a/client/agora/public/js/scripts.js
+++ b/client/agora/public/js/scripts.js
@@ -18,39 +18,41 @@ let sideBarStatus = true;
 /**
  * Triggered when the page is loaded.
  */
-window.addEventListener( "load", () => {
+window.addEventListener("load", () => {
     // Determines whether the user is on a page that contains the sidebar
-    if ( document.querySelector( "#agoraSideBar" ) ) {
+    if (document.querySelector("#agoraSideBar")) {
         loadClientSettings();
 
         // Only add the hover events if the sidebar is not in the docked position
-        if ( !clientSettings.sideBarLocked ) {
+        if (!clientSettings.sideBarLocked) {
             // add events for toggle sidebar
-            if( document.getElementById( "agoraSideBar" ) ) {
+            if (document.getElementById("agoraSideBar")) {
                 toggleSidebar();
-                document.getElementById( "agoraSideBar" ).addEventListener( "mouseenter", toggleSidebar );
-                document.getElementById( "agoraSideBar" ).addEventListener( "mouseleave", toggleSidebar );
+                document.getElementById("agoraSideBar").addEventListener("mouseenter", toggleSidebar);
+                document.getElementById("agoraSideBar").addEventListener("mouseleave", toggleSidebar);
             }
         }
-        
-        if ( document.getElementById( "pin-menu" ) ) {
-            document.getElementById( "pin-menu" ).addEventListener( "click", lockSidebar );
+
+        if (document.getElementById("pin-menu")) {
+            document.getElementById("pin-menu").addEventListener("click", lockSidebar);
         }
     }
-} );
+});
 
 /**
  * Toggles the sidebar.
  */
 function toggleSidebar() {
-    if ( !sideBarStatus ) {
-        document.getElementById( "agoraSideBar" ).style.width = "250px";
-        document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
+    if (!sideBarStatus) {
+        document.getElementById("agoraSideBar").style.width = "250px";
+        document.querySelector(".dashboard-content").style.marginLeft = "250px";
+        // document.querySelector(".friends-content").style.marginLeft = "250px";
     }
     else {
-        document.getElementById( "agoraSideBar" ).style.width = "85px";
-        if( window.innerWidth > 992 ) {
-            document.querySelector( ".dashboard-content" ).style.marginLeft = "85px";
+        document.getElementById("agoraSideBar").style.width = "85px";
+        if (window.innerWidth > 992) {
+            document.querySelector(".dashboard-content").style.marginLeft = "85px";
+            // document.querySelector(".friends-content").style.marginLeft = "85px";
         }
     }
     sideBarStatus = !sideBarStatus;
@@ -60,23 +62,24 @@ function toggleSidebar() {
  * Locks the sidebar into position.
  */
 function lockSidebar() {
-    if ( !clientSettings.sideBarLocked ) {
-        document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
+    if (!clientSettings.sideBarLocked) {
+        document.querySelector(".dashboard-content").style.marginLeft = "250px";
+        // document.querySelector(".friends-content").style.marginLeft = "250px";
 
-        document.getElementById( "agoraSideBar" ).removeEventListener( "mouseenter", toggleSidebar );
-        document.getElementById( "agoraSideBar" ).removeEventListener( "mouseleave", toggleSidebar );
+        document.getElementById("agoraSideBar").removeEventListener("mouseenter", toggleSidebar);
+        document.getElementById("agoraSideBar").removeEventListener("mouseleave", toggleSidebar);
 
-        document.getElementById( "agoraSideBar" ).style.width = "250px";
+        document.getElementById("agoraSideBar").style.width = "250px";
 
-        document.getElementById( "tack-icon" ).style.rotate = "45deg";
+        document.getElementById("tack-icon").style.rotate = "45deg";
 
         sideBarStatus = true; // important to prevent glitching when enabling/disabling the menu
     }
     else {
-        document.getElementById( "tack-icon" ).style.rotate = "0deg";
+        document.getElementById("tack-icon").style.rotate = "0deg";
 
-        document.getElementById( "agoraSideBar" ).addEventListener( "mouseenter", toggleSidebar );
-        document.getElementById( "agoraSideBar" ).addEventListener( "mouseleave", toggleSidebar );
+        document.getElementById("agoraSideBar").addEventListener("mouseenter", toggleSidebar);
+        document.getElementById("agoraSideBar").addEventListener("mouseleave", toggleSidebar);
     }
 
     clientSettings.sideBarLocked = !clientSettings.sideBarLocked;
@@ -88,21 +91,22 @@ function lockSidebar() {
  * Loads the client settings from local storage and sets the properties associated with them.
  */
 function loadClientSettings() {
-    if ( !localStorage.getItem( 'client-settings' ) ) {
+    if (!localStorage.getItem('client-settings')) {
         saveClientSettings();
     }
     else {
-        clientSettings = JSON.parse( localStorage.getItem( 'client-settings' ) );
+        clientSettings = JSON.parse(localStorage.getItem('client-settings'));
 
-        if ( clientSettings.sideBarLocked ) {
-            document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
+        if (clientSettings.sideBarLocked) {
+            document.querySelector(".dashboard-content").style.marginLeft = "250px";
+            // document.querySelector(".friends-content").style.marginLeft = "250px";
 
-            document.getElementById( "agoraSideBar" ).removeEventListener( "mouseenter", toggleSidebar );
-            document.getElementById( "agoraSideBar" ).removeEventListener( "mouseleave", toggleSidebar );
+            document.getElementById("agoraSideBar").removeEventListener("mouseenter", toggleSidebar);
+            document.getElementById("agoraSideBar").removeEventListener("mouseleave", toggleSidebar);
 
-            document.getElementById( "agoraSideBar" ).style.width = "250px";
+            document.getElementById("agoraSideBar").style.width = "250px";
 
-            document.getElementById( "tack-icon" ).style.rotate = "45deg";
+            document.getElementById("tack-icon").style.rotate = "45deg";
 
             sideBarStatus = true; // important to prevent glitching when enabling/disabling the menu
         }
@@ -113,5 +117,5 @@ function loadClientSettings() {
  * Saves the client settings to local storage.
  */
 function saveClientSettings() {
-    localStorage.setItem( 'client-settings', JSON.stringify( clientSettings ) );
+    localStorage.setItem('client-settings', JSON.stringify(clientSettings));
 }
diff --git a/client/agora/public/js/topic-view.js b/client/agora/public/js/topic-view.js
index 73010e4b..ef8866c8 100644
--- a/client/agora/public/js/topic-view.js
+++ b/client/agora/public/js/topic-view.js
@@ -1179,13 +1179,13 @@ if ( openTopicBtn ) {
 const toggleProfileList = () => {
     let arrow = document.getElementById( "profiles-toggle" );
 
-    if ( arrow.classList.contains( "down-arrow" ) ) {
+    if ( arrow.classList.contains( "up-arrow" ) ) {
         document.getElementById( "permissions-box" ).style.display = "none";
-        arrow.setAttribute( 'class', 'arrow up-arrow' );
+        arrow.setAttribute( 'class', 'arrow down-arrow' );
     }
     else {
         document.getElementById( "permissions-box" ).style.display = "flex";
-        arrow.setAttribute( 'class', 'arrow down-arrow' );
+        arrow.setAttribute( 'class', 'arrow up-arrow' );
     }
 };
 
@@ -1315,6 +1315,43 @@ const idAndFetch = () => {
     }
 };
 
+const FetchShared = async () => {
+    console.log( "FetchShared() : Start" );
+    const [ isTopic, id ] = getPrefixAndId();
+    //console.log( isTopic, id );
+    if ( isTopic && id ) {
+        fetch( "api/v1/auth/topics/" + id, {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+        } )
+            .then( ( response ) => response.json() )
+            .then( ( response ) => {
+                fillFields(
+                    response.results.topicName,
+                    response.results.topicDescription,
+                    response.results.topicImage
+                );
+            } );
+    }
+    else if ( id ) {
+        //console.log( "idAndFetch() : fetch workspace" );
+        await fetch( "api/v1/auth/workspaces/" + id, {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+        } )
+            .then( ( response ) => response.json() )
+            .then( ( response ) => {
+                fillFields(
+                    response.results.workspaceName,
+                    response.results.workspaceDescription,
+                    response.results.workspaceImage
+                );
+                console.log( "FetchShared() : End - workspacePath" );
+            } );
+    }
+    console.log( "FetchShared() : End FINAL" );
+};
+
 const getTags = async () => {
     const [ isTopic, id ] = getPrefixAndId();
     if ( isTopic && id ) {
diff --git a/client/agora/public/js/user.js b/client/agora/public/js/user.js
index 2ebe5e23..7701c622 100644
--- a/client/agora/public/js/user.js
+++ b/client/agora/public/js/user.js
@@ -72,7 +72,6 @@ if( document.getElementById( 'userManageButton' ) ) {
     } );
 }
 
-
 let manageEmail = document.getElementById( 'manageEmail' );
 if( manageEmail ) {
     // call to non-existant endpoint to check if email is unique
@@ -280,3 +279,69 @@ if( document.getElementById( 'passwordToggle' ) ) {
         pwMask( 'psw' );
     } );
 }
+  
+const acceptRequestButton = document.getElementById( 'btn-accept-request' );
+
+acceptRequestButton.addEventListener( 'click', () => {
+    // Get the friend_id from the data-id attribute of the button
+    const friendshipId = acceptRequestButton.getAttribute( 'data-id' );
+
+    fetch( '/api/v1/auth/friends/requestResponse', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify( {
+            friendship_id: friendshipId, // Pass the friend_id as a parameter
+        } ),
+    } )
+        .then( ( response ) => {
+            if ( response.status === 201 ) {
+                // Successfully accepted friend request
+                const message = 'Friend request accepted successfully.';
+                console.log( message );
+                alert( message ); // Display a pop-up with the message
+                location.reload(); // Refresh the page
+            }
+            else {
+                const errorMessage = 'Failed to accept friend request.';
+                console.error( errorMessage );
+                alert( errorMessage ); // Display a pop-up with the error message
+            }
+        } )
+        .catch( ( error ) => {
+            console.error( 'Error making accept request:', error );
+            alert( 'Error making accept request: ' + error ); // Display a pop-up with the error message
+        } );
+} );
+
+const denyRequestButton = document.getElementById( 'btn-deny-request' );
+
+denyRequestButton.addEventListener( 'click', () => {
+    // Get the friend_id from the data-id attribute of the button
+    const friendshipId = denyRequestButton.getAttribute( 'data-id' );
+    
+    fetch( '/api/v1/auth/friends/requestResponse', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify( {
+            friendship_id: friendshipId, // Pass the friend_id as a parameter
+        } ),
+    } )
+        .then( ( response ) => {
+            if ( response.status === 201 ) {
+                // Successfully denied friend request
+                const message = 'Friend request denied successfully.';
+                console.log( message );
+                alert( message ); // Display a pop-up with the message
+                location.reload(); // Refresh the page
+            }
+            else {
+                const errorMessage = 'Failed to deny friend request.';
+                console.error( errorMessage );
+                alert( errorMessage ); // Display a pop-up with the error message
+            }
+        } )
+        .catch( ( error ) => {
+            console.error( 'Error making deny request:', error );
+            alert( 'Error making deny request: ' + error ); // Display a pop-up with the error message
+        } );
+} );
\ No newline at end of file
diff --git a/client/agora/views/add-friends/add-friends.ejs b/client/agora/views/add-friends/add-friends.ejs
new file mode 100644
index 00000000..8d8a721e
--- /dev/null
+++ b/client/agora/views/add-friends/add-friends.ejs
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <%- include('../partials/head'); %>
+</head>
+
+<!-- 
+-------------TODO---------------
+- Edit class to add "friends-content"
+-->
+
+<!-- Using "dashboard-=content" for CSS use-->
+
+<body id="page-top" class="dashboard-content">
+
+    <!-- Gallery View-->
+    <%- include('../dashboard/side-menu/side-menu.ejs'); %>
+        <%- include('./partials/gallery/note-gallery.ejs') %>
+            <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+            <%- include('../partials/jsincludes'); %>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/client/agora/views/add-friends/partials/gallery/control-bar.ejs b/client/agora/views/add-friends/partials/gallery/control-bar.ejs
new file mode 100644
index 00000000..60d3add7
--- /dev/null
+++ b/client/agora/views/add-friends/partials/gallery/control-bar.ejs
@@ -0,0 +1,41 @@
+<div id="gallery-header">
+    <div class="container-fluid">
+        <div class="row pt-2 pb-2">
+            <div class='col-md-4'>
+                <!--Search bar-->
+                <input id="user-search" class="card-search form-control" placeholder="Enter a username"/>
+            </div>
+
+            <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Dashboard Tools">
+
+                <div class="btn-group" role="group" aria-label="Search">
+                    <button id="btn-search" type="button" class="btn btn-dark" style="margin-right: 7.5px;">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white;">
+                            Search
+                        </span>
+                    </button>
+
+                </div>
+
+                <div class="btn-group" role="group" aria-label="Sign Out">
+                    <button id="btn-logout" type="button" class="btn btn-dark" onclick="logout()">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                            logout
+                        </span>
+                    </button>
+
+                </div>
+
+                <div class="title d-flex align-items-center" role="group" aria-label="Title"
+                    style="margin-left: 12.5px;">
+
+                    <h4 style=" font-size: 30px; color: black; margin: 0;">Add Friends</h4>
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/add-friends/partials/gallery/grid-template.ejs b/client/agora/views/add-friends/partials/gallery/grid-template.ejs
new file mode 100644
index 00000000..f5aa14cd
--- /dev/null
+++ b/client/agora/views/add-friends/partials/gallery/grid-template.ejs
@@ -0,0 +1,69 @@
+<% //name:string, description:string, tags:array, content:array %>
+
+<!-- 
+
+  -------TO ASK GORMANLY-------
+
+  - How can we do something simple like print the current users information
+    -- see example comment below
+
+  -->
+
+<!-- Your HTML structure -->
+<div id="user-container" style="display: none; margin-right: 5px;">
+  <div class="row row-cols-1 row-cols-md-3 g-4 " id="gallery-row">
+    <div class="col mb-3 gallery-col align-items-stretch gallery-col">
+      <div class="card h-100">
+        <div class="card-body d-flex flex-column">
+          <!-- 
+            Add current users template here:
+              - dont forget to add <%= %> (friendId), after the w-gv-card-title- -->
+          <h5 class="card-title" id="w-gv-card-title">
+              User's Email
+          </h5>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!--
+
+  -------TO ASK GORMANLY CONTINUED-------
+
+  - Why can grid-template under dashboard/partials/gallery/ 
+  use ownerWorkspaces but not this one
+    -- For example, why doesn't the commented code below recognize ownerWorkspaces
+    -- remove the "!" from the <% %> in the code
+
+-->
+
+<!-- <div id="grid-container" style="display: none">
+  
+  <div class="row row-cols-1 row-cols-md-3 g-4 " id="gallery-row">
+    <div class="col mb-3 gallery-col align-items-stretch gallery-col">
+      <div class="card h-100" onclick = "createNewWorkspace()">
+          <div class="card-body d-flex flex-column mt-1" id="add">
+            <img src="/assets/img/buttons/new-content.png" class="mx-auto d-block btn-add-content" alt="Add content">
+          </div>
+      </div>
+    </div>
+        
+    <!%
+      for (let i = 0; i <  ownerWorkspaces.length ; i++) { 
+        let topics = [];
+        let tags = [];
+        topics = ownerWorkspaces[i].topics.map(a => a.topicName);
+        tags = ownerWorkspaces[i].tags.map(a => a.tag);
+        renderCard(ownerWorkspaces[i].workspaceId,ownerWorkspaces[i].workspaceName,ownerWorkspaces[i].workspaceDescription,tags,"Workspace", topics); 
+      }
+
+      //render resources for Now
+      for (let i = 0; i <  ownerTopics.length ; i++) { 
+        
+        renderCard(ownerTopics[i].topicId,ownerTopics[i].topicName,ownerTopics[i].topicDescription,["Biom","Chem"],"Topic", null) 
+          
+      }
+      
+    <!%=//c console.log(ownerWorkspaces[0]) %>
+  </div> 
+</div>  -->
\ No newline at end of file
diff --git a/client/agora/views/add-friends/partials/gallery/note-gallery.ejs b/client/agora/views/add-friends/partials/gallery/note-gallery.ejs
new file mode 100644
index 00000000..056fa031
--- /dev/null
+++ b/client/agora/views/add-friends/partials/gallery/note-gallery.ejs
@@ -0,0 +1,13 @@
+
+<!-- add-friends control bar-->
+<%- include('./control-bar.ejs'); %>  
+<% //name:string, description:string, tags:array, content:array %>
+
+<hr class="mt-0">
+<div class="container" id="friends-container">
+  <div id="friends-dashboard" style="display: flex; flex-wrap: wrap;">
+    
+  </div>
+ 
+
+</div>      
\ No newline at end of file
diff --git a/client/agora/views/dashboard-shared/dashboard-shared.ejs b/client/agora/views/dashboard-shared/dashboard-shared.ejs
new file mode 100644
index 00000000..5911af6f
--- /dev/null
+++ b/client/agora/views/dashboard-shared/dashboard-shared.ejs
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <%- include('../partials/head'); %>
+</head>
+
+<body id="page-top" class="dashboard-content">
+
+    <!-- Gallery View-->
+    <%- include('../dashboard/side-menu/side-menu.ejs'); %>
+        <%- include('./partials/gallery/note-gallery.ejs') %>
+            <!-- Legacy About Section-->
+            <section class="page-section-top-padded mb-0" id="about">
+                <div class="container navbar-interior font-weight-bold text-primary right-of-bar">
+
+                    <%- include('../partials/message'); %>
+
+                </div>
+
+                <div class="container right-of-bar">
+                    <div class="divider-custom"></div>
+
+                    <div class="text-left mt-4">
+                        <div id="story1" class="row justify-content-left"></div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+            <%- include('../partials/jsincludes'); %>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/client/agora/views/dashboard-shared/partials/gallery/control-bar.ejs b/client/agora/views/dashboard-shared/partials/gallery/control-bar.ejs
new file mode 100644
index 00000000..476efe77
--- /dev/null
+++ b/client/agora/views/dashboard-shared/partials/gallery/control-bar.ejs
@@ -0,0 +1,56 @@
+<div id="gallery-header">
+    <div class="container-fluid">
+        <div class="row pt-2 pb-2">
+            <!-- <div class="col-md-2">
+                <h4 class="text-primary ">Dashboard</h4>
+            </div> -->
+            <div class='col-md-4'>
+                <!--Search bar-->
+                <input id="topic-search" class="card-search form-control" placeholder="Search"
+                    oninput="queryTopics(document.getElementById('topic-search').value, topicArr) " />
+            </div>
+
+            <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Dashboard Tools">
+                <!-- <div id="controlbar-buttons-group-1" class="controlbar-buttons btn-group me-2" role="group" aria-label="Types">
+                    <button type="button" class="btn btn-primary" onclick="toggleWorkspaceView()">Workspace</button>
+                    <button id="all-initial-selection" type="button" class="btn btn-primary" onclick="toggleAllView()" checked>All</button>
+                    <button type="button" class="btn btn-primary" onclick="toggleTopicView()">Topics</button>
+                </div> -->
+                <div id="controlbar-buttons-group-2" class="controlbar-buttons btn-group me-2" role="group"
+                    aria-label="View">
+                    <button id="select-grid" type="button" class="btn btn-secondary" onclick="toggleGrid()" checked>
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                            grid_view
+                        </span>
+                    </button>
+                    <button id="select-list" type="button" class="btn btn-secondary" onclick="toggleList()">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white;">
+                            format_list_bulleted
+                        </span>
+                    </button>
+                </div>
+
+                <span id="control-bar-tooltip"></span>
+
+                <div class="btn-group" role="group" aria-label="Sign Out">
+                    <button id="btn-logout" type="button" class="btn btn-dark" onclick="logout()">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                            logout
+                        </span>
+                    </button>
+                </div>
+
+                <div class="title d-flex align-items-center" role="group" aria-label="Title"
+                    style="margin-left: 12.5px;">
+
+                    <h4 style=" font-size: 30px; color: black; margin: 0;">Shared Dashboard</h4>
+
+                </div>
+                
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/dashboard-shared/partials/gallery/dropdown.ejs b/client/agora/views/dashboard-shared/partials/gallery/dropdown.ejs
new file mode 100644
index 00000000..93bff2ce
--- /dev/null
+++ b/client/agora/views/dashboard-shared/partials/gallery/dropdown.ejs
@@ -0,0 +1,12 @@
+<div class="dropdown-content" id="dropdown-content">
+    <a id="duplicate-card" ><span class="material-icons">&nbsp;filter_none</span><span
+        class="icon-text">&nbsp;Duplicate</span></a>
+    <a id="copy-link-card"><span class="material-icons">&nbsp;link</span><span class="icon-text">&nbsp;Copy
+        Link</span></a>
+    <a id="new-tab-card"><span class="material-icons">&nbsp;arrow_outward</span><span class="icon-text">&nbsp;Open in
+        new tab</span></a>
+    <a id="rename-card"><span class="material-icons">&nbsp;edit_square</span><span
+        class="icon-text">&nbsp;Rename</span></a>
+</div>
+
+
diff --git a/client/agora/views/dashboard-shared/partials/gallery/grid-template.ejs b/client/agora/views/dashboard-shared/partials/gallery/grid-template.ejs
new file mode 100644
index 00000000..662e736a
--- /dev/null
+++ b/client/agora/views/dashboard-shared/partials/gallery/grid-template.ejs
@@ -0,0 +1,111 @@
+<% //name:string, description:string, tags:array, content:array %>
+    <% const renderCard=(workspaceId,name,desc,tags,contentType, content)=> {
+        //stops text overflow
+        name = name.slice(0,18)
+        if(desc){
+        desc = desc.slice(0,180)
+        }
+        if (contentType === "Topic") {
+        %>
+
+        <!--Topic Card -->
+        <div class="col mb-3 align-items-stretch gallery-col query-countable view-check a-topic">
+            <div class="card h-100" id="t-gv-<%= workspaceId %>" onmouseover="toggleMoreOptionsOn(id)"
+                onmouseout="toggleMoreOptionsOff(id)" onclick="topicReroute(id, false, null)">
+                <div class="dropdown dropbtn trigger1 trigger2 grid-options" id="t-gv-option-<%= workspaceId %>"
+                    style="visibility: hidden">
+                    <img src="/assets/img/buttons/more-options.png" class="dropbtn" />
+                    <%- include('./dropdown.ejs'); %>
+                </div>
+                <div class="card-body d-flex flex-column" id="topic">
+                    <h5 class="card-title" id="t-gv-card-title-<%= workspaceId %>">
+                        <%= name %>
+                    </h5>
+                    <p class="card-text mb-4" id="t-gv-card-desc-<%= workspaceId %>">
+                        <%= desc %>
+                    </p>
+                </div>
+                <div class="card-footer">
+                    <% for(let i=0; i < tags.length; i++) { %>
+                        <span class="badge badge-med topic-badge">
+                            <%= tags[i]%>
+                        </span>
+                        <% } %>
+                            <span class="badge badge-dark note-badge">
+                                <%= contentType %>
+                            </span>
+                </div>
+            </div>
+        </div>
+        <% } else if (contentType==="Workspace" ) { %>
+
+            <!--Workspace Card-->
+            <div class="col mb-3 align-items-stretch gallery-col query-countable view-check a-workspace">
+                <div class="card h-100" id="w-gv-<%= workspaceId %>" onmouseover="toggleMoreOptionsOn(id)"
+                    onmouseout="toggleMoreOptionsOff(id)" onclick="topicReroute(id, false, null)">
+                    <div class="dropdown dropbtn trigger1 trigger2 grid-options" id="w-gv-option-<%= workspaceId %>"
+                        style="visibility: hidden">
+                        <img src="/assets/img/buttons/more-options.png" class="dropbtn" />
+                        <%- include('./dropdown.ejs'); %>
+                    </div>
+                    <div class="card-body d-flex flex-column" id="workspace">
+                        <h5 class="card-title" id="w-gv-card-title-<%= workspaceId %>">
+                            <%= name %>
+                        </h5>
+                        <div id="w-gv-card-desc-<%= workspaceId %>">
+                            <%= desc %>
+                        </div>
+                        <div>
+                            <% if (content) { %>
+                                <ul class="list-group list-group-flush list-grid">
+                                    <% content.slice(0,6).forEach((item)=> {
+                                        if(item) {
+                                        //stops overflow of text
+                                        item = item.slice(0,12)%>
+                                        <!--topicReroute() below has a filler id-->
+
+                                        <li class="list-group-item item-list" title='Open <%=item.slice(0,3)%>'> <span
+                                                class="material-icons document-icon">&nbsp;description</span><span
+                                                class="item-list-text">
+                                                <%= item %>
+                                            </span></li>
+                                        <% }}) %>
+                                </ul>
+                                <% } %>
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <% for(let i=0; i < tags.length; i++) { %>
+                            <span class="badge badge-med topic-badge">
+                                <%= tags[i]%>
+                            </span>
+                            <% } %>
+                                <span class="badge badge-dark note-badge">
+                                    <%= contentType %>
+                                </span>
+                    </div>
+                </div>
+            </div>
+            <% } } %>
+
+                <div id="grid-container" style="display: none">
+
+                    <div class="row row-cols-1 row-cols-md-3 g-4 " id="gallery-row">
+
+                    <%
+                        for (let i = 0; i <  sharedWorkspaces.length ; i++) { 
+                            let topics = [];
+                            let tags = [];
+                            topics = sharedWorkspaces[i].topics.map(a => a.topicName);
+                            tags = sharedWorkspaces[i].tags.map(a => a.tag);
+                            renderCard(sharedWorkspaces[i].workspaceId,sharedWorkspaces[i].workspaceName,sharedWorkspaces[i].workspaceDescription,tags,"Workspace", topics); 
+                        }
+
+                    %>
+                        
+                    <%=//c console.log(sharedWorkspaces[0]) %>
+
+                    </div>
+                </div>
+
+            </div>
\ No newline at end of file
diff --git a/client/agora/views/dashboard-shared/partials/gallery/list-template.ejs b/client/agora/views/dashboard-shared/partials/gallery/list-template.ejs
new file mode 100644
index 00000000..3ac7cc4e
--- /dev/null
+++ b/client/agora/views/dashboard-shared/partials/gallery/list-template.ejs
@@ -0,0 +1,70 @@
+<% const showTags=(tags)=> {
+    for(let i=0; i < tags.length; i++) { %>
+        <span class="badge badge-primary topic-badge">
+            <%= tags[i]%>
+        </span>
+        <% } } %>
+
+            <% //name:string, description:string, tags:array, content:array %>
+                <% const renderListCard=(id,name,desc,tags,contentType, content)=> {
+                    name = name.slice(0,18)
+                    if(desc){
+                    desc = desc.slice(0,180)
+                    }
+                    if (contentType === "Topic") { %>
+
+                    <!--Topic List Member -->
+                    <li class="list-group-item list-view view-check a-topic" id="t-lv-<%= id %>"
+                        onclick="topicReroute(id, false)">
+                        <span id="t-lv-card-title-<%= id %>">
+                            <%=name%>
+                        </span>
+                        <span class="badge badge-dark note-badge" style="position: absolute; left: 33.1%;">
+                            <%=contentType%>
+                        </span>
+                        <span class="badge badge-med topic-badge" style="position: absolute; left: 45.7%">
+                            <% showTags(tags) %>
+                        </span>
+                        <span class="trigger1 trigger2" id="t-lv-option-<%= id %>">
+                            <img class="list-more-options" src="/assets/img/buttons/more-options.png" class="dropbtn" />
+                            <span class="list-view-dropbtn">
+                                <%- include('./dropdown.ejs'); %>
+                            </span>
+                        </span>
+                    </li>
+
+                    <% } else if (contentType==="Workspace" ) { %>
+
+                        <!--Workspace List Member-->
+                        <li class="list-group-item list-view view-check a-workspace" id="w-lv-<%= id %>"
+                            onclick="topicReroute(id, false)">
+                            <span id="w-lv-card-title-<%= id %>">
+                                <%=name%>
+                            </span>
+                            <span class="badge badge-dark note-badge" style="position: absolute; left: 33.1%;">
+                                <%=contentType%>
+                            </span>
+                            <span class="badge badge-med topic-badge" style="position: absolute; left: 45.7%">
+                                <% showTags(tags) %>
+                            </span>
+                            <span class="trigger1 trigger2" id="w-lv-option-<%= id %>">
+                                <img class="list-more-options" src="/assets/img/buttons/more-options.png"
+                                    class="dropbtn" />
+                                <span class="list-view-dropbtn">
+                                    <%- include('./dropdown.ejs'); %>
+                                </span>
+                            </span>
+                        </li>
+                        <% } }%>
+                            </div>
+
+                            <!--List Display-->
+                            <div id="list-container" style="display: none">
+                                <ul class="list-group list-group-flush" style="margin-top: 5%" id="list-column">
+                                    <li class="list-group-item" style="font-weight: bold;">
+                                        <span>Name</span>
+                                        <span style="margin-left: 29%">Type</span>
+                                        <span style="margin-left: 10%">Tags</span>
+                                    </li>
+
+                                </ul>
\ No newline at end of file
diff --git a/client/agora/views/dashboard-shared/partials/gallery/note-gallery.ejs b/client/agora/views/dashboard-shared/partials/gallery/note-gallery.ejs
new file mode 100644
index 00000000..a80bf519
--- /dev/null
+++ b/client/agora/views/dashboard-shared/partials/gallery/note-gallery.ejs
@@ -0,0 +1,14 @@
+<!--Declaring ejs function to display cards-->
+<% //name:string, description:string, tags:array, content:array %>
+
+
+
+    <!-- dashboard control bar-->
+    <%- include('./control-bar.ejs'); %>
+
+        <hr class="mt-0">
+        <div class="container" id="main-container">
+            <%- include('./grid-template.ejs'); %>
+                <%- include('./list-template.ejs'); %>
+
+        </div>
\ No newline at end of file
diff --git a/client/agora/views/dashboard-shared/side-menu/side-menu.ejs b/client/agora/views/dashboard-shared/side-menu/side-menu.ejs
new file mode 100644
index 00000000..67388416
--- /dev/null
+++ b/client/agora/views/dashboard-shared/side-menu/side-menu.ejs
@@ -0,0 +1,72 @@
+<nav>
+    <div class="side-menu-wrapper">
+        <div class="burger-navbar">
+            <div class="container burger-nav-container">
+                <input class="checkbox" type="checkbox" name="" id="" />
+
+                <span class="button-right"
+                    class="navbar-toggler navbar-toggler-right font-weight-bold bg-secondary text-white rounded">
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+
+                </span>
+
+                <div class="menu-items">
+                    <a href="/">
+                        <img src="/assets/img/logos/agora-logo-2023-1.png" style="height:50px" />
+                    </a><br>
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/dashboard">Dashboard</a></li>
+                    <li><a href="/dashboard-shared">Shared</a></li>
+                    <!-- <li><a href="/community">Community</a></li> -->
+
+                </div>
+            </div>
+        </div>
+        <div id="agoraSideBar" class="sidebar">
+            <a href="/">
+                <img src="/assets/img/logos/agora-logo-2023-1.png" class="menuLogo" />
+            </a>
+            <a href="/">
+                <i class="material-icons">home</i>
+                <span class="icon-text side-menu-icon">Home</span>
+            </a>
+            <a href="/dashboard">
+                <i class="material-icons">remove_from_queue</i>
+                <span class="icon-text side-menu-icon">Dashboard</span>
+            </a>
+            <a href="/dashboard-shared">
+                <i class="material-icons">remove_from_queue</i>
+                <span class="icon-text side-menu-icon">Shared</span>
+            </a>
+            <!-- <a href="/community">
+                <i class="material-icons">groups</i>
+                <span class="icon-text"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Community</span></a><br> -->
+
+            <a id="pin-menu" href="#" style="position: absolute; bottom: 80px;">
+                <i id="tack-icon" class="material-icons">push_pin</i>
+                <span class="icon-text side-menu-icon">Dock Sidebar</span>
+            </a>
+
+            <% if(locals.authUser) { %>
+                <a href="/profile/manageProfile"
+                    style="width:100%; position: absolute;bottom: 0; left: -15px;border-top:solid;border-radius:2px;">
+
+                    <% if( locals.authUser.profileFilename.toString().substring(0, 7)=="http://" ||
+                        locals.authUser.profileFilename.toString().substring(0, 8)=="https://" ) { %>
+                        <img src="<%- locals.authUser.profileFilename %>" alt="User Dashboard avatar"
+                            title="User Dashboard" class="profile-top-image" />
+                        <% } else { %>
+                            <img src="<%= process.env.AVATAR_IMAGE_WEB_PATH%><%- locals.authUser.profileFilename %>"
+                                alt="User Dashboard avatar" title="User Dashboard" class="profile-top-image" />
+                            <% } %>
+                                <span class="icon-text">&nbsp;&nbsp;&nbsp;Account</span>
+                </a><br>
+                <% } %>
+        </div>
+    </div>
+
+</nav>
\ No newline at end of file
diff --git a/client/agora/views/dashboard/partials/gallery/control-bar.ejs b/client/agora/views/dashboard/partials/gallery/control-bar.ejs
index a89bcaeb..51675d0c 100644
--- a/client/agora/views/dashboard/partials/gallery/control-bar.ejs
+++ b/client/agora/views/dashboard/partials/gallery/control-bar.ejs
@@ -6,23 +6,27 @@
             </div> -->
             <div class='col-md-4'>
                 <!--Search bar-->
-                <input id="topic-search" class="card-search form-control" placeholder="Search" oninput="queryTopics(document.getElementById('topic-search').value, topicArr) "/>
+                <input id="topic-search" class="card-search form-control" placeholder="Search"
+                    oninput="queryTopics(document.getElementById('topic-search').value, topicArr) " />
             </div>
-    
+
             <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Dashboard Tools">
                 <!-- <div id="controlbar-buttons-group-1" class="controlbar-buttons btn-group me-2" role="group" aria-label="Types">
                     <button type="button" class="btn btn-primary" onclick="toggleWorkspaceView()">Workspace</button>
                     <button id="all-initial-selection" type="button" class="btn btn-primary" onclick="toggleAllView()" checked>All</button>
                     <button type="button" class="btn btn-primary" onclick="toggleTopicView()">Topics</button>
                 </div> -->
-                <div id="controlbar-buttons-group-2" class="controlbar-buttons btn-group me-2" role="group" aria-label="View">
+                <div id="controlbar-buttons-group-2" class="controlbar-buttons btn-group me-2" role="group"
+                    aria-label="View">
                     <button id="select-grid" type="button" class="btn btn-secondary" onclick="toggleGrid()" checked>
-                        <span class="material-symbols-outlined" style="font-size: 20px; margin: 0; padding: 0; color: white">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
                             grid_view
                         </span>
                     </button>
                     <button id="select-list" type="button" class="btn btn-secondary" onclick="toggleList()">
-                        <span class="material-symbols-outlined" style="font-size: 20px; margin: 0; padding: 0; color: white;">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white;">
                             format_list_bulleted
                         </span>
                     </button>
@@ -32,11 +36,20 @@
 
                 <div class="btn-group" role="group" aria-label="Sign Out">
                     <button id="btn-logout" type="button" class="btn btn-dark" onclick="logout()">
-                        <span class="material-symbols-outlined" style="font-size: 20px; margin: 0; padding: 0; color: white">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
                             logout
                         </span>
                     </button>
                 </div>
+
+                <div class="title d-flex align-items-center" role="group" aria-label="Title"
+                    style="margin-left: 12.5px;">
+
+                    <h4 style=" font-size: 30px; color: black; margin: 0;">Dashboard</h4>
+
+                </div>
+
             </div>
         </div>
     </div>
diff --git a/client/agora/views/dashboard/partials/gallery/dropdown.ejs b/client/agora/views/dashboard/partials/gallery/dropdown.ejs
index c5d03a52..551a8303 100644
--- a/client/agora/views/dashboard/partials/gallery/dropdown.ejs
+++ b/client/agora/views/dashboard/partials/gallery/dropdown.ejs
@@ -9,6 +9,8 @@
         new tab</span></a>
     <a id="rename-card"><span class="material-icons">&nbsp;edit_square</span><span
         class="icon-text">&nbsp;Rename</span></a>
+    <a id="relocate-card"><span class="material-icons">&nbsp;person_add</span><span
+        class="icon-text">&nbsp;Go to Dashboard</span></a>
 </div>
 
 
diff --git a/client/agora/views/dashboard/partials/topic/share-modal.ejs b/client/agora/views/dashboard/partials/topic/share-modal.ejs
index 3a4b3efd..def6ea7b 100644
--- a/client/agora/views/dashboard/partials/topic/share-modal.ejs
+++ b/client/agora/views/dashboard/partials/topic/share-modal.ejs
@@ -1,80 +1,51 @@
 <% var sharedWith = [{name: "John Cena", pfp: 'account_circle', status: "Owner"}, {name: "The Rock", pfp: 'account_circle', status: "Member"}, {name: "Jesus", pfp: 'account_circle', status: "Contributer"}]; %>
-
 <div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-labelledby="share-modal-label" aria-hidden="true">
     <div class="modal-dialog" role="document">
-      <div class="modal-content" style="border-radius: 10px; box-shadow: 3px rgba(0.5,0.5,0.5,0.5);">
+    <div class="modal-content" style="border-radius: 10px; box-shadow: 3px rgba(0.5,0.5,0.5,0.5);">
         <div class="modal-header" style="display: flex; flex-direction: column;">
-            <button class="aux-button">
-                <span class="material-symbols-outlined" style="margin: 0; font-size: 27px">language</span>
-            </button>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute; top: 0; right: 0">
                 <span class="material-symbols-outlined" style="margin: 0">close</span>
             </button>
-            <h5 class="modal-title" id="share-modal-title">Share "Untitled"</h5>
+            <h5 class="modal-title" id="share-modal-title">Share <%=  %></h5>
             <input class="share-modal-input" placeholder="Enter email address"></input>
             <hr class="permissions-hr">
-            
         </div>
         <div class="modal-body">
             <ul id="profiles-list" class="currently-shared-with">
-                <% sharedWith.forEach((profile)=> { %>
+                <% sharedWith.forEach((profile, index) => { %>
                     <li class="profile-shared-with">
                         <span class="material-symbols-outlined"><%= profile.pfp %></span>
-                        <span class="profile-name"><%= profile.name %></span>
-                        <span class="profile-status"><%= profile.status %></span>
+                        <div class="profile-status-container">
+                            <span class="profile-name"><%= profile.name %></span>
+                            <span class="profile-status"><%= profile.status %></span>
+                            <% if (profile.status == "Owner") { %>
+                                <button class="arrow down-arrow" id="profiles-toggle" ></button>
+                                <div class="permissions-box" id="permissions-box" style="display: none;">
+                                    <div class="modal-content" style="border-radius: 10px; box-shadow: 3px rgba(0.5,0.5,0.5,0.5);">
+                                            <div class="modal-header" style="display: flex; flex-direction: column;">
+                                                <div class="permissions-col">
+                                                    <span class="permission-li">
+                                                        <span>Permission 1</span>
+                                                        <input type="checkbox"></input>
+                                                    </span>
+                                                    <span class="permission-li">
+                                                        <span>Permission 2</span>
+                                                        <input type="checkbox"></input>
+                                                    </span>
+                                                    <span class="permission-li">
+                                                        <span>Permission 3</span>
+                                                        <input type="checkbox"></input>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                </div>
+                            <% } %>
+                        </div>
                     </li>
                 <% }) %>
             </ul>
         </div>
-        <div class="modal-footer">
-            <div class="permissions-header">Permissions</div>
-            <button class="arrow down-arrow" id="profiles-toggle"></button>
-            <hr class="permissions-hr">
-            <div class="permissions-row" id="permissions-box">
-                <div class="permissions-col">
-                    <span class="permission-li">
-                        <span>Permission 1</span>
-                        <input type="checkbox"></input>
-                    </span>
-                    <span class="permission-li">
-                        <span>Permission 2</span>
-                        <input type="checkbox"></input>
-                    </span>
-                    <span class="permission-li">
-                        <span>Permission 3</span>
-                        <input type="checkbox"></input>
-                    </span>
-                </div>
-                <div class="permissions-col">
-                    <span class="permission-li">
-                        <span>Permission 4</span>
-                        <input type="checkbox"></input>
-                    </span>
-                    <span class="permission-li">
-                        <span>Permission 5</span>
-                        <input type="checkbox"></input>
-                    </span>
-                    <span class="permission-li">
-                        <span>Permission 6</span>
-                        <input type="checkbox"></input>
-                    </span>
-                </div>
-                <div class="permissions-col">
-                    <span class="permission-li">
-                        <span>Permission 7</span>
-                        <input type="checkbox"></input>
-                    </span>
-                    <span class="permission-li">
-                        <span>Permission 8</span>
-                        <input type="checkbox"></input>
-                    </span>
-                    <span class="permission-li">
-                        <span>Permission 9</span>
-                        <input type="checkbox"></input>
-                    </span>
-                </div>
-            </div>
-        </div>
-      </div>
     </div>
-  </div>
+    </div>
+</div>
diff --git a/client/agora/views/dashboard/partials/topic/share-topic-view.ejs b/client/agora/views/dashboard/partials/topic/share-topic-view.ejs
new file mode 100644
index 00000000..588897b6
--- /dev/null
+++ b/client/agora/views/dashboard/partials/topic/share-topic-view.ejs
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <%- include('../../../partials/head'); %>
+    </head>
+
+    <body class="dashboard-content">
+        <!--File Upload Drop Zone-->
+        <!-- <div class="drop-zone"> -->
+            <!-- <span class="drop-zone__prompt"></span> -->
+            <!-- <input type="file" name="resourceImageField" class="drop-zone__input" /> -->
+            
+        <div class="topic-body">
+            
+
+            <!--Side Nav-->
+            <%- include('../../side-menu/side-menu.ejs');%> 
+            
+            <!--Workspace Manager Modal-->
+            <%- include('./workspace-manager-modal.ejs');%>
+            <%- include('./open-topic.ejs');%>  
+
+            <!--Workspace Title-->
+            <div class="header" id="title-div" style="background-color: #17191a; margin-bottom:0;">
+                <input class="placeholder" id="workspace-title" type="text" placeholder="Untitled">
+            </div>
+            <div class="header-div" style="height: 8vh; background-color: #17191a; border-bottom: solid;border-color: #818181;">
+
+                <!--Workspace Description-->
+                <div class="header" id="tag-div">
+                    <label class="label">Description:</label>
+                    <!--<textarea class="descriptionTA" id="workspace-desc" ></textarea>-->
+                    <input type="text" id="workspace-desc" class="placeholder" placeholder=" Add description...">
+                
+
+
+                    <label class="label">Tags:</label>
+                    <input type="text" id="mySearch" class="placeholder" placeholder="Start typing...">
+                    <div id="curr-tags"></div>
+                    <div id="new-tag-element" class="tag-list-element">+</div>
+        
+                    <ul class="tag-list"></ul>
+                    <!-- <ul class="new-tag">
+                        <li id="new-tag-element" class="tag-list-element">+ New Tag</li>
+                    </ul> -->
+                </div>
+                <!--More Options-->
+                <!-- <i id="ellipsis" class="fa fa-ellipsis-h" onclick="toggleMoreOptions()"></i> -->
+
+                <!--Discussions-->
+                <span class="material-symbols-outlined discussion-button" title="Discussons" data-bs-toggle="modal" data-bs-target="#discussion-modal"  style="color:rgb(255, 255, 255)">
+                    forum
+                </span>
+                <span class="material-symbols-outlined share-button" title="Sharing" data-bs-toggle="modal" data-bs-target="#share-modal"  style="color:rgb(255, 255, 255)">
+                    share
+                </span>
+                <%-include('./discussion-modal.ejs'); %>
+                <%-include('./comment-template.ejs'); %>
+                <%-include('./share-modal.ejs'); %>
+
+                <!--Sharing-->
+                <!-- URBG TODO: removed until sharing is implemented-->
+                <!-- <span class="material-symbols-outlined share-button" title="Share" data-toggle="modal" data-target="#share-modal" style="color:white">
+                    ios_share
+                </span>
+                 <%- include('./share-modal.ejs'); %> -->
+            </div>
+
+            <!-- <div class="hidden" id="file-display"> -->
+            <!--<%- include('./file-display'); %>-->
+            <!-- </div> -->
+
+            <div id="topic-background" style="background-color:#17191a">
+                <!-- Tabs -->
+                <div class="tab" title="Add New Topic" style="background-color: #17191a">
+                    <span id="new-element" class="material-symbols-outlined" style="color: white">add</span>
+                </div>
+
+                <!--Workspace Empty State -->
+                <div id="workspace-empty-state">
+                    <div class="topic-content">
+                    <div class="drop-zone" id="drop-zone0">
+
+                        <div class="dropzone-filler"></div>
+                        
+                            <div id="resources-zone0" class="resources-zone">
+                                <div class="empty-state" id="empty-state0">
+                                    <label class="empty-state-text"><h3>Your Workspace is Empty</h3></label>
+                                    <label class="empty-state-text">Drop a file or tap the + above to get started!</label>
+                                </div>
+                            </div>
+                            <input type="file" name="resourceImageField" class="drop-zone__input" />
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+             
+
+        </div>
+    <!-- </div> -->
+
+
+    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+    <div class="scroll-to-top d-lg-none position-fixed">
+        <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i class="fa fa-chevron-up"></i></a>
+    </div>
+
+    <%- include('../../../partials/jsincludes'); %>
+    <%- include ('../gallery/dropdown'); %>
+
+    </body>
+    
+</html>
+
diff --git a/client/agora/views/dashboard/side-menu/side-menu.ejs b/client/agora/views/dashboard/side-menu/side-menu.ejs
index aec0770c..6448fc37 100644
--- a/client/agora/views/dashboard/side-menu/side-menu.ejs
+++ b/client/agora/views/dashboard/side-menu/side-menu.ejs
@@ -1,27 +1,29 @@
-
 <nav>
     <div class="side-menu-wrapper">
         <div class="burger-navbar">
             <div class="container burger-nav-container">
                 <input class="checkbox" type="checkbox" name="" id="" />
-                
-                <span class="button-right" class="navbar-toggler navbar-toggler-right font-weight-bold bg-secondary text-white rounded">
-                    <div class="hamburger-lines" >
+
+                <span class="button-right"
+                    class="navbar-toggler navbar-toggler-right font-weight-bold bg-secondary text-white rounded">
+                    <div class="hamburger-lines">
                         <span class="line line1"></span>
                         <span class="line line2"></span>
                         <span class="line line3"></span>
                     </div>
-    
+
                 </span>
-    
+
                 <div class="menu-items">
                     <a href="/">
                         <img src="/assets/img/logos/agora-logo-2023-1.png" style="height:50px" />
                     </a><br>
                     <li><a href="/">Home</a></li>
                     <li><a href="/dashboard">Dashboard</a></li>
+                    <li><a href="/dashboard-shared">Shared</a></li>
+                    <li><a href="/friends">Friends</a></li>
                     <!-- <li><a href="/community">Community</a></li> -->
-    
+
                 </div>
             </div>
         </div>
@@ -37,6 +39,14 @@
                 <i class="material-icons">remove_from_queue</i>
                 <span class="icon-text side-menu-icon">Dashboard</span>
             </a>
+            <a href="/dashboard-shared">
+                <i class="material-icons">share</i>
+                <span class="icon-text side-menu-icon">Shared</span>
+            </a>
+            <a href="/friends">
+                <i class="material-icons">people</i>
+                <span class="icon-text side-menu-icon">Friends</span>
+            </a>
             <!-- <a href="/community">
                 <i class="material-icons">groups</i>
                 <span class="icon-text"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Community</span></a><br> -->
@@ -45,28 +55,24 @@
                 <i id="tack-icon" class="material-icons">push_pin</i>
                 <span class="icon-text side-menu-icon">Dock Sidebar</span>
             </a>
-            
+
             <% if(locals.authUser) { %>
-            <a href="/profile/manageProfile"
-                style="width:100%; position: absolute;bottom: 0; left: -15px;border-top:solid;border-radius:2px;">
-                
-                <%
-                if( locals.authUser.profileFilename.toString().substring(0, 7) == "http://" || locals.authUser.profileFilename.toString().substring(0, 8) == "https://" ) {
-                    %>
-                    <img src="<%- locals.authUser.profileFilename %>" alt="User Dashboard avatar" title="User Dashboard" class="profile-top-image" />
-                    <%
-                } else {
-                    %>
-                    <img src="<%= process.env.AVATAR_IMAGE_WEB_PATH%><%- locals.authUser.profileFilename %>" alt="User Dashboard avatar" title="User Dashboard" class="profile-top-image" />
-                    <%
-                }
-                %>
-                <span class="icon-text">&nbsp;&nbsp;&nbsp;Account</span>
-            </a><br>
-            <% } %>
+                <a href="/profile/manageProfile"
+                    style="width:100%; position: absolute;bottom: 0; left: -15px;border-top:solid;border-radius:2px;">
+                    <div id="requestCount" style="position: absolute; top:0; left: 65px; padding: 5px; border-radius: 50%; background-color: red;
+                    color: white; font-weight: bold; font-size: 14px; display: none;"></div>
+                    <% if( locals.authUser.profileFilename.toString().substring(0, 7)=="http://" ||
+                        locals.authUser.profileFilename.toString().substring(0, 8)=="https://" ) { %>
+                        <img src="<%- locals.authUser.profileFilename %>" alt="User Dashboard avatar"
+                            title="User Dashboard" class="profile-top-image" />
+                        <% } else { %>
+                            <img src="<%= process.env.AVATAR_IMAGE_WEB_PATH%><%- locals.authUser.profileFilename %>"
+                                alt="User Dashboard avatar" title="User Dashboard" class="profile-top-image" />
+                            <% } %>
+                                <span class="icon-text">&nbsp;&nbsp;&nbsp;Account</span>
+                </a><br>
+                <% } %>
         </div>
     </div>
-    
-</nav>
-
 
+</nav>
\ No newline at end of file
diff --git a/client/agora/views/friends/friends.ejs b/client/agora/views/friends/friends.ejs
new file mode 100644
index 00000000..8d8a721e
--- /dev/null
+++ b/client/agora/views/friends/friends.ejs
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <%- include('../partials/head'); %>
+</head>
+
+<!-- 
+-------------TODO---------------
+- Edit class to add "friends-content"
+-->
+
+<!-- Using "dashboard-=content" for CSS use-->
+
+<body id="page-top" class="dashboard-content">
+
+    <!-- Gallery View-->
+    <%- include('../dashboard/side-menu/side-menu.ejs'); %>
+        <%- include('./partials/gallery/note-gallery.ejs') %>
+            <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+            <%- include('../partials/jsincludes'); %>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/client/agora/views/friends/partials/gallery/control-bar.ejs b/client/agora/views/friends/partials/gallery/control-bar.ejs
new file mode 100644
index 00000000..8caa709e
--- /dev/null
+++ b/client/agora/views/friends/partials/gallery/control-bar.ejs
@@ -0,0 +1,48 @@
+<div id="gallery-header">
+    <div class="container-fluid">
+        <div class="row pt-2 pb-2">
+            <!-- <div class="col-md-2">
+                <h4 class="text-primary ">Dashboard</h4>
+            </div> -->
+            <div class='col-md-4'>
+                <!--Search bar-->
+                <input id="friend-search" class="card-search form-control" placeholder="Search Friends"
+                    oninput="filterFriends( this.value ) " />
+            </div>
+
+            <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Dashboard Tools">
+
+                <!-- Button for taking you to the adding friends page -->
+                <div id="controlbar-buttons-group-2" class="controlbar-buttons btn-group me-2" role="group"
+                    aria-label="View">
+                    <button id="add-friends" type="button" class="btn btn-dark" onclick="addFriendPage()" checked>
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                        </span>
+                        Add Friends
+                        <i class="material-icons">person_add</i>
+                    </button>
+                </div>
+
+                <span id="control-bar-tooltip"></span>
+
+                <div class="btn-group" role="group" aria-label="Sign Out">
+                    <button id="btn-logout" type="button" class="btn btn-dark" onclick="logout()">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                            logout
+                        </span>
+                    </button>
+                </div>
+
+                <div class="title d-flex align-items-center" role="group" aria-label="Title"
+                    style="margin-left: 12.5px;">
+
+                    <h4 style=" font-size: 30px; color: black; margin: 0;">Friends</h4>
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/friends/partials/gallery/dropdown.ejs b/client/agora/views/friends/partials/gallery/dropdown.ejs
new file mode 100644
index 00000000..192b4be3
--- /dev/null
+++ b/client/agora/views/friends/partials/gallery/dropdown.ejs
@@ -0,0 +1,6 @@
+<div class="dropdown-content" id="dropdown-content">
+    <a id="delete-friend-card" data-id="<%= friend.friendship_id %>" onclick="deleteFriend(<%= friend.friendship_id %>)"><span class="material-icons delete-icon">&nbsp;delete_forever</span><span
+        class="icon-text">&nbsp;Remove Friend</span></a>
+    <a id="relocate-card"><span class="material-icons">&nbsp;person_add</span><span
+        class="icon-text">&nbsp;Go to Dashboard</span></a>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/friends/partials/gallery/grid-template.ejs b/client/agora/views/friends/partials/gallery/grid-template.ejs
new file mode 100644
index 00000000..943e1d82
--- /dev/null
+++ b/client/agora/views/friends/partials/gallery/grid-template.ejs
@@ -0,0 +1,50 @@
+<div id="grid-container" style="display: none">
+  <div class="row row-cols-1 row-cols-md-3 g-4 " id="gallery-row">
+    <!-- Repeat the above structure for each friend -->
+    <% if (friends.length > 0) { %>
+      <% friends.forEach((friend) => { %>
+        <!-- Friend Card -->
+        <div class="col mb-3 align-items-stretch gallery-col query-countable a-friend" id="friend-card">
+          <div class="card h-100" id="f-gv-<%= friend.friendship_id %>" data-id="<%= friend.friendship_id %>" onmouseover="toggleMoreOptionsOn(id)" onmouseout="toggleMoreOptionsOff(id)">
+            <div class="dropdown dropbtn trigger1 trigger2 grid-options" id="f-gv-option-<%= friend.friendship_id %>" data-id="<%= friend.friendship_id %>" style="visibility: hidden">
+              <img src="/assets/img/buttons/more-options.png" class="dropbtn" />
+              <%- include('./dropdown.ejs', {friend: friend}); %>
+            </div>
+            <div class="card-body d-flex flex-column" id="friend">
+              <h5 class="card-title" id="f-gv-card-title-<%= friend.friendship_id %>" data-id="<%= friend.friendship_id %>">
+                <%= friend.friend_first_name %> <%= friend.friend_last_name %>
+              </h5>
+              <p class="card-text mb-4" id="f-gv-card-desc-<%= friend.friendship_id %>" data-id="<%= friend.friendship_id %>">
+                <%= friend.friend_email %>
+              </p>
+            </div>
+            <div class="card-footer">
+              <span class="badge badge-dark note-badge">
+                Friend
+              </span>
+            </div>
+          </div>
+        </div>
+      <% }); %>
+    <% } else { %>
+      <!-- Display a message when there are no friends -->
+      <div class="col mb-3 align-items-stretch gallery-col query-countable a-friend">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column" id="friend">
+            <h5 class="card-title" id="f-gv-card-title-">
+              No Friends
+            </h5>
+            <p class="card-text mb-4" id="f-gv-card-desc-">
+              You don't have any friends yet.
+            </p>
+          </div>
+          <div class="card-footer">
+            <span class="badge badge-dark note-badge">
+              Friend
+            </span>
+          </div>
+        </div>
+      </div>
+    <% } %>
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/friends/partials/gallery/note-gallery.ejs b/client/agora/views/friends/partials/gallery/note-gallery.ejs
new file mode 100644
index 00000000..edcf52df
--- /dev/null
+++ b/client/agora/views/friends/partials/gallery/note-gallery.ejs
@@ -0,0 +1,9 @@
+<!-- friends control bar-->
+<%- include('./control-bar.ejs'); %>  
+
+<hr class="mt-0">
+<div class="container" id="main-container">
+  <%- include('./grid-template.ejs'); %>
+</div>      
+
+
diff --git a/client/agora/views/index.ejs b/client/agora/views/index.ejs
index a312135d..35d02b07 100644
--- a/client/agora/views/index.ejs
+++ b/client/agora/views/index.ejs
@@ -1,80 +1,89 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <%- include('./partials/head'); %>
-    </head>
-    <body id="page-top">
-        <!-- Navigation-->
-        <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
-            <%- include('./partials/topmenu'); %>
-        </nav>
-        <!-- Masthead-->
-        <content>
-            <div class="header-container bg-primary">
-                <header class="masthead text-white text-center main-content" style="height:100%">
-                    <div class="d-flex align-items-center flex-column">
-        
-                        <div class="row">
-                            <div class="col-lg-6 order-lg-1">
-                                <!-- Masthead Heading-->
-                                <h1 class="masthead-heading text-uppercase mb-0 agora-font-large">Agora</h1>
-                                
-                                </br></br>
-                                <h5 class="agora-font-light">Agora is an open, free, cloud based platform you can use to take notes, research and learn. A free digital space that resets our expectations regarding cloud data ownership and privacy</h5>
-                            
-                                </br></br>
-                                <a class="masthead-subheading homepageButton" href="/dashboard">Get Started</a>
-                                </br></br>
-                            </div>
-                            <div class="col-lg-6 order-lg-2">
-                                <img class="website-image website-image-95" src="/assets/img/dashboard_preview.png"/>
-                            </div>
+
+<head>
+    <%- include('./partials/head'); %>
+</head>
+
+<body id="page-top">
+    <!-- Navigation-->
+    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
+        <%- include('./partials/topmenu'); %>
+    </nav>
+    <!-- Masthead-->
+    <content>
+        <div class="header-container bg-primary">
+            <header class="masthead text-white text-center main-content" style="height:100%">
+                <div class="d-flex align-items-center flex-column">
+
+                    <div class="row">
+                        <div class="col-lg-6 order-lg-1">
+                            <!-- Masthead Heading-->
+                            <h1 class="masthead-heading text-uppercase mb-0 agora-font-large">Agora</h1>
+
+                            </br></br>
+                            <h5 class="agora-font-light">Agora is an open, free, cloud based platform you can use to
+                                take notes, research and learn. A free digital space that resets our expectations
+                                regarding cloud data ownership and privacy</h5>
+
+                            </br></br>
+                            <a class="masthead-subheading homepageButton" href="/dashboard">Get Started</a>
+                            </br></br>
+                        </div>
+                        <div class="col-lg-6 order-lg-2">
+                            <img class="website-image website-image-95" src="/assets/img/dashboard_preview.png" />
                         </div>
                     </div>
-                </header>
-            </div>
-            
-            <!-- Portfolio Section-->
-            <section class="page-section portfolio text-center main-content mt-3" id="portfolio">
-               
-                <div class="row">
-                    <div class="col-lg-5 order-lg-3">
-                        <img class="website-image website-image-95" src="/assets/img/topic_preview.png"/>
-                    </div>
-                    <div class="col-lg-7 order-lg-4">
-                        <i class="fas fa-chalkboard-teacher fa-8x text-primary"></i>
-                        <h4 class="agora-font">Agora for your notes</h4></br>
-                        <h5 class="agora-font analogous2">Notetaking, researching and learning,</h5>
-                        <h5 class="agora-font analogous2">For everyone.</h5>
-                        <h5 class="agora-font analogous2">Privacy guaranteed.</h5></br>
-                        <h5 class="agora-font analogous2">Agora creates a secure, private, online environment focused on protecting privacy and ownership of data within the system with infrastructure and data that will be managed and protected by the Agora Foundation.</h5>
-                    </div>
                 </div>
-                
-                
-                <div class="divider-custom">
-                    <div class="divider-custom-line divider-bg-color"></div>
-                    <div class="divider-custom-icon"><i class="fas fa-code-branch divider-color"></i></div>
-                    <div class="divider-custom-line divider-bg-color"></div>
+            </header>
+        </div>
+
+        <!-- Portfolio Section-->
+        <section class="page-section portfolio text-center main-content mt-3" id="portfolio">
+
+            <div class="row">
+                <div class="col-lg-5 order-lg-3">
+                    <img class="website-image website-image-95" src="/assets/img/topic_preview.png" />
+                </div>
+                <div class="col-lg-7 order-lg-4">
+                    <i class="fas fa-chalkboard-teacher fa-8x text-primary"></i>
+                    <h4 class="agora-font">Agora for your notes</h4></br>
+                    <h5 class="agora-font analogous2">Notetaking, researching and learning,</h5>
+                    <h5 class="agora-font analogous2">For everyone.</h5>
+                    <h5 class="agora-font analogous2">Privacy guaranteed.</h5></br>
+                    <h5 class="agora-font analogous2">Agora creates a secure, private, online environment focused on
+                        protecting privacy and ownership of data within the system with infrastructure and data that
+                        will be managed and protected by the Agora Foundation.</h5>
                 </div>
-                <h2 class="page-section-heading text-center text-uppercase text-primary mb-3 pt-0"><a href="/dashboard">Create your account Today!</a> </h2>
-                <!-- Icon Divider-->
-                
-    
-            </section>
-        </content>
-       
+            </div>
+
+
+            <div class="divider-custom">
+                <div class="divider-custom-line divider-bg-color"></div>
+                <div class="divider-custom-icon"><i class="fas fa-code-branch divider-color"></i></div>
+                <div class="divider-custom-line divider-bg-color"></div>
+            </div>
+            <h2 class="page-section-heading text-center text-uppercase text-primary mb-3 pt-0"><a
+                    href="/dashboard">Create your account Today!</a> </h2>
+            <!-- Icon Divider-->
+
 
-        <!-- Footer-->
-        <%- include('./partials/footer'); %>
+        </section>
+    </content>
+
+
+    <!-- Footer-->
+    <%- include('./partials/footer'); %>
 
         <!-- Copyright Section-->
         <%- include('./partials/copyright'); %>
-        <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
-        <div class="scroll-to-top d-lg-none position-fixed">
-            <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i class="fa fa-chevron-up"></i></a>
-        </div>
-        
-        <%- include('./partials/jsincludes'); %>
-    </body>
+            <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+            <div class="scroll-to-top d-lg-none position-fixed">
+                <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i
+                        class="fa fa-chevron-up"></i></a>
+            </div>
+
+            <%- include('./partials/jsincludes'); %>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/client/agora/views/partials/jsincludes.ejs b/client/agora/views/partials/jsincludes.ejs
index 5a083a06..053a0406 100644
--- a/client/agora/views/partials/jsincludes.ejs
+++ b/client/agora/views/partials/jsincludes.ejs
@@ -1,16 +1,22 @@
 <!-- Bootstrap core JS-->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
+    crossorigin="anonymous"></script>
 <!-- Core theme JS-->
 <script src="/js/scripts.js"></script>
 <!-- Quill.js WYSIWYG -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
 <script async src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
 <!-- Katex Plugin -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"
+    integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"
+    integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4"
+    crossorigin="anonymous"></script>
 <!-- Agora Specific -->
 <script async src="/js/user.js"></script>
 <!-- <script async src="/js/topic.js"></script> -->
 <script async src="/js/dashboard.js"></script>
 <script async src="/js/topic-view.js"></script>
+<script async src="/js/friends.js"></script>
 <!-- <script async src="/js/note.js"></script> -->
\ No newline at end of file
diff --git a/client/agora/views/profile/manage.ejs b/client/agora/views/profile/manage.ejs
index e7679f67..46aefc33 100644
--- a/client/agora/views/profile/manage.ejs
+++ b/client/agora/views/profile/manage.ejs
@@ -75,9 +75,55 @@
                                     <br />
                                 </section>
     
+                                <!-- -----TODO-----
+                                    Change to a updating friendRequestCount
+                                -->
+                                <!-- Friend Notification Box-->
+                                <div class="alert alert-info mt-3">
+                                    <h3>Friend Requests</h3>
+                                    <p>You have <span id="friendRequestCount"><%= nonFriends.length > 0 ? nonFriends.length : 0 %></span> new friend requests.</p>
+                                    <button id="viewFriendRequests" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#friendRequestsModal">View Requests</button>
+                                </div>
+
+                                <!-- Friend Requests Modal -->
+                                <div class="modal fade" id="friendRequestsModal" tabindex="-1" role="dialog" aria-labelledby="friendRequestsModalTitle" aria-hidden="true">
+                                    <div class="modal-dialog" role="document">
+                                        <div class="modal-content">
+                                            <div class="modal-header">
+                                                <h5 class="modal-title" id="friendRequestsModalTitle">Friend Requests</h5>
+                                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                    <span aria-hidden="true">&times;</span>
+                                                </button>
+                                            </div>
+                                            <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
+                                                <!-- Loop through friend requests and generate items if nonFriends is not empty -->
+                                                <% if (nonFriends && nonFriends.length > 0) { %>
+                                                    <% nonFriends.forEach((friend) => { %>
+                                                        <div class="friend-request-item">
+                                                            <div class="requester-info">
+                                                                <span><strong><%= friend.friend_username %></strong> sent you a friend request.</span>
+                                                            </div>
+                                                            <div class="action-buttons">
+                                                                <button id="btn-accept-request" class="btn btn-success accept-friend-request" data-id="<%= friend.friendship_id %>">Accept</button>
+                                                                <button id="btn-deny-request" class="btn btn-danger deny-friend-request" data-id="<%= friend.friendship_id %>">Deny</button>
+                                                            </div>
+                                                        </div>
+                                                    <% }); %>
+                                                <% } else { %>
+                                                    <p>No friend requests at this time.</p>
+                                                <% } %>
+                                            </div>
+                                            <div class="modal-footer">
+                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                             <div class="col-lg-5">
                                 
+                                <div class="profile-image-wrapper" style="position: relative;"></div>
+                                
                                 <%
                                 if( locals.user.profileFilename.toString().substring(0, 7) == "http://" || locals.user.profileFilename.toString().substring(0, 8) == "https://" ) {
                                     %>
@@ -89,6 +135,8 @@
                                     <%
                                 }
                                 %>
+                                <span class="notification-count" style="position: absolute; top: 5px; right: 5px; background-color: red; color: white; border-radius: 50%; padding: 2px 5px;">0</span>
+                            </div>
                                 
                                 <%- include('../partials/message'); %>
     
@@ -230,5 +278,11 @@
             <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i class="fa fa-chevron-up"></i></a>
         </div>
         <%- include('../partials/jsincludes'); %>
+        <script>
+            
+
+            // inject into modal body
+            document.querySelector('.modal-body').innerHTML = liTemplates
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/filter/search.ejs b/client/agora/views/shared-dashboard/partials/filter/search.ejs
new file mode 100644
index 00000000..fd40910d
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/filter/search.ejs
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/client/agora/views/shared-dashboard/partials/filter/tags.ejs b/client/agora/views/shared-dashboard/partials/filter/tags.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/client/agora/views/shared-dashboard/partials/filterControl.ejs b/client/agora/views/shared-dashboard/partials/filterControl.ejs
new file mode 100644
index 00000000..9c79bc4e
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/filterControl.ejs
@@ -0,0 +1,7 @@
+
+
+<h3 class="text-secondary">Search</h3>
+<%- include('./filter/search'); %>
+
+<h3 class="text-secondary">Tags</h3>
+<%- include('./filter/tags'); %>
diff --git a/client/agora/views/shared-dashboard/partials/gallery/alert-toast.ejs b/client/agora/views/shared-dashboard/partials/gallery/alert-toast.ejs
new file mode 100644
index 00000000..c74e1485
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/alert-toast.ejs
@@ -0,0 +1,7 @@
+<div class="toast-container" id="show-toast">
+    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-body show-toast-text" id="toast-text">
+        Copied Link!
+        </div>
+    </div>
+</div>
diff --git a/client/agora/views/shared-dashboard/partials/gallery/control-bar.ejs b/client/agora/views/shared-dashboard/partials/gallery/control-bar.ejs
new file mode 100644
index 00000000..a9433fda
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/control-bar.ejs
@@ -0,0 +1,56 @@
+<div id="gallery-header">
+    <div class="container-fluid">
+        <div class="row pt-2 pb-2">
+            <!-- <div class="col-md-2">
+                <h4 class="text-primary ">Dashboard</h4>
+            </div> -->
+            <div class='col-md-4'>
+                <!--Search bar-->
+                <input id="topic-search" class="card-search form-control" placeholder="Search"
+                    oninput="queryTopics(document.getElementById('topic-search').value, topicArr) " />
+            </div>
+
+            <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Dashboard Tools">
+                <!-- <div id="controlbar-buttons-group-1" class="controlbar-buttons btn-group me-2" role="group" aria-label="Types">
+                    <button type="button" class="btn btn-primary" onclick="toggleWorkspaceView()">Workspace</button>
+                    <button id="all-initial-selection" type="button" class="btn btn-primary" onclick="toggleAllView()" checked>All</button>
+                    <button type="button" class="btn btn-primary" onclick="toggleTopicView()">Topics</button>
+                </div> -->
+                <div id="controlbar-buttons-group-2" class="controlbar-buttons btn-group me-2" role="group"
+                    aria-label="View">
+                    <button id="select-grid" type="button" class="btn btn-secondary" onclick="toggleGrid()" checked>
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                            grid_view
+                        </span>
+                    </button>
+                    <button id="select-list" type="button" class="btn btn-secondary" onclick="toggleList()">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white;">
+                            format_list_bulleted
+                        </span>
+                    </button>
+                </div>
+
+                <span id="control-bar-tooltip"></span>
+
+                <div class="btn-group" role="group" aria-label="Sign Out">
+                    <button id="btn-logout" type="button" class="btn btn-dark" onclick="logout()">
+                        <span class="material-symbols-outlined"
+                            style="font-size: 20px; margin: 0; padding: 0; color: white">
+                            logout
+                        </span>
+                    </button>
+                </div>
+
+                <div class="title d-flex align-items-center" role="group" aria-label="Title"
+                    style="margin-left: 12.5px;">
+
+                    <h4 style=" font-size: 30px; color: black; margin: 0;">Shared Dashboard</h4>
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/gallery/delete-modal.ejs b/client/agora/views/shared-dashboard/partials/gallery/delete-modal.ejs
new file mode 100644
index 00000000..13fa9899
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/delete-modal.ejs
@@ -0,0 +1,20 @@
+<div class="modal" tabindex="-1" role="dialog" id="delete-modal">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Delete Confirmation</h5>
+        </div>
+        <div class="modal-body" style="display: flex; flex-direction: row;">
+          <p>Are you sure you'd like to delete&nbsp;<p id="to-be-deleted-name" style="font-weight: bold;"></p>?</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" id="confirm-delete">Confirm</button>
+          <button type="button" class="btn btn-secondary" onclick="exitDeleteModal()">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal-backdrop fade show" id="backdrop2" style="display: none;"></div>
+
diff --git a/client/agora/views/shared-dashboard/partials/gallery/dropdown.ejs b/client/agora/views/shared-dashboard/partials/gallery/dropdown.ejs
new file mode 100644
index 00000000..551a8303
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/dropdown.ejs
@@ -0,0 +1,16 @@
+<div class="dropdown-content" id="dropdown-content">
+    <a id="delete-card"><span class="material-icons delete-icon">&nbsp;delete_forever</span><span
+        class="icon-text">&nbsp;Delete</span></a>
+    <a id="duplicate-card" ><span class="material-icons">&nbsp;filter_none</span><span
+        class="icon-text">&nbsp;Duplicate</span></a>
+    <a id="copy-link-card"><span class="material-icons">&nbsp;link</span><span class="icon-text">&nbsp;Copy
+        Link</span></a>
+    <a id="new-tab-card"><span class="material-icons">&nbsp;arrow_outward</span><span class="icon-text">&nbsp;Open in
+        new tab</span></a>
+    <a id="rename-card"><span class="material-icons">&nbsp;edit_square</span><span
+        class="icon-text">&nbsp;Rename</span></a>
+    <a id="relocate-card"><span class="material-icons">&nbsp;person_add</span><span
+        class="icon-text">&nbsp;Go to Dashboard</span></a>
+</div>
+
+
diff --git a/client/agora/views/shared-dashboard/partials/gallery/grid-template.ejs b/client/agora/views/shared-dashboard/partials/gallery/grid-template.ejs
new file mode 100644
index 00000000..7871650f
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/grid-template.ejs
@@ -0,0 +1,116 @@
+<% //name:string, description:string, tags:array, content:array %>
+<% const renderCard=(workspaceId,name,desc,tags,contentType, content)=> { 
+  //stops text overflow
+  name = name.slice(0,18)
+  if(desc){
+    desc = desc.slice(0,180)
+  }
+  if (contentType === "Topic") { 
+%>
+
+    <!--Topic Card -->
+    <div class="col mb-3 align-items-stretch gallery-col query-countable view-check a-topic">
+      <div class="card h-100" id="t-gv-<%= workspaceId %>" onmouseover="toggleMoreOptionsOn(id)" onmouseout="toggleMoreOptionsOff(id)" onclick="topicReroute(id, false, null)">
+        <div class="dropdown dropbtn trigger1 trigger2 grid-options" id="t-gv-option-<%= workspaceId %>" style="visibility: hidden">
+          <img src="/assets/img/buttons/more-options.png" class="dropbtn"/>
+          <%- include('./dropdown.ejs'); %>
+        </div>
+        <div class="card-body d-flex flex-column" id="topic">
+          <h5 class="card-title" id="t-gv-card-title-<%= workspaceId %>">
+            <%= name %>
+          </h5>
+          <p class="card-text mb-4" id="t-gv-card-desc-<%= workspaceId %>">
+            <%= desc %>
+          </p>
+        </div>
+        <div class="card-footer">
+          <% for(let i=0; i < tags.length; i++) { %>
+            <span class="badge badge-med topic-badge">
+              <%= tags[i]%>
+            </span>
+          <% } %>
+          <span class="badge badge-dark note-badge">
+            <%= contentType %>
+          </span>
+        </div>
+      </div>
+    </div>
+  <% } else if (contentType === "Workspace") { %>
+
+    <!--Workspace Card-->
+    <div class="col mb-3 align-items-stretch gallery-col query-countable view-check a-workspace">
+      <div class="card h-100" id="w-gv-<%= workspaceId %>" onmouseover="toggleMoreOptionsOn(id)" onmouseout="toggleMoreOptionsOff(id)" onclick="topicReroute(id, false, null)">
+        <div class="dropdown dropbtn trigger1 trigger2 grid-options" id="w-gv-option-<%= workspaceId %>" style="visibility: hidden">
+          <img src="/assets/img/buttons/more-options.png" class="dropbtn"/>
+          <%- include('./dropdown.ejs'); %>
+        </div>
+        <div class="card-body d-flex flex-column" id="workspace">
+          <h5 class="card-title" id="w-gv-card-title-<%= workspaceId %>">
+              <%= name %>
+          </h5>
+          <div id="w-gv-card-desc-<%= workspaceId %>"><%= desc %></div>
+          <div>
+            <% if (content) { %>
+              <ul class="list-group list-group-flush list-grid">
+                <% content.slice(0,6).forEach((item) => { 
+                  if(item) {
+                    //stops overflow of text
+                    item = item.slice(0,12)%>
+                  <!--topicReroute() below has a filler id-->
+                  
+                  <li class="list-group-item item-list"  title='Open <%=item.slice(0,3)%>' > <span class="material-icons document-icon" >&nbsp;description</span><span class="item-list-text"><%= item %></span></li>
+                <% }}) %>
+              </ul>
+            <% } %>
+          </div>
+        </div>
+        <div class="card-footer" >
+          <% for(let i=0; i < tags.length; i++) { %>
+            <span class="badge badge-med topic-badge">
+              <%= tags[i]%>
+            </span>
+          <% } %>
+          <span class="badge badge-dark note-badge">
+            <%= contentType %>
+          </span>
+        </div>
+      </div>
+    </div>
+<% 
+  }
+}
+%>
+
+<div id="grid-container" style="display: none">
+  
+  <div class="row row-cols-1 row-cols-md-3 g-4 " id="gallery-row">
+    <div class="col mb-3 gallery-col align-items-stretch gallery-col">
+      <div class="card h-100" onclick = "createNewWorkspace()">
+          <div class="card-body d-flex flex-column mt-1" id="add">
+            <img src="/assets/img/buttons/new-content.png" class="mx-auto d-block btn-add-content" alt="Add content">
+          </div>
+        </div>
+      </div>
+          
+      <%
+        for (let i = 0; i <  ownerWorkspaces.length ; i++) { 
+          let topics = [];
+          let tags = [];
+          topics = ownerWorkspaces[i].topics.map(a => a.topicName);
+          tags = ownerWorkspaces[i].tags.map(a => a.tag);
+          renderCard(ownerWorkspaces[i].workspaceId,ownerWorkspaces[i].workspaceName,ownerWorkspaces[i].workspaceDescription,tags,"Workspace", topics); 
+        }
+
+        //render resources for Now
+        for (let i = 0; i <  ownerTopics.length ; i++) { 
+          
+          renderCard(ownerTopics[i].topicId,ownerTopics[i].topicName,ownerTopics[i].topicDescription,["Biom","Chem"],"Topic", null) 
+            
+        }
+      %>
+        
+      <%=//c console.log(ownerWorkspaces[0]) %>
+    </div> 
+  </div> 
+          
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/gallery/list-template.ejs b/client/agora/views/shared-dashboard/partials/gallery/list-template.ejs
new file mode 100644
index 00000000..a955227c
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/list-template.ejs
@@ -0,0 +1,71 @@
+<% const showTags=(tags) => {
+    for(let i=0; i < tags.length; i++) { %>
+        <span class="badge badge-primary topic-badge">
+          <%= tags[i]%>
+        </span>
+    <% }
+} %>
+
+<% //name:string, description:string, tags:array, content:array %>
+    <% const renderListCard=(id,name,desc,tags,contentType, content)=> { 
+        name = name.slice(0,18)
+      if(desc){
+        desc = desc.slice(0,180)
+      }
+      if (contentType === "Topic") { %>
+
+        <!--Topic List Member -->
+        <li class="list-group-item list-view view-check a-topic" id="t-lv-<%= id %>" onclick="topicReroute(id, false)">
+            <span id="t-lv-card-title-<%= id %>"><%=name%></span>
+            <span class="badge badge-dark note-badge" style="position: absolute; left: 33.1%;"><%=contentType%></span>
+            <span class="badge badge-med topic-badge" style="position: absolute; left: 45.7%"><% showTags(tags) %></span>
+            <span class="trigger1 trigger2" id="t-lv-option-<%= id %>">
+                <img class="list-more-options" src="/assets/img/buttons/more-options.png" class="dropbtn"/>
+                <span class="list-view-dropbtn">
+                    <%- include('./dropdown.ejs'); %>
+                </span>
+            </span>
+        </li>
+            
+      <% } else if (contentType === "Workspace") { %>
+
+        <!--Workspace List Member-->
+        <li class="list-group-item list-view view-check a-workspace" id="w-lv-<%= id %>" onclick="topicReroute(id, false)">
+            <span id="w-lv-card-title-<%= id %>"><%=name%></span>
+            <span class="badge badge-dark note-badge" style="position: absolute; left: 33.1%;"><%=contentType%></span>
+            <span class="badge badge-med topic-badge" style="position: absolute; left: 45.7%"><% showTags(tags) %></span>
+            <span class="trigger1 trigger2" id="w-lv-option-<%= id %>">
+                <img class="list-more-options" src="/assets/img/buttons/more-options.png" class="dropbtn"/>
+                <span class="list-view-dropbtn">
+                    <%- include('./dropdown.ejs'); %>
+                </span>
+            </span>
+        </li>
+    <% }
+}%>
+</div>
+
+<!--List Display-->
+<div id="list-container" style="display: none">
+    <ul class="list-group list-group-flush" style="margin-top: 5%" id="list-column">
+        <li class="list-group-item" style="font-weight: bold;">
+            <span>Name</span>
+            <span style="margin-left: 29%">Type</span>
+            <span style="margin-left: 10%">Tags</span>
+        </li>
+        <% 
+        for (let i = 0; i < ownerWorkspaces.length ; i++) { 
+            let tags = [];
+            tags = ownerWorkspaces[i].tags.map(a => a.tag);
+            renderListCard(ownerWorkspaces[i].workspaceId,ownerWorkspaces[i].workspaceName,ownerWorkspaces[i].workspaceDescription,tags,"Workspace", ["Doc1","doc2"]) 
+        } 
+        for (let i = 0; i <  availableTopics.length ; i++) { 
+            renderListCard(ownerTopics[i].topicId,ownerTopics[i].topicName,ownerTopics[i].topicDescription,["Bio","Chem"],"Topic", null); 
+         
+         }
+         
+        %>
+    </ul>
+
+
+
diff --git a/client/agora/views/shared-dashboard/partials/gallery/new-topic-workspace.ejs b/client/agora/views/shared-dashboard/partials/gallery/new-topic-workspace.ejs
new file mode 100644
index 00000000..3848df24
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/new-topic-workspace.ejs
@@ -0,0 +1,57 @@
+<div
+  class="modal fade bd-example-modal-lg"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myLargeModalLabel"
+  aria-hidden="true"
+  id="new-topic-workspace-modal"
+>
+  <div
+    class="modal-dialog modal-dialog-centered modal-lg tabindex='-1'"
+    style="visibility: hidden"
+  >
+    <div class="modal-content test" style="border-radius: 10px">
+      <h1 class="modal-title text-center" id="exampleModalLabel">Create a</h1>
+      <div class="modal-body pt-0">
+        <hr class="col-xs-12" />
+
+        <div class="container-fluid">
+          <div class="row justify-content-center">
+            <div class="col mb-5 gallery-col align-items-stretch">
+              <div
+                class="card h-100 add-topic-modal-card"
+                style="visibility: visible; background-color: white"
+                onclick="createNewTopic()"
+              >
+                <div class="card-body d-flex flex-column">
+                  <h3 class="add-header">Create Topic</h3>
+                  <img
+                    src="/assets/img/buttons/document.png"
+                    class="mx-auto d-block btn-add-content"
+                    alt="Add content"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col mb-5 gallery-col align-items-stretch">
+              <div
+                class="card h-100 add-topic-modal-card"
+                style="visibility: visible; background-color: white"
+                onclick = "createNewWorkspace()"
+              >
+                <div class="card-body d-flex flex-column">
+                  <h3 class="add-header pb-0">Create Workspace</h3>
+                  <img
+                    src="/assets/img/buttons/folder.png"
+                    class="mx-auto d-block btn-add-content"
+                    alt="Add content"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/agora/views/shared-dashboard/partials/gallery/note-gallery.ejs b/client/agora/views/shared-dashboard/partials/gallery/note-gallery.ejs
new file mode 100644
index 00000000..09c8ea1b
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/note-gallery.ejs
@@ -0,0 +1,21 @@
+
+<!--Declaring ejs function to display cards-->
+<%- include('./delete-modal.ejs'); %>
+<%- include('./rename-modal.ejs'); %>
+<%- include('./alert-toast.ejs'); %>
+<%- include('./new-topic-workspace.ejs'); %>
+<% //name:string, description:string, tags:array, content:array %>
+    
+
+
+<!-- dashboard control bar-->
+<%- include('./control-bar.ejs'); %>  
+
+<hr class="mt-0">
+<div class="container" id="main-container">
+  <%- include('./grid-template.ejs'); %>
+  <%- include('./list-template.ejs'); %>
+
+</div>      
+
+
diff --git a/client/agora/views/shared-dashboard/partials/gallery/rename-modal.ejs b/client/agora/views/shared-dashboard/partials/gallery/rename-modal.ejs
new file mode 100644
index 00000000..4ad0ab60
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/gallery/rename-modal.ejs
@@ -0,0 +1,26 @@
+<div class="modal fade" id="rename-modal" tabindex="-1" role="dialog" aria-labelledby="renameModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header" id="rename-header">
+        <h5 class="rename-label">Name:</h5>
+        <input type="text" class="rename-input form-control card-desc" id="note-modal-name" onclick="this.select()"/>
+      </div>
+      <div class="modal-body">
+        <form>
+          <div class="form-group" id="rename-header">
+            <label for="message-text" class="desc-label">Desc:</label>
+            <textarea class="form-control card-desc" id="note-modal-description" onclick="this.select()" style="margin-left: 17px; width: 100%; overflow: hidden;"></textarea>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" onclick="closeRenameModal()">
+          Close
+        </button>
+        <button type="button" class="btn btn-primary" id="save-name">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div>
diff --git a/client/agora/views/shared-dashboard/partials/resource/edit-resource.ejs b/client/agora/views/shared-dashboard/partials/resource/edit-resource.ejs
new file mode 100644
index 00000000..73ced6df
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/resource/edit-resource.ejs
@@ -0,0 +1,175 @@
+<div class="modal fade" id="create-resource-modal" tabindex="-1" role="dialog" aria-labelledby="create-resource-modal-label" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="create-resource-modal-label">Create a new resource:</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+            
+            <section>
+                <% if(!!locals.message){ %>
+                    <div class="alert-message alert-message-warning" role="alert">
+                        <h3 ><%= message %></h3>
+                        <p><%= message2 %></p>
+                    </div>
+                <% } 
+                
+                if(resource) {
+                    %>
+                    <form action="/dashboard/resource" id='dashboardResourceForm' enctype="multipart/form-data" method="POST">
+                        <div class="form-group">
+                            <input type="hidden" name="resourceId" id="resourceId" value="<%- resource.resourceId %>" />
+                            <input type="hidden" name="resourceModified" id="resourceModified" value="false" />
+                            <div class="form-row">
+                                <div class="col-sm-2 my-1">
+                                    <!-- Image -->
+
+                                    <div class="drop-zone">
+                                        <span class="drop-zone__prompt">Drop file here or click to upload</span>
+                                        <input type="file" name="resourceImageField" class="drop-zone__input" />
+                                    </div>
+
+                                </div>
+                                <div class="col my-1">
+                                    <div class="row">
+                                        <div class="col">
+                                            <!-- Type -->
+                                            <select name="resourceType" id="resourceType" class="form-control form-control-lg">
+                                                <%
+                                                if(resource.resourceType === 1) {
+                                                    %>
+                                                    <option value="1" selected>Editor</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="1">Editor</option>
+                                                    <%
+                                                }
+                                                %>
+                                                <%
+                                                if(resource.resourceType === 2) {
+                                                    %>
+                                                    <option value="2" selected>Link Only</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="2">Link Only</option>
+                                                    <%
+                                                }
+                                                %>
+                                                <%
+                                                if(resource.resourceType === 3) {
+                                                    %>
+                                                    <option value="3" selected>Embed HTML (Including iFrames)</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="3">Embed HTML (Including iFrames)</option>
+                                                    <%
+                                                }
+                                                %>
+                                            </select>
+                                        </div>
+                                        <div class="col">
+                                            <!-- Visibility -->
+                                            <select name="visibility" id="resourceVisibility" class="form-control form-control-lg">
+                                                <%
+                                                if(resource.visibility === 'private') {
+                                                    %>
+                                                    <option value="0" selected>Private</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="0">Private</option>
+                                                    <%
+                                                }
+                                                %>
+                                                <%
+                                                if(resource.visibility === 'public') {
+                                                    %>
+                                                    <option value="2" selected>Public</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="2">Public</option>
+                                                    <%
+                                                }
+                                                %>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col">
+                                           &nbsp; <input type="input" class="form-control form-control-lg" name="resourceName" value="<%- resource.resourceName %>" id="resourceName" placeholder="Title" required>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="additionalMetadataHeader">
+                                <svg class="centered" id="expansionArrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="IconChangeColor" height="24" width="24"><path d="M19,20H5a1,1,0,0,0,0,2H19a1,1,0,0,0,0-2Zm-7.71-2.29a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,14.59V3a1,1,0,0,0-2,0V14.59l-2.29-2.3a1,1,0,1,0-1.42,1.42Z" id="mainIconPathAttribute" stroke-width="1.1" stroke="#000000" fill="#000000" filter="url(#shadow)"></path><filter id="shadow"><feDropShadow id="shadowValue" stdDeviation=".5" dx="0" dy="0" flood-color="black"></feDropShadow></filter></svg>
+                                <svg class="centered" id="expansionArrowUp" style="display:none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" transform="rotate(180)"><path d="M19,20H5a1,1,0,0,0,0,2H19a1,1,0,0,0,0-2Zm-7.71-2.29a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,14.59V3a1,1,0,0,0-2,0V14.59l-2.29-2.3a1,1,0,1,0-1.42,1.42Z" stroke-width="1.1" stroke="#000000" fill="#000000" filter="url(#shadow2)"></path><filter id="shadow2"><feDropShadow stdDeviation=".5" dx="0" dy="0" flood-color="black"></feDropShadow></filter></svg>
+
+                            </div>
+                            
+                            <!-- Additional Resource metadata - Description / Requried / Active - Hidden by default -->
+                            <div id="additionalMetadata" style="display:none">
+                                <div class="row">
+                                    <div class="col-auto">
+                                        <div class="row">
+                                            <div class="col">
+                                                Required? <input type="checkbox" class="" id="isRequired" name="isRequired" <%- (resource.isRequired)?'checked':'' %> />
+                                            </div>
+                                           
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                Active: <input type="checkbox" class="" id="resourceActive" name="resourceActive" <%- (resource.active)?'checked':'' %> />
+                                            </div>
+                                        </div>
+                                        
+                                    
+                                    </div>
+                                    <div class="col">
+                                        <textarea class="form-control form-control-lg" name="resourceDescription" value="<%- resource.resourceDescription %>" id="resourceDescription" placeholder="Description"></textarea>
+                                    </div>
+                                </div>
+                                    
+                                    
+                                
+                            </div>
+                            <hr />
+                            <textarea id="resourceEditor" name="resourceEditor"><%- resource.resourceContentHtml %></textarea>
+
+                            <textarea name="embedded_submission_text_resource" id="embedded_submission_text_resource" rows="6" cols="75" ><%- resource.resourceContentHtml %></textarea><br />
+                            <input type="input" class="form-control form-control-lg" name="resourceLink" value="<%- resource.resourceLink %>" id="resourceLink" placeholder="Link">
+
+
+                            
+                            <br />
+                            <br />
+                            
+                            
+
+                        </div>
+                        <button type="submit" id="resourceButton" class="btn btn-primary btn-lg btn-block">Save Resource</button>
+                    </form>
+                    <%
+                }
+                
+                %>
+
+            </section>
+
+        </div>
+      </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/topic/comment-template.ejs b/client/agora/views/shared-dashboard/partials/topic/comment-template.ejs
new file mode 100644
index 00000000..3f524c6a
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/comment-template.ejs
@@ -0,0 +1,18 @@
+<!--set id after cloning-->
+
+<div class="flex-column" id="comment-template" style="display: none">
+    <div class="flex-row">
+        <span class="material-symbols-outlined" style="margin: 0"></span>
+        <span class="discussion-user"></span>
+    </div>
+    <div class="comment-body"></div>
+    <div class="comment-footer flex-row">
+        <button id="like-button" class="like-button flex-row">
+            <span class="material-symbols-outlined like-icon">thumb_up</span>
+            <span style="margin: 2px 0 0 1px">0</span>
+        </button>
+        <hr class="footer-hr">
+        <span class="post-date"></span>
+    </div>
+    <hr style="width: 100%;">
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/topic/discussion-modal.ejs b/client/agora/views/shared-dashboard/partials/topic/discussion-modal.ejs
new file mode 100644
index 00000000..21c797c5
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/discussion-modal.ejs
@@ -0,0 +1,39 @@
+<!--<% 
+var comments = [{id: 0, user: "John", pfp: "account_circle", text: "This is a comment", likes: 0, timestamp: "11/15/2022"},
+                {id: 1, user: "Nick", pfp: "account_circle", text: "This is a comment also", likes: 0, timestamp: "11/15/2022"},
+                {id: 2, user: "Lindsey", pfp: "account_circle", text: "This is a comment, too, but this commenter doesn't like tacos. This is a large problem in my book.", likes: 0, timestamp: "11/15/2022"},
+                {id: 3, user: "Alesha", pfp: "account_circle", text: "This is a comment as well", likes: 0, timestamp: "11/15/2022"}];
+%>-->
+
+<div class="modal fade discussion-modal-pos" id="discussion-modal" tabindex="-1" role="dialog" aria-labelledby="discussion-title" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content discussion-modal-edges">
+        <div class="modal-header">
+          <h5 class="modal-title" id="discussion-title">Comments</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body flex-column" id="discussions-body">
+            <div contenteditable="true" class="discussion-textarea" id="discussion-textarea"></div>
+            <button class="post-comment-btn" id="post-comment-btn">Send</button>
+            <!-- <% comments.forEach((comment)=> { %>
+                <div class="flex-column comment-countable" id="comment-<%=comment.commentId%>">
+                    <div class="flex-row">
+                        <span class="material-symbols-outlined" style="margin: 0"><%= comment.pfp %></span>
+                        <span class="discussion-user"><%= comment.user %></span>
+                    </div>
+                    <div class="comment-body"><%= comment.text %></div>
+                    <div class="comment-footer flex-row">
+                        <button id="like-button" class="like-button flex-row">
+                            <span class="material-symbols-outlined like-icon">thumb_up</span>
+                            <span style="margin: 2px 0 0 1px"><%= comment.likes %></span>
+                        </button>
+                        <hr class="footer-hr">
+                        <span class="post-date"><%=comment.timestamp%></span>
+                    </div>
+                    <hr style="width: 100%;">
+                </div>
+            <% }) %> -->
+        </div>
+      </div>
+    </div>
+  </div>
diff --git a/client/agora/views/shared-dashboard/partials/topic/discussion-popover.ejs b/client/agora/views/shared-dashboard/partials/topic/discussion-popover.ejs
new file mode 100644
index 00000000..0ba492a6
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/discussion-popover.ejs
@@ -0,0 +1,39 @@
+<!--<% 
+var comments = [{id: 0, user: "John", pfp: "account_circle", text: "This is a comment", likes: 0, timestamp: "11/15/2022"},
+                {id: 1, user: "Nick", pfp: "account_circle", text: "This is a comment also", likes: 0, timestamp: "11/15/2022"},
+                {id: 2, user: "Lindsey", pfp: "account_circle", text: "This is a comment, too, but this commenter doesn't like tacos. This is a large problem in my book.", likes: 0, timestamp: "11/15/2022"},
+                {id: 3, user: "Alesha", pfp: "account_circle", text: "This is a comment as well", likes: 0, timestamp: "11/15/2022"}];
+%>-->
+
+<div class="modal fade discussion-modal-pos" id="discussion-modal" tabindex="-1" role="dialog" aria-labelledby="discussion-title" aria-hidden="false">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content discussion-modal-edges">
+      <div class="modal-header">
+        <h5 class="modal-title" id="discussion-title">Comments</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body flex-column" id="discussions-body">
+          <div contenteditable="true" class="discussion-textarea" id="discussion-textarea"></div>
+          <button class="post-comment-btn" id="post-comment-btn">Send</button>
+          <% comments.forEach((comment)=> { %>
+              <div class="flex-column comment-countable" id="comment-<%=comment.commentId%>">
+                  <div class="flex-row">
+                      <span class="material-symbols-outlined" style="margin: 0"><%= comment.pfp %></span>
+                      <span class="discussion-user"><%= comment.user %></span>
+                  </div>
+                  <div class="comment-body"><%= comment.text %></div>
+                  <div class="comment-footer flex-row">
+                      <button id="like-button" class="like-button flex-row">
+                          <span class="material-symbols-outlined like-icon">thumb_up</span>
+                          <span style="margin: 2px 0 0 1px"><%= comment.likes %></span>
+                      </button>
+                      <hr class="footer-hr">
+                      <span class="post-date"><%=comment.timestamp%></span>
+                  </div>
+                  <hr style="width: 100%;">
+              </div>
+          <% }) %>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/agora/views/shared-dashboard/partials/topic/file-display.ejs b/client/agora/views/shared-dashboard/partials/topic/file-display.ejs
new file mode 100644
index 00000000..553a1267
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/file-display.ejs
@@ -0,0 +1,18 @@
+<% const returnFiles = () => {
+    return [{name: "file 1", filePath: '#'},{name: "file 2", filePath: '#'},{name: "file 3", filePath: '#'},{name: "file 4", filePath: '#'},{name: "file 5123123123123124141", filePath: '#'},{name: "abc123.png", filePath: '#'},{name: "stuff.pdf", filePath: '#'}];
+} %>
+
+    <% returnFiles().forEach((file) => { %>
+        <div class="file-display-content" id="file-display-content">  
+            <span class="file-display-name" id="file-display-name"><%-file.name%></span>
+            <a a href="<%=file.filePath%>">
+                <span class="file-display-icon material-symbols-outlined" id="file-display-icon">description</span>
+                </a>
+        </div>
+    <% }) %>
+    <div class="new-file-backing" id="new-file-backing" title="Add a new file">
+        <div class="new-file-coloring" id="new-file-coloring"></div>
+    </div>
+        
+
+
diff --git a/client/agora/views/shared-dashboard/partials/topic/open-topic.ejs b/client/agora/views/shared-dashboard/partials/topic/open-topic.ejs
new file mode 100644
index 00000000..d363e012
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/open-topic.ejs
@@ -0,0 +1,51 @@
+<!-- The Modal -->
+<div id="open-topic-modal-div" class="new-resource-modal">
+
+    <!-- Modal content -->
+    <div class="resource-modal-content">
+  
+      <span class="close">&times;</span>
+      <h4 id="modal-title">Open Existing Topic</h4>
+  
+      <div id="resource-modal-body">
+        <div class="manager-options">
+
+            <div class="option-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option">Topic 1</div>
+            </div>
+
+            <div class="option-div" id="file-upload-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option">Topic 2</div>
+            </div> 
+            
+            <div class="option-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option">Topic 3</div>
+            </div>
+        </div>
+
+        <div id="options-divider"></div>
+
+        <div class="manager-options">
+            
+            <div class="option-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option">Topic 4</div>
+            </div>
+
+            <div class="option-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option">Topic 5</div>
+            </div>
+
+            <div class="option-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option">Topic 6</div>
+            </div>
+        </div>
+      </div>
+  
+    </div>
+  </div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/topic/share-modal.ejs b/client/agora/views/shared-dashboard/partials/topic/share-modal.ejs
new file mode 100644
index 00000000..3a4b3efd
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/share-modal.ejs
@@ -0,0 +1,80 @@
+<% var sharedWith = [{name: "John Cena", pfp: 'account_circle', status: "Owner"}, {name: "The Rock", pfp: 'account_circle', status: "Member"}, {name: "Jesus", pfp: 'account_circle', status: "Contributer"}]; %>
+
+<div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-labelledby="share-modal-label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content" style="border-radius: 10px; box-shadow: 3px rgba(0.5,0.5,0.5,0.5);">
+        <div class="modal-header" style="display: flex; flex-direction: column;">
+            <button class="aux-button">
+                <span class="material-symbols-outlined" style="margin: 0; font-size: 27px">language</span>
+            </button>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute; top: 0; right: 0">
+                <span class="material-symbols-outlined" style="margin: 0">close</span>
+            </button>
+            <h5 class="modal-title" id="share-modal-title">Share "Untitled"</h5>
+            <input class="share-modal-input" placeholder="Enter email address"></input>
+            <hr class="permissions-hr">
+            
+        </div>
+        <div class="modal-body">
+            <ul id="profiles-list" class="currently-shared-with">
+                <% sharedWith.forEach((profile)=> { %>
+                    <li class="profile-shared-with">
+                        <span class="material-symbols-outlined"><%= profile.pfp %></span>
+                        <span class="profile-name"><%= profile.name %></span>
+                        <span class="profile-status"><%= profile.status %></span>
+                    </li>
+                <% }) %>
+            </ul>
+        </div>
+        <div class="modal-footer">
+            <div class="permissions-header">Permissions</div>
+            <button class="arrow down-arrow" id="profiles-toggle"></button>
+            <hr class="permissions-hr">
+            <div class="permissions-row" id="permissions-box">
+                <div class="permissions-col">
+                    <span class="permission-li">
+                        <span>Permission 1</span>
+                        <input type="checkbox"></input>
+                    </span>
+                    <span class="permission-li">
+                        <span>Permission 2</span>
+                        <input type="checkbox"></input>
+                    </span>
+                    <span class="permission-li">
+                        <span>Permission 3</span>
+                        <input type="checkbox"></input>
+                    </span>
+                </div>
+                <div class="permissions-col">
+                    <span class="permission-li">
+                        <span>Permission 4</span>
+                        <input type="checkbox"></input>
+                    </span>
+                    <span class="permission-li">
+                        <span>Permission 5</span>
+                        <input type="checkbox"></input>
+                    </span>
+                    <span class="permission-li">
+                        <span>Permission 6</span>
+                        <input type="checkbox"></input>
+                    </span>
+                </div>
+                <div class="permissions-col">
+                    <span class="permission-li">
+                        <span>Permission 7</span>
+                        <input type="checkbox"></input>
+                    </span>
+                    <span class="permission-li">
+                        <span>Permission 8</span>
+                        <input type="checkbox"></input>
+                    </span>
+                    <span class="permission-li">
+                        <span>Permission 9</span>
+                        <input type="checkbox"></input>
+                    </span>
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
diff --git a/client/agora/views/dashboard/partials/topic/topic-view.ejs b/client/agora/views/shared-dashboard/partials/topic/topic-view.ejs
similarity index 100%
rename from client/agora/views/dashboard/partials/topic/topic-view.ejs
rename to client/agora/views/shared-dashboard/partials/topic/topic-view.ejs
diff --git a/client/agora/views/shared-dashboard/partials/topic/workspace-manager-modal.ejs b/client/agora/views/shared-dashboard/partials/topic/workspace-manager-modal.ejs
new file mode 100644
index 00000000..8480bf67
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/topic/workspace-manager-modal.ejs
@@ -0,0 +1,51 @@
+<!-- The Modal -->
+<div id="resource-modal-div" class="new-resource-modal">
+
+  <!-- Modal content -->
+  <div class="resource-modal-content">
+
+    <span class="close">&times;</span>
+    <h4 id="modal-title">Workspace Manager</h4>
+
+
+    <div id="resource-modal-body">
+        <!--Resource Options-->
+        <div class="manager-options" id="resource-options">
+            <h6 class="modal-option-header">Resources</h6>
+
+            <!--Create New Document-->
+            <div class="option-div" id="create-doc-div">
+                <span class="material-symbols-outlined modal-icon">description</span>
+                <div class="option" id="new-doc">Create New Document</div>
+            </div>
+
+            <!--Upload File-->
+            <div class="option-div" id="file-upload-div">
+                <span class="material-symbols-outlined modal-icon">upload_file</span>
+                <div class="option" id="file-upload">Upload A File</div>
+            </div>  
+        </div>
+
+        <div id="options-divider"></div>
+
+        <!--Topic Options-->
+        <div class="manager-options" id="topic-options">
+            <h6 class="modal-option-header">Topics</h6>
+            
+            <!--Create New Topic-->
+            <div class="option-div" id="create-topic-div">
+                <span class="material-symbols-outlined modal-icon">folder</span>
+                <div class="option" id="new-topic">Create New Topic</div>
+            </div>
+
+            <!--Open Existing Topic-->
+            <div class="option-div" id="open-topic-div">
+                <span class="material-symbols-outlined modal-icon">folder_open</span>
+                <div class="option" id="open-topic">Open Existing Topic</div>
+            </div>
+        </div>
+    </div>
+
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/workspace/edit-workspace-pathway.ejs b/client/agora/views/shared-dashboard/partials/workspace/edit-workspace-pathway.ejs
new file mode 100644
index 00000000..2b5441b2
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/workspace/edit-workspace-pathway.ejs
@@ -0,0 +1,47 @@
+<h3>Choose the topics that will make up the topic pathway</h3>
+<p>Drag and drop from available topics and re-arrange the order of chosen topics</p>
+<input type="hidden" name="pathway" id="pathway" value="" />
+<div id="pathway-draggable">
+    <div class="available-container">
+        
+        <h4>Available Topics:</h4>
+        <hr />
+        <div id="available-items" class="available-items">
+            
+            <%
+            // get all of the workspaces available that are not already assigned to the workspace
+            if(availableTopics) {
+
+                for(let i=0; i < availableTopics.length; i++) {
+                    %>
+                        <div id="<%- availableTopics[i].id %>" class="text-primary draggable" draggable="true" href="/a/topic/<%- availableTopics[i].id %>" ><%- availableTopics[i].topicName %></div>
+                    <%
+                }
+            }
+
+            %>
+        </div>
+    </div>
+    <div class="chosen-container">
+        
+        <h4>Selected topics:</h4>
+        <hr />
+        <div id="chosen-items" class="chosen-items">
+            
+            <%
+
+            // if the workspace has been saved allow the user to link Topics
+            if(workspace && workspace.workspaceId > 0) {
+                if(workspace.topics && workspace.topics.length > 0) {
+
+                    for(let i=0; i < workspace.topics.length; i++) {
+                    %>
+                        <div id="<%- workspace.topics[i].id %>" class="text-primary draggable" draggable="true" href="/a/topic/<%- workspace.topics[i].id %>" ><%- workspace.topics[i].topicName %></div>
+                    <%
+                    }
+                }
+            }
+            %>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/partials/workspace/edit-workspace.ejs b/client/agora/views/shared-dashboard/partials/workspace/edit-workspace.ejs
new file mode 100644
index 00000000..bd8866fc
--- /dev/null
+++ b/client/agora/views/shared-dashboard/partials/workspace/edit-workspace.ejs
@@ -0,0 +1,128 @@
+<div class="modal fade" id="create-workspace-modal" tabindex="-1" role="dialog" aria-labelledby="create-workspace-modal-label" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 class="modal-title" id="create-workspace-modal-label">Workspace</h2>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+          
+        </div>
+        <div class="modal-body">
+            
+            <section>
+                <hr />
+                <%
+                
+                if(workspace) {
+                    %>
+                    <form action="/dashboard/workspace" id="workspaceForm" enctype="multipart/form-data" method="POST"> <!-- enctype="application/json" enctype="multipart/form-data"-->
+                        <div class="form-group">
+                            <input type="hidden" name="workspaceId" id="workspaceId" value="<%- workspace.workspaceId %>" />
+                            <input type="hidden" name="workspaceModified" id="workspaceModified" value="false" />
+
+                            <div class="form-row">
+                                <div class="col-sm-2 my-1">
+                                    <!-- Image -->
+
+                                    <div class="drop-zone">
+                                        <span class="drop-zone__prompt">Drop file here or click to upload</span>
+                                        <input type="file" name="workspaceImageField" class="drop-zone__input" />
+                                    </div>
+
+                                </div>
+                                <div class="col my-1">
+                                    <div class="row">
+                                        <div class="col">
+                                            <!-- Visibility -->
+                                            <select name="workspaceVisibility" id="workspaceVisibility" class="form-control form-control-lg">
+                                                <%
+                                                if(workspace.visibility === 'private') {
+                                                    %>
+                                                    <option value="0" selected>Private</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="0">Private</option>
+                                                    <%
+                                                }
+                                                %>
+                                                <%
+                                                if(workspace.visibility === 'public') {
+                                                    %>
+                                                    <option value="2" selected>Public</option>
+                                                    <%
+                                                }
+                                                else {
+                                                    %>
+                                                    <option value="2">Public</option>
+                                                    <%
+                                                }
+                                                %>
+                                            </select>
+                                        </div>
+                                        <div class="col">
+                                            Completable: <input type="checkbox" class="" id="workspaceCompletable" name="workspaceCompletable" <%- (workspace.completable)?'checked':'' %> />
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col">
+                                           &nbsp; <input type="input" class="form-control form-control-lg" name="workspaceName" value="<%- workspace.workspaceName %>" id="workspaceName" placeholder="Title" required>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="additionalMetadataHeader">
+                                <svg class="centered" id="expansionArrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="IconChangeColor" height="24" width="24"><path d="M19,20H5a1,1,0,0,0,0,2H19a1,1,0,0,0,0-2Zm-7.71-2.29a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,14.59V3a1,1,0,0,0-2,0V14.59l-2.29-2.3a1,1,0,1,0-1.42,1.42Z" id="mainIconPathAttribute" stroke-width="1.1" stroke="#000000" fill="#000000" filter="url(#shadow)"></path><filter id="shadow"><feDropShadow id="shadowValue" stdDeviation=".5" dx="0" dy="0" flood-color="black"></feDropShadow></filter></svg>
+                                <svg class="centered" id="expansionArrowUp" style="display:none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" transform="rotate(180)"><path d="M19,20H5a1,1,0,0,0,0,2H19a1,1,0,0,0,0-2Zm-7.71-2.29a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,14.59V3a1,1,0,0,0-2,0V14.59l-2.29-2.3a1,1,0,1,0-1.42,1.42Z" stroke-width="1.1" stroke="#000000" fill="#000000" filter="url(#shadow2)"></path><filter id="shadow2"><feDropShadow stdDeviation=".5" dx="0" dy="0" flood-color="black"></feDropShadow></filter></svg>
+
+                            </div>
+                            
+                            <!-- Additional Workspace metadata - Description / Requried / Active - Hidden by default -->
+                            <div id="additionalMetadata" style="display:none">
+                                <div class="row">
+                                    <div class="col-auto">
+                                        <div class="row">
+                                            <div class="col">
+                                                Active: <input type="checkbox" class="" id="workspaceActive" name="workspaceActive" <%- (workspace.active)?'checked':'' %> />
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                Version: <input type="input" class="form-control form-control-lg" name="workspaceVersion" value="<%- workspace.workspaceVersion %>" id="workspaceVersion" placeholder="Version" disabled>
+                                            </div>
+                                        </div>
+                                        
+                                    
+                                    </div>
+                                    <div class="col">
+                                        <textarea class="form-control form-control-lg" name="workspaceDescription" value="<%- workspace.workspaceDescription %>" id="workspaceDescription" placeholder="Description"></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <br />
+                            <br />
+                            
+                            <%- include('./edit-workspace-pathway') %>
+
+                        </div>
+                        <a class="fas fa-trash redColor" onclick='deleteWorkspace();'></a> &nbsp;&nbsp; <a class="text-primary" onclick='addFilter();'></a>
+                        <button type="submit" id="workspaceButton" class="btn btn-primary btn-lg float-left">Save Workspace</button>
+                    </form>
+                    <%
+                }
+                
+                %>
+
+            </section>
+
+        </div>
+        <div class="modal-footer">
+          
+        </div>
+      </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/agora/views/shared-dashboard/shared-dashboard.ejs b/client/agora/views/shared-dashboard/shared-dashboard.ejs
new file mode 100644
index 00000000..3dcd3e75
--- /dev/null
+++ b/client/agora/views/shared-dashboard/shared-dashboard.ejs
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <%- include('../partials/head'); %>
+  </head>
+  <body id="page-top" class="dashboard-content">
+
+    <!-- Gallery View-->
+    <%- include('./side-menu/side-menu.ejs'); %> 
+    <%- include('./partials/gallery/note-gallery.ejs') %>
+    <!-- Legacy About Section-->
+    <section class="page-section-top-padded mb-0" id="about">
+      <div class="container navbar-interior font-weight-bold text-primary right-of-bar">
+        
+        <%- include('../partials/message'); %> 
+        
+      </div>
+
+      <div class="container right-of-bar">
+        <div class="divider-custom"></div>
+          
+        <div class="text-left mt-4">
+          <div id="story1" class="row justify-content-left"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
+    <%- include('../partials/jsincludes'); %>
+  </body>
+</html>
diff --git a/client/agora/views/shared-dashboard/side-menu/side-menu.ejs b/client/agora/views/shared-dashboard/side-menu/side-menu.ejs
new file mode 100644
index 00000000..534d1f57
--- /dev/null
+++ b/client/agora/views/shared-dashboard/side-menu/side-menu.ejs
@@ -0,0 +1,77 @@
+<nav>
+    <div class="side-menu-wrapper">
+        <div class="burger-navbar">
+            <div class="container burger-nav-container">
+                <input class="checkbox" type="checkbox" name="" id="" />
+
+                <span class="button-right"
+                    class="navbar-toggler navbar-toggler-right font-weight-bold bg-secondary text-white rounded">
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+
+                </span>
+
+                <div class="menu-items">
+                    <a href="/">
+                        <img src="/assets/img/logos/agora-logo-2023-1.png" style="height:50px" />
+                    </a><br>
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/dashboard">Dashboard</a></li>
+                    <li><a href="/shared-dashboard">Shared Dashboard</a></li>
+                    <li><a href="/friends">Friends</a></li>
+                    <!-- <li><a href="/community">Community</a></li> -->
+
+                </div>
+            </div>
+        </div>
+        <div id="agoraSideBar" class="sidebar">
+            <a href="/">
+                <img src="/assets/img/logos/agora-logo-2023-1.png" class="menuLogo" />
+            </a>
+            <a href="/">
+                <i class="material-icons">home</i>
+                <span class="icon-text side-menu-icon">Home</span>
+            </a>
+            <a href="/dashboard">
+                <i class="material-icons">remove_from_queue</i>
+                <span class="icon-text side-menu-icon">Dashboard</span>
+            </a>
+            <a href="/shared-dashboard">
+                <i class="material-icons">share</i>
+                <span class="icon-text side-menu-icon">Shared Dashboard</span>
+            </a>
+            <a href="/friends">
+                <i class="material-icons">people</i>
+                <span class="icon-text side-menu-icon">Friends</span>
+            </a>
+            <!-- <a href="/community">
+                <i class="material-icons">groups</i>
+                <span class="icon-text"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Community</span></a><br> -->
+
+            <a id="pin-menu" href="#" style="position: absolute; bottom: 80px;">
+                <i id="tack-icon" class="material-icons">push_pin</i>
+                <span class="icon-text side-menu-icon">Dock Sidebar</span>
+            </a>
+
+            <% if(locals.authUser) { %>
+                <a href="/profile/manageProfile"
+                    style="width:100%; position: absolute;bottom: 0; left: -15px;border-top:solid;border-radius:2px;">
+
+                    <% if( locals.authUser.profileFilename.toString().substring(0, 7)=="http://" ||
+                        locals.authUser.profileFilename.toString().substring(0, 8)=="https://" ) { %>
+                        <img src="<%- locals.authUser.profileFilename %>" alt="User Dashboard avatar"
+                            title="User Dashboard" class="profile-top-image" />
+                        <% } else { %>
+                            <img src="<%= process.env.AVATAR_IMAGE_WEB_PATH%><%- locals.authUser.profileFilename %>"
+                                alt="User Dashboard avatar" title="User Dashboard" class="profile-top-image" />
+                            <% } %>
+                                <span class="icon-text">&nbsp;&nbsp;&nbsp;Account</span>
+                </a><br>
+                <% } %>
+        </div>
+    </div>
+
+</nav>
\ No newline at end of file
diff --git a/package.json b/package.json
index be8e9b5a..7d82492c 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "ejs": "^3.1.8",
     "express": "^4.18.2",
     "express-fileupload": "^1.4.0",
-    "express-response-hooks": "^1.0.4",
     "express-session": "^1.17.2",
     "google-auth-library": "^8.7.0",
     "node-fetch": "^2.6.7",
@@ -54,6 +53,7 @@
   },
   "homepage": "https://github.com/briangormanly/agora#readme",
   "devDependencies": {
-    "eslint": "^8.25.0"
+    "eslint": "^8.25.0",
+    "nodemon": "^3.0.1"
   }
 }
diff --git a/server/agora.js b/server/agora.js
index dfd528eb..57cea78c 100644
--- a/server/agora.js
+++ b/server/agora.js
@@ -7,7 +7,7 @@
 
 // import and initizialize express
 const express = require( "express" );
-const app = express();
+const app = express(); 
 
 // config env library setup
 require( "dotenv" ).config();
@@ -23,12 +23,7 @@ app.use(
     } )
 );
 app.use( bodyParser.json() );
-
-
-// library that allows us to hook responses in the middleware
-const responseHooks = require( "express-response-hooks" );
-
-app.use( responseHooks() );
+//app.use( responseHooks() );
 
 
 // cross origin
@@ -143,6 +138,18 @@ app.use( "/profile", profileRoutes );
 const dashboardRoutes = require( "./routes/dashboardRoutes" );
 app.use( "/dashboard", dashboardRoutes );
 
+/**
+ * User Shared Dashboard routes
+ */
+const dashboardSharedRoutes = require( "./routes/dashboardSharedRoutes" );
+app.use( "/dashboard-shared", dashboardSharedRoutes );
+
+/**
+ * User Friends routes
+ */
+const friendsRoutes = require( "./routes/friendsRoutes" );
+app.use( "/friends", friendsRoutes );
+
 /**
  * Topic / Main editor routes
  */
diff --git a/server/controller/apis/friendController.js b/server/controller/apis/friendController.js
new file mode 100644
index 00000000..f9628c42
--- /dev/null
+++ b/server/controller/apis/friendController.js
@@ -0,0 +1,313 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+// dependencies
+const fs = require( 'fs' );
+let path = require( 'path' );
+
+// import util Models
+const ApiMessage = require( '../../model/util/ApiMessage' );
+
+// import services
+const friendService = require( '../../service/friendService' );
+const userService = require( '../../service/userService' );
+const notificationService = require( '../../service/notificationService' );
+
+//Returns all friends of a user.
+exports.getAllFriends = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ){
+        authUserID = req.user.userId;
+    }
+    else if( req.session.authUser ){
+        authUserID = req.session.authUser.userId;
+    }
+    if ( authUserID ){
+        let friends = await friendService.getAllFriends( req.user.userId );
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Returned all Friends" );
+        res.status( 200 ).json( friends );
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "Friends not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "Friends not found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+exports.getResources = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ){
+        authUserID = req.user.userId;
+    }
+    else if( req.session.authUser ){
+        authUserID = req.session.authUser.userId;
+    }
+    if( authUserID ){
+        let resources = [ ];
+        let friends = await friendService.getAllFriends( req.user.userId );
+        let requests = await friendService.getUnreadFriendRequests( req.user.userId );
+        let count = await friendService.getUnreadFriendRequestCount( req.user.userId );
+        resources.push(req.user, friends, requests, count);
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Returned all user details" );
+        res.status( 200 ).json( resources );
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "User details not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "User details not found" );
+        res.status( 400 ).json( message );
+    }
+}
+
+/*
+//Get a specific friend, by their ID.
+exports.getFriendByID = async ( req, res ) => {
+    let authUserID;
+    if( req.user ) {
+        authUserID = req.user.userId;
+    }
+    else if( req.session.authUser ) {
+        authUserID = req.session.authUser.userId;
+    }
+    if( authUserID ) {
+        let friend = await friendService.getFriendByID( req.params.userID, authUserID );
+        if ( friend ) {
+            res.set( "x-agora-message-title", "Success" );
+            res.set( "x-agora-message-detail", "Returned friend by id" );
+            res.status( 200 ).json( friend );
+        }
+        else {
+            const message = ApiMessage.createApiMessage( 404, "Not Found", "Friend not found" );
+            res.set( "x-agora-message-title", "Not Found" );
+            res.set( "x-agora-message-detail", "Friend not found" );
+            res.status( 400 ).json( message );
+        }
+    }
+};
+*/
+
+//Sends a friend request.
+exports.sendFriendRequest = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ) {
+        authUserID = req.user.userId;
+    }
+    else if ( req.session.authUser ) {
+        authUserID = req.session.authUser.userId;
+    }
+    //Checks if user exists.
+    let friendUsername = userService.verifyUsername( req.body.username );
+    if ( friendUsername ) {
+        let friend = await userService.getUserByUsername( req.body.username );
+        let request = friendService.sendFriendRequest( authUserID, friend[0].userId );
+        if ( request ) {
+            res.set( "x-agora-message-title", "Success" );
+            res.set( "x-agora-message-detail", "Friend Request Sent" );
+            res.status( 201 ).json( "Success" );
+
+            // Add a Notification after a user 
+            const message = "You have received a new friend request from " + req.user.username;  
+            await notificationService.addNotification( friendUsername, message );
+        }
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "User not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "User not found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+//Sends a friend request.
+exports.acceptFriendRequest = async ( req, res ) => {
+    let request = friendService.acceptFriendRequest( req.body.friendship_id );
+    if ( request ) {
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Friend Request Accepted" );
+        res.status( 201 ).json( "Success" );
+    }
+    
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "User not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "User not found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+//Sends a friend request.
+exports.denyFriendRequest = async ( req, res ) => {
+    let request = friendService.denyFriendRequest( req.body.friendship_id );
+    if ( request ) {
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Friend Request Denied" );
+        res.status( 201 ).json( "Success" );
+    }
+
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "User not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "User not found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+//Rejects a friend request.
+exports.rejectFriendRequest = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ) {
+        authUserID = req.user.userId;
+    }
+    else if ( req.session.authUser ) {
+        authUserID = req.session.authUser.userId;
+    }
+    if ( authUserID ) {
+        let success = friendService.rejectFriendRequest( authUserID );
+        if ( success ) {
+            res.set( "x-agora-message-title", "Success" );
+            res.set( "x-agora-message-detail", "Friend Request Rejected" );
+            res.status( 201 ).json( "Success" );
+        }
+    }
+};
+
+//Deletes a friend.
+exports.deleteFriendByID = async ( req, res ) => {
+    let success = await friendService.deleteFriendByID( req.body.friendshipId);
+    if ( success ) {
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Removed friend" );
+        res.status( 200 ).json( "Success" );
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "Friend not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "Friend not found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+exports.getUnacceptedFriendRequests = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ){
+        authUserID = req.user.userId;
+    }
+    else if( req.session.authUser ){
+        authUserID = req.session.authUser.userId;
+    }
+    if ( authUserID ){
+        let friends = await friendService.getUnacceptedFriendRequests( req.user.userId );
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Returned all non friends" );
+        res.status( 200 ).json( friends );
+    }
+    else {
+        const message = ApiMessage.getUnacceptedFriendRequests( 404, "Not Found", "Non friends not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "Non friends not found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+exports.getAddFriends = async function ( req, res ) {
+
+    if( req.session.authUser ) {
+
+        const authUser = await userService.setUserSession( req.session.authUser.email );
+        req.session.authUser = null;
+        req.session.authUser = authUser;
+        res.locals.authUser = req.session.authUser;
+
+        const userFriends = await friendService.getAllFriends( req.session.authUser.userId );
+        
+        res.render( './add-friends/add-friends', { user: authUser, friends: userFriends} );
+        
+    }
+    else {
+        res.redirect( 303, '/signIn' );
+    }
+};
+
+exports.getFriends = async function ( req, res ) {
+
+    if( req.session.authUser ) {
+
+        const authUser = await userService.setUserSession( req.session.authUser.email );
+        req.session.authUser = null;
+        req.session.authUser = authUser;
+        res.locals.authUser = req.session.authUser;
+
+        const userFriends = await friendService.getAllFriends( req.session.authUser.userId );
+
+        res.render( './friends/friends', { user: authUser, friends: userFriends} );
+        
+    }
+    else {
+        res.redirect( 303, '/signIn' );
+    }
+};
+
+
+// Get the count of unread friend requests for a user
+exports.getUnreadFriendRequestCount = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ) {
+        authUserID = req.user.userId;
+    }
+    else if ( req.session.authUser ) {
+        authUserID = req.session.authUser.userId;
+    }
+    if ( authUserID ) {
+        let count = await friendService.getUnreadFriendRequestCount( authUserID );
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Count received" );
+        res.status( 200 ).json( count );
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "No count found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "No count found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+// Get the details of unread friend requests for a user
+exports.getUnreadFriendRequests = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ) {
+        authUserID = req.user.userId;
+    }
+    else if ( req.session.authUser ) {
+        authUserID = req.session.authUser.userId;
+    }
+    if ( authUserID ) {
+        let requests = await friendService.getUnreadFriendRequests( authUserID );
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Requests received" );
+        res.status( 200 ).json( requests );
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "No requests found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "No requests found" );
+        res.status( 400 ).json( message );
+    }
+};
+
+/*
+// Get all friend requests sent to a user
+exports.getAllFriendRequests = async ( req, res ) => {
+    const userID = req.user.userID; // Assuming you have the user's ID
+    const requests = await friendService.getAllFriendRequests( userID );
+    res.set( "x-agora-message-title", "Success" );
+    res.set( "x-agora-message-detail", "Returned all Friend Requests" );
+    res.status( 200 ).json( requests );
+};
+*/
\ No newline at end of file
diff --git a/server/controller/apis/sharedEntityController.js b/server/controller/apis/sharedEntityController.js
index 503db714..18c0d392 100644
--- a/server/controller/apis/sharedEntityController.js
+++ b/server/controller/apis/sharedEntityController.js
@@ -12,6 +12,7 @@ let path = require( 'path' );
 // import services
 const sharedEntityService = require( '../../service/sharedEntityService' );
 const workspaceService = require( '../../service/workspaceService' );
+const userService = require( '../../service/userService' );
 const topicService = require( '../../service/topicService' );
 const resourceService = require( '../../service/resourceService' );
 
@@ -21,6 +22,8 @@ const SharedEntity = require( '../../model/sharedEntity' );
 const ApiMessage = require( "../../model/util/ApiMessage" );
 const { Console } = require( 'console' );
 
+const User = require( '../../model/user' ); // Import the User model
+
 /**
  * 
  * @param {*} req 
@@ -154,4 +157,54 @@ exports.saveCopiedEntity = async ( req, res ) => {
         res.set( "x-agora-message-detail", "Entity not found" );
         res.status( 404 ).json( message );
     }
+};
+
+//Share workspace 
+exports.sharedWorkspace = async ( req, res ) => {
+    try {
+        // authenticate the user sharing 
+        let authUserId = req.user ? req.user.userId : req.session.authUser?.userId;
+        if ( !authUserId ) {
+            return res.status( 403 ).json( { message: 'User not authenticated' } );
+        }
+
+        // Fetch user details from the User model
+        const sharingUser = await userService.getActiveUserById( authUserId );
+        if ( !sharingUser ) {
+            return res.status( 404 ).json( { message: 'User not found' } );
+        }
+
+        const workspaceId = req.body.entityId;
+        const sharedWithUserId = req.body.sharedWithUserId;
+        const permissionLevel = req.body.permissionLevel;
+        const canCopy = req.body.canCopy;
+
+        // Verify's the owner of the workspace
+        const workspace = await workspaceService.getWorkspaceById( workspaceId );
+        if ( !workspace ) {
+            return res.status( 404 ).json( { message: 'Workspace not found' } );
+        }
+        if ( workspace.ownedBy !== sharingUser.userId ) {
+            return res.status( 403 ).json( { message: 'Unauthorized: You do not own this workspace' } );
+        }
+
+        // Share the workspace
+        const sharedEntity = {
+            entityId: workspaceId,
+            entityType: 'workspace',
+            shareUserId: sharedWithUserId,
+            ownerUserId: sharingUser.userId,
+            permissionLevel: permissionLevel,
+            canCopy: canCopy
+        };
+
+        const sharedEntityId = await sharedEntityService.insertOrUpdateSharedEntity( sharedEntity );
+
+        // Send success response
+        res.status( 200 ).json( { message: 'Workspace shared successfully', sharedEntityId } );
+    } 
+    catch ( error ) {
+        // Handle any other errors 
+        res.status( 500 ).json( { message: error.message } );
+    }
 };
\ No newline at end of file
diff --git a/server/controller/apis/userController.js b/server/controller/apis/userController.js
index 8521e3d6..a0347b0e 100644
--- a/server/controller/apis/userController.js
+++ b/server/controller/apis/userController.js
@@ -23,6 +23,28 @@ exports.getUserByEmail = async function( req, res ) {
     } );
 };
 
+exports.getUserByUsername = async function( req, res ) {
+    res.setHeader( 'Content-Type', 'text/html' );
+    var username = req.params.username;
+
+    userService.getUserByUsername( username ).then( ( user ) => {
+
+        res.setHeader( 'Content-Type', 'application/json' );
+        res.send( user );
+    } );
+};
+
+exports.getActiveUserById = async function( req, res ) {
+    res.setHeader( 'Content-Type', 'text/html' );
+    var userId = req.params.userId;
+
+    userService.getActiveUserById( userId ).then( ( user ) => {
+
+        res.setHeader( 'Content-Type', 'application/json' );
+        res.send( user );
+    } );
+};
+
 exports.verifyUsername = async function( req, res ) {
     res.setHeader( 'Content-Type', 'text/html' );
     var username = req.params.username;
diff --git a/server/controller/apis/workspaceController.js b/server/controller/apis/workspaceController.js
index dde112d7..a8341276 100644
--- a/server/controller/apis/workspaceController.js
+++ b/server/controller/apis/workspaceController.js
@@ -12,7 +12,7 @@ let path = require( 'path' );
 // import models
 const Workspace = require( '../../model/workspace' );
 // import controllers
-const {errorController} = require( "./apiErrorController" );
+const { errorController } = require( "./apiErrorController" );
 
 // import util Models
 const ApiMessage = require( '../../model/util/ApiMessage' );
@@ -45,17 +45,43 @@ exports.getAllVisibleWorkspaces = async ( req, res ) => {
     res.status( 200 ).json( workspaces );
 };
 
+//get shared workspaces
+exports.getSharedWorkspaces = async ( req, res ) => {
+    //get all shared workspaces
+    let sharedWorkspaces = await workspaceService.getAllSharedWorkspaces( req.user.userId );
+    res.set( "x-agora-message-title", "Success" );
+    res.set( "x-agora-message-detail", "Returned all shared workspaces" );
+    res.status( 200 ).json( sharedWorkspaces );
+};
+
+exports.getSharedWorkspaceByID = async ( req, res ) => {
+    //get shared workspace by ID.
+    console.log( "Getting Shared Workspace" );
+    let sharedWorkspace = await workspaceService.getSharedWorkspaceByID( req.params.workspaceId );
+    if ( sharedWorkspace ) {
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Returned workspace by id" );
+        res.status( 200 ).json( sharedWorkspace );
+    }
+    else {
+        const message = ApiMessage.createApiMessage( 404, "Not Found", "Workspace not found" );
+        res.set( "x-agora-message-title", "Not Found" );
+        res.set( "x-agora-message-detail", "Workspace not found" );
+        res.status( 404 ).json( message );
+    }
+};
+
 exports.getWorkspaceById = async ( req, res ) => {
 
     // Get the auth user id from either the basic auth header or the session.
     let authUserId;
-    if( req.user ) {
+    if ( req.user ) {
         authUserId = req.user.userId;
     }
-    else if( req.session.authUser ) {
+    else if ( req.session.authUser ) {
         authUserId = req.session.authUser.userId;
     }
-    if( authUserId ) {
+    if ( authUserId ) {
         // get all the active workspaces by user
         let workspace = await workspaceService.getActiveWorkspaceWithTopicsById( req.params.workspaceId, authUserId, true );
         if ( workspace ) {
@@ -73,30 +99,30 @@ exports.getWorkspaceById = async ( req, res ) => {
 };
 
 exports.getAllTopicsForWorkspaceId = async ( req, res ) => {
-    
+
     // Get the auth user id from either the basic auth header or the session.
     let authUserId;
-    if( req.user ) {
+    if ( req.user ) {
         authUserId = req.user.userId;
     }
-    else if( req.session.authUser ) {
+    else if ( req.session.authUser ) {
         authUserId = req.session.authUser.userId;
     }
 
-    if( authUserId ){
+    if ( authUserId ) {
         // Check if valid workspaceId given.
         let workspace = await workspaceService.getWorkspaceById( req.params.workspaceId, authUserId );
-        if( workspace ) {
+        if ( workspace ) {
 
             let topicsList = [];
             // Get all topics Ids associated with our workspaceId.
             let topicsIds = await workspaceService.getAllTopicsIdsForWorkspace( workspace.workspaceRid );
-            
+
             // Grab each topic by id and append it to our list of topics
             for ( let index in topicsIds ) {
                 let topics = await topicService.getTopicById( topicsIds[index], authUserId );
 
-                if ( topics ){ // Ensure retrieval of topics
+                if ( topics ) { // Ensure retrieval of topics
                     topicsList.push( topics );
                 }
                 else {
@@ -111,7 +137,7 @@ exports.getAllTopicsForWorkspaceId = async ( req, res ) => {
         }
 
         else {
-            return errorController( ApiMessage.createNotFoundError ( "Topic", res ) );
+            return errorController( ApiMessage.createNotFoundError( "Topic", res ) );
         }
     }
 
@@ -121,10 +147,10 @@ exports.getAllTopicsForWorkspaceId = async ( req, res ) => {
 exports.deleteWorkspaceById = async ( req, res ) => {
 
     let authUserId;
-    if( req.user ) {
+    if ( req.user ) {
         authUserId = req.user.userId;
     }
-    else if( req.session.authUser ) {
+    else if ( req.session.authUser ) {
         authUserId = req.session.authUser.userId;
     }
 
@@ -149,7 +175,7 @@ exports.deleteWorkspaceById = async ( req, res ) => {
 exports.getAllVisibleWorkspacesWithTopics = async ( req, res ) => {
     // get all the active workspaces
     let workspaces = await workspaceService.getAllVisibleWorkspacesWithTopics();
-    
+
     res.set( "x-agora-message-title", "Success" );
     res.set( "x-agora-message-detail", "Returned all workspaces" );
     res.status( 200 ).json( workspaces );
@@ -158,14 +184,14 @@ exports.getAllVisibleWorkspacesWithTopics = async ( req, res ) => {
 
 
 exports.getAllWorkspacesForauthUser = async ( req, res ) => {
-    
+
     console.log( "The rquest: " + JSON.stringify( req.user ) );
 
     // get all the workspaces for this owner
     let ownerWorkspaces = await workspaceService.getAllWorkspacesForOwner( req.user.userId, false );
-    
-        
-      
+
+
+
     res.set( "x-agora-message-title", "Success" );
     res.set( "x-agora-message-detail", "Returned all workspaces for user" );
     res.status( 200 ).json( ownerWorkspaces );
@@ -180,25 +206,25 @@ exports.getAllWorkspacesForauthUser = async ( req, res ) => {
 exports.saveWorkspaceImage = async ( req, res, workspaceId, filename ) => {
 
     // save image in db and delete old file  
-    if( workspaceId > 0 ) {
+    if ( workspaceId > 0 ) {
         workspaceService.updateWorkspaceImage( workspaceId, filename ).then( ( rValue ) => {
             if ( rValue === filename ) {
                 console.log( 'No image update occurred - exiting image update function.' );
                 return false;
             }
 
-            if( rValue && rValue.length > 0 && ( rValue != 'workspace-default.png' || rValue != 'peak.svg' ) ) {
+            if ( rValue && rValue.length > 0 && ( rValue != 'workspace-default.png' || rValue != 'peak.svg' ) ) {
                 fs.unlink( UPLOAD_PATH_BASE + "/" + FRONT_END + WORKSPACE_PATH + rValue, ( err ) => {
-                    if( err ) {
+                    if ( err ) {
                         console.log( "[workspaceController.saveWorkspaceImage] file delete error status: " + err );
                         return false;
                     }
-                    
+
                 } );
-            } 
+            }
         } );
     }
-    
+
     return true;
 };
 
@@ -212,21 +238,21 @@ exports.saveWorkspaceImage = async ( req, res, workspaceId, filename ) => {
 exports.saveWorkspace = async ( req, res, redirect ) => {
 
     let workspace = Workspace.emptyWorkspace();
-    
+
     // get the user id either from the request user from basic auth in API call, or from the session for the UI
     let authUserId;
-    if( req.user ) {
+    if ( req.user ) {
         authUserId = req.user.userId;
     }
-    else if( req.session.authUser ) {
+    else if ( req.session.authUser ) {
         authUserId = req.session.authUser.userId;
     }
-    
-    workspace.ownedBy = authUserId; 
+
+    workspace.ownedBy = authUserId;
     //console.log( "workspace owned by: " + workspace.ownedBy + " from " + authUserId ); 
 
-    if( authUserId ) {
-        if( req.body.workspaceId != null && req.body.workspaceId != -1 ) {
+    if ( authUserId ) {
+        if ( req.body.workspaceId != null && req.body.workspaceId != -1 ) {
             workspace.workspaceId = req.body.workspaceId;
         }
 
@@ -234,11 +260,11 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
         let existingWorkspace = await workspaceService.getMostRecentWorkspaceById( workspace.workspaceId.toString() );
 
         // if this is an update replace the workspace with teh existing one as the starting point
-        if( existingWorkspace ) {
-            
+        if ( existingWorkspace ) {
+
             workspace = existingWorkspace;
-  
-            if( ( existingWorkspace.visibility != req.body.visibility )
+
+            if ( ( existingWorkspace.visibility != req.body.visibility )
                 || ( existingWorkspace.workspaceName != req.body.workspaceName )
                 || ( existingWorkspace.workspaceDescription != req.body.workspaceDescription )
                 || ( existingWorkspace.active != req.body.active )
@@ -256,7 +282,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
 
         // add changes from the body if they are passed
         if ( req.body.visibility == "public" || req.body.visibility == "private" ) { // TODO: this checking needs to be done via frontend form validation
-            workspace.visibility = req.body.visibility;   
+            workspace.visibility = req.body.visibility;
         }
         else {
             console.error( "[workspaceController.saveWorkspace]: NON-VALID 'visibility' VALUE REQUESTED - 'public', 'private' " );
@@ -268,7 +294,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
 
         workspace = await workspaceService.saveWorkspace( workspace );
 
-        if ( req.body.topics ){
+        if ( req.body.topics ) {
             await workspaceService.saveTopicsForWorkspace( workspace.workspaceRid, req.body.topics, req.body.topicsRequired );
         }
 
@@ -282,7 +308,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
         else if ( !req.files || Object.keys( req.files ).length === 0 ) {
             // no files uploaded
             this.saveWorkspaceImage( req, res, workspace.workspaceId, 'peak.svg' );
-            
+
         }
         else {
             // files included
@@ -290,10 +316,10 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
             const timeStamp = Date.now();
 
             // check the file size
-            if( file.size > maxSize ) {
+            if ( file.size > maxSize ) {
                 console.log( `File ${file.name} size limit has been exceeded for workspace` );
 
-                if( redirect ) {
+                if ( redirect ) {
                     req.session.messageType = "warn";
                     req.session.messageTitle = "Image too large!";
                     req.session.messageBody = "Image size was larger then " + maxSizeText + ", please use a smaller file. Your workspace was saved without the image.";
@@ -305,13 +331,13 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
                     res.set( "x-agora-message-title", "Image too large!" );
                     res.set( "x-agora-message-detail", "Image size was larger then " + maxSizeText + ", please use a smaller file. Your workspace was saved without the image." );
                     res.status( 422 ).json( message );
-                }             
+                }
             }
-            else if( workspace ) {
+            else if ( workspace ) {
                 await file.mv( workspaceUploadPath + timeStamp + file.name, async ( err ) => {
                     if ( err ) {
                         console.log( "Error uploading profile picture : " + err );
-                        if( redirect ) {
+                        if ( redirect ) {
                             req.session.messageType = "error";
                             req.session.messageTitle = "Error saving image!";
                             req.session.messageBody = "There was a error uploading your image for this workspace. Your workspace should be saved without the image.";
@@ -331,7 +357,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
                 } );
             }
             else {
-                if( redirect ) {
+                if ( redirect ) {
                     req.session.messageType = "error";
                     req.session.messageTitle = "Error saving image!";
                     req.session.messageBody = "There was a error uploading your image for this workspace. Your workspace should be saved without the image.";
@@ -349,7 +375,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
 
 
 
-        if( workspace ) {
+        if ( workspace ) {
             req.session.messageType = "success";
             req.session.messageTitle = "Workspace Saved";
             req.session.messageBody = "Workspace " + workspace.workspaceName + " saved successfully!";
@@ -362,7 +388,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
 
         // get the pathway
         let pathway = null;
-        if( req.body.pathway ) {
+        if ( req.body.pathway ) {
             pathway = req.body.pathway.split( "," );
             workspaceService.savePathwayToexistingWorkspaceVersion( workspace.workspaceId, pathway );
         }
@@ -371,7 +397,7 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
     }
     else {
         // there was no authenicated user
-        if( redirect ) {
+        if ( redirect ) {
             return workspace;
         }
         else {
@@ -381,8 +407,8 @@ exports.saveWorkspace = async ( req, res, redirect ) => {
             res.status( 401 ).json( message );
         }
     }
-    
-    if( redirect ) {
+
+    if ( redirect ) {
         //console.log( "workspaceController.saveWorkspace() - END - Redirect" );
         return workspace;
     }
diff --git a/server/controller/dashboardController.js b/server/controller/dashboardController.js
index 108d48fc..0abef400 100644
--- a/server/controller/dashboardController.js
+++ b/server/controller/dashboardController.js
@@ -19,6 +19,93 @@ const topicService = require( '../service/topicService' );
 const resourceService = require( '../service/resourceService' );
 const tagService = require( '../service/tagService' );
 
+exports.getSharedDashboard = async function( req, res ) {
+    
+    let workspaceId = req.params.workspaceId;
+
+    // get all the workspaces for this owner
+    let ownerWorkspaces = await workspaceService.getAllWorkspacesForOwner( req.session.authUser.userId, false );
+    // get all the topics for this owner
+    let ownerTopics = await topicService.getAllTopicsForOwner( req.session.authUser.userId, true );
+    // start the available topics out with the full owner topic set
+    let availableTopics = ownerTopics;
+
+    // create an empty workspace to use if the user creates a new one
+    let workspace = Workspace.emptyWorkspace();
+
+    for( let i =0; i < ownerWorkspaces.length; i++ ) {
+        // Get all topics Ids associated with our workspaceId.
+        let topicsIds = await workspaceService.getAllTopicsIdsForWorkspace( ownerWorkspaces[i].workspaceRid );
+        
+        // Grab each topic by id and append it to our list of topics
+        for ( let index in topicsIds ) {
+            let topics = await topicService.getTopicById( topicsIds[index], req.session.authUser.userId );
+
+            if ( topics ){ // Ensure retrieval of topics
+                ownerWorkspaces[i].topics.push( topics );
+            }
+            else {
+                console.log( "Error retrieving resource " + topicsIds[index] + "\n" );
+            }
+        }
+
+        // get all the tags for this workspace
+        ownerWorkspaces[i].tags = await tagService.getTaggedEntity( 'workspace', ownerWorkspaces[i].workspaceId );    
+
+    }
+    if( workspaceId > 0 ) {
+        workspace = await workspaceService.getActiveWorkspaceWithTopicsById( workspaceId, false );
+        // iterate through the workspaces assigned topics, remove them from the available list
+        for( let i=0; i < workspace.topics.length; i++ ) {
+            let redundantTopic = ownerTopics.map( ot => ot.id ).indexOf( workspace.topics[i].id );
+            
+            ~redundantTopic && availableTopics.splice( redundantTopic, 1 );
+        }
+
+        // get the topics that are not currently assigned to this workspace
+
+    }
+    else {
+        workspace.ownedBy = req.session.authUser.userId;
+        workspace.workspaceVersion = 1;
+    }
+
+    // create an empty topic to use if the user creates a new one
+    let topic = Topic.emptyTopic( );
+
+    // get all the resources for this owner
+    let availableResources = await resourceService.getAllActiveResourcesForOwner( req.session.authUser.userId );
+    
+    let resource = Resource.emptyResource( );
+
+    const messageType = req.session.messageType;
+    const messageTitle = req.session.messageTitle;
+    const messageBody = req.session.messageBody;
+
+    if( req.session.messageType ) {
+        delete req.session.messageType;
+    }
+    if( req.session.messageTitle ) {
+        delete req.session.messageTitle;
+    }
+    if( req.session.messageBody ) {
+        delete req.session.messageBody;
+    }
+
+    // make sure the user has access to this workspace (is owner)
+    if( workspace.ownedBy === req.session.authUser.userId ) {
+        res.render( 'shared-dashboard/shared-dashboard', { ownerWorkspaces: ownerWorkspaces, workspace: workspace, ownerTopics: ownerTopics, topic: topic, availableTopics: availableTopics, availableResources: availableResources, resource: resource, messageType: messageType, messageTitle: messageTitle, messageBody: messageBody } );
+    }
+    else {
+        req.session.messageType = "warn";
+        req.session.messageTitle = 'Access Denied';
+        req.session.messageBody = 'You do not have access to the requested resource';
+        res.render( 'shared-dashboard/shared-dashboard', { ownerWorkspaces: ownerWorkspaces, workspace: null, ownerTopics: ownerTopics, topic: topic, messageType: messageType, messageTitle: messageTitle, messageBody: messageBody } );
+    }
+
+    
+};
+
 exports.getDashboard = async function( req, res ) {
     
     let workspaceId = req.params.workspaceId;
diff --git a/server/controller/dashboardSharedController.js b/server/controller/dashboardSharedController.js
new file mode 100644
index 00000000..8f5fed16
--- /dev/null
+++ b/server/controller/dashboardSharedController.js
@@ -0,0 +1,90 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+// dependencies
+
+
+// models
+const Workspace = require( '../model/workspace' );
+const Topic = require( '../model/topic' );
+const Resource = require( '../model/resource' );
+
+// services
+const workspaceService = require( '../service/workspaceService' );
+const topicService = require( '../service/topicService' );
+const resourceService = require( '../service/resourceService' );
+const tagService = require( '../service/tagService' );
+
+exports.getDashboard = async function ( req, res ) {
+
+    //let workspaceId = req.params.workspaceId;
+
+    // get all the shared workspaces for the user.
+    let sharedWorkspaces = await workspaceService.getSharedWorkspaces( req.session.authUser.userId, false );
+
+    // start the available topics out with the full owner topic set
+    let availableTopics = [];
+
+    // create an empty workspace to use if the user creates a new one
+    let workspace = Workspace.emptyWorkspace();
+
+    for ( let i = 0; i < sharedWorkspaces.length; i++ ) {
+        // Get all topics Ids associated with our workspaceId.
+        let topicsIds = await workspaceService.getAllTopicsIdsForWorkspace( sharedWorkspaces[i].workspaceRid );
+
+        // Grab each topic by id and append it to our list of topics
+        for ( let index in topicsIds ) {
+            let topics = await topicService.getTopicById( topicsIds[index], sharedWorkspaces[i].ownedBy );
+
+            if ( topics ) { // Ensure retrieval of topics
+                sharedWorkspaces[i].topics.push( topics );
+            }
+            else {
+                console.log( "Error retrieving resource " + topicsIds[index] + "\n" );
+            }
+        }
+
+        // get all the tags for this workspace
+        sharedWorkspaces[i].tags = await tagService.getTaggedEntity( 'workspace', sharedWorkspaces[i].workspaceId );
+
+    }
+
+    // create an empty topic to use if the user creates a new one
+    let topic = Topic.emptyTopic();
+
+    // get all the resources for this owner
+    let availableResources = await resourceService.getAllActiveResourcesForOwner( sharedWorkspaces.ownedBy );
+
+    let resource = Resource.emptyResource();
+
+    const messageType = req.session.messageType;
+    const messageTitle = req.session.messageTitle;
+    const messageBody = req.session.messageBody;
+
+    if ( req.session.messageType ) {
+        delete req.session.messageType;
+    }
+    if ( req.session.messageTitle ) {
+        delete req.session.messageTitle;
+    }
+    if ( req.session.messageBody ) {
+        delete req.session.messageBody;
+    }
+
+    // if the user has shared workspaces
+    if ( sharedWorkspaces  ) {
+        res.render( 'dashboard-shared/dashboard-shared', { sharedWorkspaces: sharedWorkspaces, workspace: workspace, topic: topic, availableTopics: availableTopics, availableResources: availableResources, resource: resource, messageType: messageType, messageTitle: messageTitle, messageBody: messageBody } );
+    }
+    else {
+        req.session.messageType = "warn";
+        req.session.messageTitle = 'No workspaces';
+        req.session.messageBody = 'You do not have any workspaces shared with you';
+        res.render( 'dashboard-shared/dashboard-shared', { sharedWorkspaces: sharedWorkspaces, workspace: null, topic: topic, messageType: messageType, messageTitle: messageTitle, messageBody: messageBody } );
+    }
+
+
+};
\ No newline at end of file
diff --git a/server/controller/notificationController.js b/server/controller/notificationController.js
new file mode 100644
index 00000000..692a1618
--- /dev/null
+++ b/server/controller/notificationController.js
@@ -0,0 +1,55 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+const notificationService = require('../service/notificationService'); 
+
+
+exports.addNotification = async ( req, res ) => {
+  let success = await notificationService.addNotification( req.userId, req.message );
+  if ( success ){
+      res.set( "x-agora-message-title", "Success" );
+      res.set( "x-agora-message-detail", "Notification added" );
+      res.status( 200 ).json( "Success" );
+  }
+  else {
+      const message = ApiMessage.createApiMessage( 404, "Not added", "Notification not added" );
+      res.set( "x-agora-message-title", "Not added" );
+      res.set( "x-agora-message-detail", "Notification not added" );
+      res.status( 400 ).json( message );
+  }
+};
+
+exports.deleteNotification =  async ( req, res ) => {
+    let success =  notificationService.deleteNotification( req.notificationId )
+    if ( success ){
+        res.set( "x-agora-message-title", "Success" );
+        res.set( "x-agora-message-detail", "Notification deleted" );
+        res.status( 200 ).json( "Success" );
+    }
+    else {
+      const message = ApiMessage.createApiMessage( 404, "Not Found", "Notification not found" );
+      res.set( "x-agora-message-title", "Not Found" );
+      res.set( "x-agora-message-detail", "Notification not found" );
+      res.status( 400 ).json( message );
+    }
+}
+
+exports.getNotifications = async ( req, res ) => {
+    let authUserID;
+    if ( req.user ) {
+        authUserID = req.user.userId;
+    }
+    else if ( req.session.authUser ) {
+        authUserID = req.session.authUser.userId;
+    }
+    if ( authUserID ){
+      notificationService.getNotifications( authUserID ).then( ( notifications ) => {
+        res.setHeader( 'Content-Type', 'application/json' );
+        res.send( notifications );
+    })
+    }
+}
diff --git a/server/controller/profileController.js b/server/controller/profileController.js
index dd728f1b..11c2a6c8 100644
--- a/server/controller/profileController.js
+++ b/server/controller/profileController.js
@@ -11,6 +11,7 @@
 // services
 const productService = require ( '../service/productService' );
 const userService = require( '../service/userService' );
+const friendService = require( '../service/friendService' );
 
 exports.getProfile = async function( req, res ) {
     // get the user data
@@ -37,8 +38,6 @@ exports.getProfile = async function( req, res ) {
     
 };
 
-
-
 exports.manageProfile = async function ( req, res ) {
 
     if( req.session.authUser ) {
@@ -52,7 +51,7 @@ exports.manageProfile = async function ( req, res ) {
 
         // get all products ordered
         let products = [];
-        for( let i=0; i<orders.length; i++ ) {
+        for( let i = 0; i<orders.length; i++ ) {
             let product = await productService.getProductById( orders[i].productId );
             product.status = orders[i].orderStatus;
             products.push( product );
@@ -72,7 +71,9 @@ exports.manageProfile = async function ( req, res ) {
             delete req.session.messageBody;
         }
         
-        res.render( './profile/manage', { authUser: authUser, user: authUser, products: products, messageType: messageType, messageTitle: messageTitle, messageBody: messageBody } );
+        const unacceptedFriendRequests = await friendService.getUnacceptedFriendRequests( authUser.userId );
+
+        res.render( './profile/manage', { authUser: authUser, user: authUser, products: products, messageType: messageType, messageTitle: messageTitle, messageBody: messageBody, nonFriends: unacceptedFriendRequests } );
         
         
     }
diff --git a/server/db/createDatabase.sql b/server/db/createDatabase.sql
index 23176c9a..9b9c6a6f 100644
--- a/server/db/createDatabase.sql
+++ b/server/db/createDatabase.sql
@@ -65,6 +65,7 @@ CREATE TABLE IF NOT EXISTS agora.users (
     create_time TIMESTAMP DEFAULT current_timestamp
 );
 
+
 GRANT ALL PRIVILEGES ON TABLE users TO agora;
 --GRANT USAGE, SELECT ON SEQUENCE users_user_id_seq TO agora;
 
@@ -100,7 +101,10 @@ CREATE TABLE IF NOT EXISTS agora.products (
 GRANT ALL PRIVILEGES ON TABLE products TO agora;
 GRANT USAGE, SELECT ON SEQUENCE products_product_id_seq TO agora;
 
-CREATE TABLE IF NOT EXISTS agora.product_images (
+
+
+
+CREATE TABLE IF NOT EXISTS product_images (
     product_image_id SERIAL PRIMARY KEY,
     product_id INTEGER,
     image_name VARCHAR,
@@ -115,6 +119,31 @@ GRANT ALL PRIVILEGES ON TABLE product_images TO agora;
 GRANT USAGE, SELECT ON SEQUENCE product_images_product_image_id_seq TO agora;
 CREATE INDEX IF NOT EXISTS idx_product_images_product_id ON product_images (product_id);
 
+CREATE TYPE status AS ENUM ('pending', 'accepted', 'rejected');
+
+-- Add Friendship table
+CREATE TABLE IF NOT EXISTS agora.friendships (
+    friendship_id SERIAL PRIMARY KEY,
+    initiatedby_id UUID NOT NULL REFERENCES users(user_id),
+    recipient_id UUID NOT NULL REFERENCES users(user_id),
+    friendship_status status NOT NULL, -- Changed from Varchar to an Enum type. 
+    created_time TIMESTAMP DEFAULT current_timestamp,
+    UNIQUE (initiatedby_id, recipient_id)
+);
+
+GRANT ALL PRIVILEGES ON TABLE friendships TO agora;
+
+-- Notifications table
+CREATE TABLE IF NOT EXISTS agora.notifications (
+    notification_id SERIAL PRIMARY KEY,
+    user_id UUID NOT NULL REFERENCES users(user_id),
+    message TEXT NOT NULL,
+    notification_time TIMESTAMP DEFAULT current_timestamp,
+    read_status BOOLEAN DEFAULT FALSE
+);
+
+GRANT ALL PRIVILEGES ON TABLE notifications TO agora;
+
 INSERT INTO products (
     product_name, product_type, product_description_1, product_description_2, product_purchase_text, stripe_product_id, stripe_price_id, price, product_url, product_static_image, active
 )
@@ -592,10 +621,10 @@ CREATE TYPE shared_permission_level AS ENUM ('view', 'discussion', 'edit');
 
 CREATE TABLE IF NOT EXISTS agora.shared_entities (
     shared_entity_id SERIAL PRIMARY KEY,
-    entity_id INTEGER,          -- unique id number of the entity being shared
+    entity_id UUID NOT NULL,          -- unique id number of the entity being shared
     entity_type shared_entity_type,      
-    shared_by_user_id INTEGER,  -- user id of the user who shared the entity
-    shared_with_user_id INTEGER,-- user id of the user who the entity was shared with
+    shared_by_user_id UUID NOT NULL REFERENCES users(user_id),  -- user id of the user who shared the entity
+    shared_with_user_id UUID NOT NULL REFERENCES users(user_id),-- user id of the user who the entity was shared with
     -- share_type INTEGER,      -- removed as each entity has visibility settings for public / private. Entries in this table are exceptions to private
     permission_level shared_permission_level,  
     can_copy BOOLEAN,           -- can the shared entity be copied by another user?
diff --git a/server/model/friendship.js b/server/model/friendship.js
new file mode 100644
index 00000000..ce8ff485
--- /dev/null
+++ b/server/model/friendship.js
@@ -0,0 +1,38 @@
+const { v4: uuidv4 } = require( "uuid" );
+
+// Constants for the friendship status
+const PENDING = 'pending';
+const ACCEPTED = 'accepted';
+const REJECTED = 'rejected';
+
+function friendship( initiatedby_id, recipient_id, status = PENDING ){
+    this.friendship_id = uuidv4();
+    this.initiatedby_id = initiatedby_id;
+    this.recipient_id = recipient_id;
+    this.status = status; 
+    this.created_time;
+}
+
+exports.emptyFriendship = () => {
+    return new friendship( null, null, PENDING ); //Makes sure that the empty friendships have a default status of pending. 
+};
+
+exports.ormFriendship = function ( row ) {
+    let friendshipInstance = exports.emptyFriendship();
+    friendshipInstance.friendship_id = row.friendship_id;
+    friendshipInstance.initiatedby_id = row.initiatedby_id;
+    friendshipInstance.recipient_id = row.recipient_id;
+    friendshipInstance.status = row.status;
+    friendshipInstance.created_time = row.created_time;
+    friendshipInstance.friend_first_name = row.friend_first_name;
+    friendshipInstance.friend_last_name = row.friend_last_name;
+    friendshipInstance.friend_username = row.friend_username;
+    friendshipInstance.friend_email = row.friend_email;
+
+    return friendshipInstance; 
+};
+
+// Exported the status so they can be used elsewhere in the application
+exports.PENDING = PENDING;
+exports.ACCEPTED = ACCEPTED;
+exports.REJECTED = REJECTED;
\ No newline at end of file
diff --git a/server/model/friendshipRequest.js b/server/model/friendshipRequest.js
new file mode 100644
index 00000000..b476e411
--- /dev/null
+++ b/server/model/friendshipRequest.js
@@ -0,0 +1,20 @@
+const { v4: uuidv4 } = require( "uuid" );
+
+function friendshipRequest ( requester_id, recipient_id ){
+    this.request_id = uuidv4();
+    this.requester_id = requester_id;
+    this.recipient_id = recipient_id;
+    this.request_time;
+}
+
+exports.emptyFriendshipRequest = () => {
+    return new friendshipRequest();
+};
+
+exports.ormFriendshipRequest = function (row) {
+    let friendshipRequest = exports.emptyFriendshipRequest();
+    friendshipRequest.request_id = row.request_id;
+    friendshipRequest.requester_id = row.requester_id;
+    friendshipRequest.recipient_id = row.recipient_id;
+    friendshipRequest.request_time = row.request_time;
+}
\ No newline at end of file
diff --git a/server/model/notification.js b/server/model/notification.js
new file mode 100644
index 00000000..14c4b125
--- /dev/null
+++ b/server/model/notification.js
@@ -0,0 +1,54 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+
+
+const { v4: uuidv4 } = require( "uuid" );
+
+class Notification {
+    constructor(user_id, message) {
+        this.notificationId = uuidv4(); 
+        this.userId = user_id;
+        this.message = message;
+        this.notificationTime;
+        this.readStatus = false;
+    }
+}
+
+/* Notification instance 
+ * 
+ * @param {string} user_id - The ID of the user to associate with the notification.
+ * @param {string} message - The content/message of the notification.
+ * @returns {Notification} - A new Notification instance.
+ */
+
+exports.createNotification = function( user_id, message ) {
+    let newNotification = new Notification( user_id, message );
+    return newNotification;
+};
+
+exports.emptyNotification = () => {
+    return new Notification();
+};
+
+
+/**
+ * Maps/transforms a raw database row into a structured Notification instance.
+ * 
+ * @param {Object} notificationRow - The raw database row representing a notification.
+ * @returns {Notification} - The structured Notification instance.
+ */
+
+exports.ormNotification = function( notificationRow ) {
+    let notification = exports.emptyNotification();
+    notification.notificationId = notificationRow.notification_id;
+    notification.userId = notificationRow.user_id;
+    notification.message = notificationRow.message;
+    notification.notificationTime = notificationRow.notification_time;
+    notification.readStatus = notificationRow.read_status;
+    return notification;
+};
diff --git a/server/model/sharedEntity.js b/server/model/sharedEntity.js
index cc112ab5..22cc2c36 100644
--- a/server/model/sharedEntity.js
+++ b/server/model/sharedEntity.js
@@ -5,28 +5,63 @@
  * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
  */
 
+
+// Enum for permission levels
+const PermissionLevels = Object.freeze( {
+    VIEW: 'view',
+    DISCUSSION: 'discussion',
+    EDIT: 'edit'
+}
+);
+
+
 function SharedEntity() {
     this.sharedEntityId = -1;
     this.entityId = -1;
     this.entityType = -1;
-    this.shareUserId = -1;
-    this.ownerUserId = -1;
-    this.permissionLevel = -1;
+    this.sharedByUserId = null;  
+    this.sharedWithUserId = null; 
+    this.permissionLevel = PermissionLevels.VIEW; //Added default permisson for sharing. 
     this.canCopy = false;
+    
+    //Added createTime and UpdateTime to show when a workspace was shared with someone. 
+    //Todo Add these to the DB table
+    this.createTime = null;   
+    this.updateTime = null;  
 }
 
+
+SharedEntity.prototype.setPermissionLevel = function( level ) {
+    const validLevels = new Set( Object.values( PermissionLevels ) 
+    );
+    if ( !validLevels.has( level ) ) { // Checks if the provided level is not in the set of valid levels.
+        throw new Error( `Invalid permission level: ${level}` );
+    }
+    this.permissionLevel = level;
+
+};
+
+//Show the PermissionLevels ENUM to other parts 
+exports.PermissionLevels = PermissionLevels;
+
+
 exports.emptySharedEntity = () => {
     return new SharedEntity();
 };
 
+
+//Orm is middleman between the program and database. 
 exports.ormSharedEntity = function ( row ) {
     let sharedEntity = exports.emptySharedEntity();
     sharedEntity.sharedEntityId = row.shared_entity_id;
     sharedEntity.entityId = row.entity_id;
     sharedEntity.entityType = row.entity_type;
-    sharedEntity.shareUserId = row.share_user_id;
-    sharedEntity.ownerUserId = row.owner_user_id;
-    sharedEntity.permissionLevel = row.permission_level;
+    sharedEntity.sharedByUserId = row.shared_by_user_id;  
+    sharedEntity.sharedWithUserId = row.shared_with_user_id;  
+    // Use the setPermissionLevel method to ensure that the permission level is valid
+    sharedEntity.setPermissionLevel( row.permission_level );
     sharedEntity.canCopy = row.can_copy;
+    sharedEntity.createTime = row.create_time;  
+    sharedEntity.updateTime = row.update_time;  
     return sharedEntity;
 };
\ No newline at end of file
diff --git a/server/model/user.js b/server/model/user.js
index 99c5ae82..14b9c83b 100644
--- a/server/model/user.js
+++ b/server/model/user.js
@@ -20,7 +20,7 @@ class User {
         this.lastName = lastName;
         this.hashedPassword = hashedPassword;
         this.roleId = roleId;
-        this.subscriptionActive =subscriptionActive;
+        this.subscriptionActive = subscriptionActive;
         this.stripeId = stripeId;
         this.availableAccessTokens = availableAccessTokens;
 
diff --git a/server/routes/apiAuthRoutes.js b/server/routes/apiAuthRoutes.js
index 0ce45e7e..cf17973c 100644
--- a/server/routes/apiAuthRoutes.js
+++ b/server/routes/apiAuthRoutes.js
@@ -52,23 +52,6 @@ router.use( function ( req, res, next ) {
                 // user is authorized!
                 req.user = user;
 
-                // Hook the send function so that we can append the user to the body
-                res.hooks.on( 'send', ( args ) => {
-                    let responseJson = JSON.parse( args );
-
-                    // authenticated user object - add anything you need here
-                    let authUser = { 
-                        userId: user['userId'], 
-                        firstName: user['firstName'], 
-                        lastName: user['lastName'], 
-                        email: user['email'] 
-                    };
-
-                    responseJson['authUser'] = authUser;
-
-                    args[0] = JSON.stringify( responseJson ); // need to stringify it because args wants a string. Otherwise it sends [object Object]
-                } );
-
                 // TODO future role specific verification can go here.
 
                 // Middleware complete back to called route.
@@ -144,6 +127,19 @@ router.use( '/shared', sharedEntityRoutes );
 const userRoutes = require( './apis/userRoutes' );
 router.use( '/user', userRoutes );
 
+/**
+ * Friend APIs
+ */
+
+const friendRoutes = require( './apis/friendRoutes' );
+router.use( '/friends', friendRoutes);
+
+/**
+ * Notification APIs
+ */
+const notificationRoutes = require ( './apis/notificationRoutes');
+router.use( '/notifications', notificationRoutes );
+
 /**
  * Discussion APIs
  */
diff --git a/server/routes/apis/friendRoutes.js b/server/routes/apis/friendRoutes.js
new file mode 100644
index 00000000..73e71e28
--- /dev/null
+++ b/server/routes/apis/friendRoutes.js
@@ -0,0 +1,61 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+var express = require( 'express' );
+var router = express.Router();
+
+// controllers
+const friendController = require( '../../controller/apis/friendController' );
+
+router.route( '/allFriends' )
+    //get all friends
+    .get( async ( req, res ) => {
+        friendController.getAllFriends( req, res );
+    } );
+
+// Route to handle sending friend requests
+router.route( '/request' )
+    // Get all pending friend requests for the user
+    .get( async ( req, res ) => {
+        friendController.getUnreadFriendRequests( req, res );
+    } );
+
+router.route( '/unreadRequests' )
+    .get( async ( req, res ) => {
+        friendController.getUnacceptedFriendRequests( req, res );
+    } );
+
+router.route( '/sendFriendRequest' )
+    .post( async ( req, res ) => {
+        friendController.sendFriendRequest( req, res );
+    } );
+
+router.route( '/getResources' )
+    .get( async ( req, res ) => {
+        friendController.getResources( req, res );
+    })
+
+router.route( '/requestResponse' )
+    .post( async ( req, res ) => { 
+        friendController.acceptFriendRequest( req, res );
+    } )
+    .delete( async ( req, res ) => {
+        friendController.denyFriendRequest( req, res );
+    } );
+
+router.route( '/getFriend/:userID' )
+    //get a friend by their user ID.
+    .get( async ( req, res ) => {
+        friendController.getFriendByID( req, res );
+    } )
+   
+router.route( '/deleteFriend' )
+    .delete( async ( req, res ) => {
+            friendController.deleteFriendByID( req, res );
+        } );
+
+module.exports = router;
\ No newline at end of file
diff --git a/server/routes/apis/notificationRoutes.js b/server/routes/apis/notificationRoutes.js
new file mode 100644
index 00000000..b65212a5
--- /dev/null
+++ b/server/routes/apis/notificationRoutes.js
@@ -0,0 +1,34 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+var express = require( 'express' );
+var router = express.Router();
+
+
+//import controllers
+const notificationController = require ( '../../controller/notificationController');
+
+
+router.route( '/getNotifications' )
+    //get all notifications
+    .get( async ( req, res ) => {
+        notificationController.getNotifications( req, res );
+    } ); 
+
+router.route( '/deleteNotification' )
+    //deletes notification
+    .delete( async ( req, res ) => {
+        notificationController.deleteNotification( req, res );
+    } );
+
+router.route( '/addNotification' )
+    //get all notifications
+    .post( async ( req, res ) => {
+        notificationController.addNotification( req, res );
+    } );
+    
+module.exports = router;
\ No newline at end of file
diff --git a/server/routes/apis/sharedEntityRoutes.js b/server/routes/apis/sharedEntityRoutes.js
index f05fcfc8..2eb07c20 100644
--- a/server/routes/apis/sharedEntityRoutes.js
+++ b/server/routes/apis/sharedEntityRoutes.js
@@ -23,4 +23,11 @@ router.route( '/copy/' )
     }
     );
 
+
+router.route( '/shareworkspace' )
+    .post( ( req, res ) => {
+        sharedController.sharedWorkspace ( req, res );
+    } 
+    );
+
 module.exports = router;
diff --git a/server/routes/apis/userRoutes.js b/server/routes/apis/userRoutes.js
index 61fab54f..098f24d5 100644
--- a/server/routes/apis/userRoutes.js
+++ b/server/routes/apis/userRoutes.js
@@ -18,11 +18,19 @@ router.route( '/email/:email' )
     }
     );
 
+// Get user data by username
+router.route( '/username/:username' )
+    .get( ( req, res ) => {
+        userController.getUserByUsername( req, res );
+    }
+    );
 
-
-
-
-
+// Get user data by userId
+router.route( '/userId/:userId' )
+    .get( ( req, res ) => {
+        userController.getActiveUserById( req, res );
+    }
+    );
 
 module.exports = router;
 
diff --git a/server/routes/apis/workspaceRoutes.js b/server/routes/apis/workspaceRoutes.js
index 55daddf8..0a4f9a69 100644
--- a/server/routes/apis/workspaceRoutes.js
+++ b/server/routes/apis/workspaceRoutes.js
@@ -6,7 +6,7 @@
  */
 
 var express = require( 'express' );
-var router = express.Router( );
+var router = express.Router();
 
 const bodyParser = require( 'body-parser' );
 router.use( bodyParser.urlencoded( {
@@ -26,19 +26,31 @@ router.route( '/' )
     // get all visible workspaces
     .get( async ( req, res ) => {
         workspaceController.getAllVisibleWorkspaces( req, res );
-    } )    
+    } )
     // save a new workspace
-    .post( async ( req, res ) => { 
+    .post( async ( req, res ) => {
         workspaceController.saveWorkspace( req, res );
     }
     );
+//retrieve all shared workspaces with the user.
+router.route( '/shared' )
+    //get all shared workspaces
+    .get( async ( req, res ) => {
+        workspaceController.getAllSharedWorkspaces( req, res );
+    } );
+
+router.route( '/shared/:workspaceId' )
+    //get all shared workspaces
+    .get( async ( req, res ) => {
+        workspaceController.getSharedWorkspaceByID( req, res );
+    } );
 
 // workspaces /api/v1/auth/workspaces
 router.route( '/:workspaceId' )
     // get a visible workspace by id
     .get( async ( req, res ) => {
         workspaceController.getWorkspaceById( req, res );
-    
+
     } )
     // delete a visible workspace by id
     .delete( async ( req, res ) => {
diff --git a/server/routes/dashboardRoutes.js b/server/routes/dashboardRoutes.js
index 00093ec0..c399f3de 100644
--- a/server/routes/dashboardRoutes.js
+++ b/server/routes/dashboardRoutes.js
@@ -97,8 +97,4 @@ router.route( '/resource' )
     }
     );
 
-
-
-
-
 module.exports = router;
\ No newline at end of file
diff --git a/server/routes/dashboardSharedRoutes.js b/server/routes/dashboardSharedRoutes.js
new file mode 100644
index 00000000..477f4ca4
--- /dev/null
+++ b/server/routes/dashboardSharedRoutes.js
@@ -0,0 +1,57 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+var express = require( 'express' );
+var router = express.Router( );
+
+// dependencies
+//const fs = require( 'fs' );
+//let path = require( 'path' );
+
+// setup json body parser
+const bodyParser = require( 'body-parser' );
+router.use( bodyParser.urlencoded( {
+    extended: true
+} ) );
+router.use( bodyParser.json() );
+
+// controllers
+const dashboardController = require( '../controller/dashboardSharedController' );
+
+/**
+ * Pre Route
+ * Check that the user is logged in (required!)
+ */
+router.use( function ( req, res, next ) {
+    //console.log( "req.query.redirect: " + req.query.redirect );
+    //console.log( "dashboard user: " + req.session.authUser );
+    if( !req.session.authUser ) {
+        
+        //console.log( "auth user invalid" );
+        if( req.query.redirect ) {
+            //console.log( "redirecting to: " + req.query.redirect );
+            res.locals.redirect = req.query.redirect;
+        } 
+
+        res.render( 'user-signup' );
+    }
+    else {
+        next( );
+    }
+} );
+
+/**
+ * Show main dashboard route
+ */
+router.route( '/' )
+    .get( ( req, res ) => {
+        //res.render( 'dashboard-shared/dashboard-shared' );
+        dashboardController.getDashboard( req, res );
+    }
+    );
+
+module.exports = router;
\ No newline at end of file
diff --git a/server/routes/friendsRoutes.js b/server/routes/friendsRoutes.js
new file mode 100644
index 00000000..401e1e73
--- /dev/null
+++ b/server/routes/friendsRoutes.js
@@ -0,0 +1,38 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+var express = require( 'express' );
+var router = express.Router( );
+ 
+// controllers
+const friendsController = require( '../controller/apis/friendController' );
+
+/**
+ * Show friends page
+ */
+router.route( '/' )
+    .get( ( req, res ) => {
+        friendsController.getFriends( req, res );
+    }
+    );
+
+/**
+ * Show add-friends page
+ */
+router.route( '/add-friends' )
+    .get( ( req, res ) => {
+        friendsController.getAddFriends( req, res );
+    } 
+    );
+
+router.route( '/add-friends/:userId' )
+    .post( async ( req, res ) => { 
+        friendsController.sendFriendRequest( req, res );
+    }
+    ); 
+    
+module.exports = router;
\ No newline at end of file
diff --git a/server/routes/pagesRoutes.js b/server/routes/pagesRoutes.js
index ca191f43..016f1b6f 100644
--- a/server/routes/pagesRoutes.js
+++ b/server/routes/pagesRoutes.js
@@ -6,7 +6,7 @@
  */
 
 var express = require( 'express' );
-var router = express.Router( );
+var router = express.Router();
 
 
 
@@ -31,7 +31,7 @@ router.route( '/privacy' )
 router.route( '/tos' )
     .get( ( req, res ) => {
         res.render( './website/terms' );
-    }   
+    }
     );
 
 router.route( '/codebot' )
diff --git a/server/routes/profileRoutes.js b/server/routes/profileRoutes.js
index e047ccea..9ff53a35 100644
--- a/server/routes/profileRoutes.js
+++ b/server/routes/profileRoutes.js
@@ -10,6 +10,7 @@ var router = express.Router( );
  
 // controllers
 const profileController = require( '../controller/profileController' );
+const friendsController = require( '../controller/apis/friendController' );
 
 /**
  * Show user profile
diff --git a/server/routes/sharedDashboardRoutes.js b/server/routes/sharedDashboardRoutes.js
new file mode 100644
index 00000000..8eebda53
--- /dev/null
+++ b/server/routes/sharedDashboardRoutes.js
@@ -0,0 +1,100 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+var express = require( 'express' );
+var router = express.Router( );
+
+// dependencies
+const fs = require( 'fs' );
+let path = require( 'path' );
+
+// setup json body parser
+const bodyParser = require( 'body-parser' );
+router.use( bodyParser.urlencoded( {
+    extended: true
+} ) );
+router.use( bodyParser.json() );
+
+// set up file paths for user profile images
+const UPLOAD_PATH_BASE = path.resolve( __dirname, '..', '../client' );
+const FRONT_END = process.env.FRONT_END_NAME;
+const WORKSPACE_PATH = process.env.WORKSPACE_IMAGE_PATH;
+const RESOURCE_PATH = process.env.RESOURCE_IMAGE_PATH;
+
+// setup fileupload (works with enctype="multipart/form-data" encoding in request)
+const fileUpload = require( "express-fileupload" );
+router.use(
+    fileUpload()
+);
+
+// controllers
+const dashboardController = require( '../controller/dashboardController' );
+const workspaceController = require( '../controller/apis/workspaceController' );
+const resourceController = require( '../controller/apis/resourceController' );
+
+
+/**
+ * Pre Route
+ * Check that the user is logged in (required!)
+ */
+router.use( function ( req, res, next ) {
+    //console.log( "req.query.redirect: " + req.query.redirect );
+    //console.log( "dashboard user: " + req.session.authUser );
+    if( !req.session.authUser ) {
+        
+        //console.log( "auth user invalid" );
+        if( req.query.redirect ) {
+            //console.log( "redirecting to: " + req.query.redirect );
+            res.locals.redirect = req.query.redirect;
+        } 
+
+        res.render( 'user-signup' );
+    }
+    else {
+        next( );
+    }
+} );
+
+/**
+ * Show main dashboard route
+ */
+router.route( '/' )
+    .get( ( req, res ) => {
+        dashboardController.getSharedDashboard( req, res );
+    }
+    );
+
+/** 
+ * Form enctype="multipart/form-data" route using express-fileupload for file upload
+ * 
+ */
+router.route( '/workspace' )
+    .post( async ( req, res ) => {
+
+        // save the workspace
+        await workspaceController.saveWorkspace( req, res, true );
+        
+        res.redirect( 303, '/shared-dashboard' );
+    }
+    );
+
+
+/** 
+ * Form enctype="multipart/form-data" route using express-fileupload for file upload
+ * 
+ */
+router.route( '/resource' )
+    .post( async ( req, res ) => {
+        
+        // save the resource
+        await resourceController.saveResource( req, res, true );
+
+        res.redirect( 303, '/shared-dashboard' );
+    }
+    );
+
+module.exports = router;
\ No newline at end of file
diff --git a/server/routes/topicRoutes.js b/server/routes/topicRoutes.js
index e9f75491..c01b1572 100644
--- a/server/routes/topicRoutes.js
+++ b/server/routes/topicRoutes.js
@@ -11,7 +11,7 @@ var router = express.Router( );
 
 router.route( '/' )
     .get( ( req, res ) => {
-        res.render( 'dashboard/partials/topic/topic-view' );
+        res.render( 'dashboard/partials/topic/share-topic-view' );
     }
     );  
 
diff --git a/server/service/friendService.js b/server/service/friendService.js
new file mode 100644
index 00000000..8add60d0
--- /dev/null
+++ b/server/service/friendService.js
@@ -0,0 +1,244 @@
+/**
+ * Agora - Close the loop
+ * © 2021-2023 Brian Gormanly
+ * BSD 3-Clause License
+ * see included LICENSE or https://opensource.org/licenses/BSD-3-Clause 
+ */
+
+// database connection
+const db = require( '../db/connection' );
+
+// import models
+const notificationService = require( '../service/notificationService' );
+const userService = require( '../../server/service/userService' );
+const { ormFriendship } = require( '../model/friendship' );
+
+//SQL queries
+
+// Get all friends of a user
+exports.getAllFriends = async ( userID ) => {
+    let text = `
+        SELECT 
+            u.first_name AS friend_first_name,
+            u.last_name AS friend_last_name,
+            u.username AS friend_username,
+            u.email AS friend_email,
+            f.friendship_id as friendship_id
+        FROM agora.friendships AS f
+        JOIN agora.users AS u ON u.user_id = CASE
+            WHEN f.initiatedby_id = $1 THEN f.recipient_id
+            ELSE f.initiatedby_id
+        END
+        WHERE (f.initiatedby_id = $1 OR f.recipient_id = $1)
+            AND f.friendship_status = 'accepted'`;
+    let values = [ userID ];
+    let friends = [];
+
+    try {
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
+                friends.push( ormFriendship( res.rows[i] ) );
+            }
+            return friends;
+        }
+        else {
+            return false;
+        }
+    }
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+exports.getUnreadFriendRequestCount = async ( userID ) => {
+    let text = `SELECT COUNT(*) FROM friendships WHERE recipient_id = $1 AND friendship_status = $2`;
+    let values = [ userID, 'pending'];
+
+    try{
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0){
+            return res.rows;
+        }
+        else{
+            return false;
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+};
+
+// Send a friend request
+exports.sendFriendRequest = async ( requesterID, recipientID ) => {
+
+    let text = 'INSERT INTO friendships (initiatedby_id, recipient_id,friendship_status) VALUES ($1, $2, $3);';
+    let values = [ requesterID, recipientID, 'pending' ];
+
+    try {
+        let res = await db.query( text, values );
+
+        if ( res.rows.length > 0 ){
+            let requesterUsername = await userService.getActiveUserById( requesterID );
+            await notificationService.addNotification( recipientID, "You have received a friend request from " + requesterUsername.username );
+            return res.rows[0];
+        }
+        else{
+            return false;
+        }
+    }
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+/*
+// Get a specific friend by ID
+exports.getFriendByID = async ( userID, friendID ) => {
+    let text = `SELECT * 
+    FROM friendships 
+    WHERE (initiatedby_id = $1 AND recipient_id = $2) 
+    OR (initiatedby_id = $2 AND recipient_id = $1)
+    AND status = 'accepted'`;
+    let values = [ userID, friendID ];
+    try{
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0 ){
+            return res.rows[0];
+        }
+        else{
+            return false;
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+    
+};
+*/
+
+// Accept a friend request
+exports.acceptFriendRequest = async ( friendship_id ) => {
+
+    const request = await db.query(
+        `SELECT * FROM friendships WHERE friendship_id = $1`, 
+        [ friendship_id ]
+    );
+
+    if ( request.rows.length > 0 ) {
+        // Insert into friendships table
+        
+        await db.query(
+            `UPDATE friendships
+            SET 
+                friendship_status = 'accepted'
+            WHERE friendship_id = $1`, 
+            [ friendship_id ]
+        );
+
+        return { success: true };
+    }
+    else {
+        return { error: "Friend request not found." };
+    }
+};
+
+// Deny a friend request
+exports.denyFriendRequest = async ( friendship_id ) => {
+
+    const request = await db.query(
+        `SELECT * FROM friendships WHERE friendship_id = $1`, 
+        [ friendship_id ]
+    );
+
+    if ( request.rows.length > 0 ) {
+        await db.query( `DELETE FROM friendships WHERE friendship_id = $1`, 
+            [ friendship_id ]
+        );
+    
+        return { success: true };
+    }
+    else {
+        return { error: "Friend request not found." };
+    }
+};
+
+// Delete a friend by ID
+exports.deleteFriendByID = async ( friendshipId ) => {
+    let text = `DELETE FROM friendships 
+    WHERE friendship_id = $1`;
+    let values = [ friendshipId ];
+
+    try{
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0 ) {
+            return "Friend removed";
+        }
+        else{
+            return "Error: Friend not found";
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+};
+
+// Get details of unaccepted friend requests for a user
+exports.getUnacceptedFriendRequests = async ( userID ) => {
+    let text = `SELECT 
+            f.friendship_id,
+            u.first_name AS friend_first_name,
+            u.last_name AS friend_last_name,
+            u.username AS friend_username,
+            u.email AS friend_email
+        FROM friendships AS f
+        JOIN users AS u ON u.user_id = CASE
+            WHEN f.initiatedby_id = $1 THEN f.recipient_id
+            ELSE f.initiatedby_id
+        END
+        WHERE f.recipient_id = $1 
+            AND f.friendship_status = 'pending'`; // Filter by pending status and recipient ID
+    let values = [ userID ];
+    let requests = [];
+        
+    try {
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
+                requests.push( ormFriendship( res.rows[i] ) );
+            }
+            return requests;
+        }
+        else {
+            return false;
+        }
+    }
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+
+// Get details of unread friend requests for a user
+exports.getUnreadFriendRequests = async ( userID ) => {
+    let text = `SELECT initiatedby_id, recipient_id FROM friendships WHERE recipient_id = $1 OR initiatedby_id = $1 AND friendship_status = 'pending'`;
+    let values = [ userID ];
+    let requests = [];
+    try{
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
+                requests.push( ormFriendship( res.rows[i] ) );
+            }
+            return requests;
+        }
+        else{
+            return false;
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+    
+};
+
diff --git a/server/service/notificationService.js b/server/service/notificationService.js
new file mode 100644
index 00000000..029b35ed
--- /dev/null
+++ b/server/service/notificationService.js
@@ -0,0 +1,61 @@
+const db = require('../db/connection');
+const { createNotification, ormNotification } = require('../model/notification');
+const userService = require( '../service/userService' ); 
+
+
+// Add a new notification
+exports.addNotification = async ( userId, message ) => {
+    let text = `INSERT INTO notifications (user_id, message) 
+                VALUES ($1, $2) RETURNING notification_id`;
+    let values = [ userId, message ];
+    try {
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0){
+            return res.rows[0];
+        }
+        else{
+            return false;
+        }
+    } 
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+exports.deleteNotification = async ( notificationId ) => {
+    let text = "DELETE FROM notifications WHERE notification_id = $1";
+    let values = [ notificationId ];
+    try{
+        let res = await db.query( text, values );
+        if( res.rows.length > 0){
+            return "Notification deleted";
+        }
+        else{
+            return "Notification not found";
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+}
+
+exports.getNotifications = async ( userId ) => {
+    let text = "SELECT * FROM notifications WHERE user_id = $1";
+    let values = [ userId ];
+    let notifications = [ ];
+    try{
+        let res = await db.query( text, values );
+        if( res.rows.length > 0 ){
+            for( i = 0; i < res.rows.length; i++){
+                notifications.push( res.rows[i] );
+            }
+            return notifications;
+        }
+        else{
+            return false;
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+}
\ No newline at end of file
diff --git a/server/service/userService.js b/server/service/userService.js
index 2edafe32..08bd9b92 100644
--- a/server/service/userService.js
+++ b/server/service/userService.js
@@ -316,19 +316,20 @@ exports.getActiveUserById = async function( id ) {
     }
 };
 
-
-
-
 exports.getUserByUsername = async function( username ) {
-    let text = "SELECT * FROM users WHERE LOWER(username) = LOWER($1)";
+    let text = "SELECT * FROM users WHERE LOWER(username) ILIKE $1 || '%'";
     let values = [ username ];
+    let users = [];
     
     try {
          
         let res = await db.query( text, values );
         
         if( res.rows.length > 0 ) {
-            return User.ormUser( res.rows[0] );
+            for ( i = 0; i < res.rows.length; i++ ){
+                users.push( User.ormUser( res.rows[i] ) );
+            }
+            return users;
         }
         else {
             return false;
diff --git a/server/service/workspaceService.js b/server/service/workspaceService.js
index 496a6a37..80951efd 100644
--- a/server/service/workspaceService.js
+++ b/server/service/workspaceService.js
@@ -26,27 +26,27 @@ const Event = require( '../model/event' );
  */
 exports.getAllVisibleWorkspaces = async ( ownerId ) => {
 
-    if( ownerId ) {
+    if ( ownerId ) {
 
         //const text = "select * from workspaces where owned_by = $1 AND active = $2 AND (visibility = $3 OR visibility = $4) ORDER BY id"; ??
         const text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces where active = $2 group by workspace_id) goalmax on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version and (gl.owned_by = $1 OR gl.visibility = 'public' ) order by gl.workspace_id;";
         const values = [ ownerId, true ];
 
         let workspaces = [];
-        
+
         try {
-            
+
             let res = await db.query( text, values );
-            
 
-            for( let i=0; i<res.rows.length; i++ ) {
+
+            for ( let i = 0; i < res.rows.length; i++ ) {
                 workspaces.push( Workspace.ormWorkspace( res.rows[i] ) );
             }
 
             return workspaces;
-            
+
         }
-        catch( e ) {
+        catch ( e ) {
             console.log( "[ERR]: Error getting visible workspaces - " + e );
             return false;
         }
@@ -57,53 +57,173 @@ exports.getAllVisibleWorkspaces = async ( ownerId ) => {
     }
 };
 
-/**
- * Returns all active workspaces including topics associated, that are either
- * public, owned by the requestor, or shared with the requesting user.
- * Retrvievs all workspaces
- * TODO: sharing is not implemented yet so currently this function will return 
- * all user workspaces and other public ones.
- * @returns List<workspace> with topics
- */
+exports.getSharedWorkspaces = async ( sharedUserID ) => {
+    if ( sharedUserID ) {
+        /*
+        let text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces group by workspace_id) goalmax "
+            + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version INNER JOIN shared_entities shared ON gl.owned_by = shared_by_user_id WHERE shared.shared_with_user_id = $1" 
+            + "order by gl.workspace_id;";
+        */
+        let text = `SELECT w.* FROM agora.shared_entities AS se 
+            JOIN agora.workspaces AS w ON se.entity_id = w.workspace_id 
+            WHERE se.shared_with_user_id = $1 AND se.entity_type = 'workspace'`;
+
+        const values = [ sharedUserID ];
+        let workspaces = [];
+        //console.log( sharedUserID );
+
+        try {
+
+            let res = await db.query( text, values );
+
+
+            for ( let i = 0; i < res.rows.length; i++ ) {
+                workspaces.push( Workspace.ormWorkspace( res.rows[i] ) );
+            }
+
+            return workspaces;
+
+        }
+        catch ( e ) {
+            console.log( "[ERR]: Error getting shared workspaces - " + e );
+            return false;
+        }
+    }
+    else {
+        return false;
+    }
+};
+
+
+
+
+// Get shared workspace details by its ID
+exports.getSharedWorkspaceByID = async ( workspaceID ) => {
+    console.log( "Getting Shared Workspace query.." );
+    let text = `SELECT w.* FROM agora.shared_entities AS se 
+                  JOIN agora.workspaces AS w ON se.entity_id = w.workspace_id 
+                  WHERE se.entity_id = $1 AND se.entity_type = 'workspace'`;
+    let values = [ workspaceID ];
+    console.log( workspaceID );
+    
+    try {
+        
+        let workspace = null;
+        //console.log( " text: " + text + " values: " + values );
+        let res = await db.query( text, values );
+        //console.log( " res.rowCount: " + res.rowCount + "" );
+        if ( res.rowCount > 0 ) {
+            text = "select * from workspace_paths where active = $1 and workspace_rid = $2 order by position;";
+            values = [ true, res.rows[0].workspace_rid ];
+            let topics = [];
+            let res2 = await db.query( text, values );
+
+            for ( let j = 0; j < res2.rowCount; j++ ) {
+                text = "select * from topics where active = $1 and topic_id = $2;";
+                values = [ true, res2.rows[j].topic_id ];
+
+                let res3 = await db.query( text, values );
+                if ( res3.rowCount > 0 ) {
+                    topics.push( Topic.ormTopic( res3.rows[0] ) );
+                }
+
+            }
+            workspace = Workspace.ormWorkspace( res.rows[0] );
+            workspace.topics = topics;
+
+        }
+        console.log( workspace );
+        return workspace;
+
+    }
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+
+
+
+
+
+exports.removeSharedWorkspaceByID = async ( workspaceID ) => {
+    const text = `DELETE FROM agora.shared_entities 
+                  WHERE entity_id = $1 AND entity_type = 'workspace'`;
+    const values = [ workspaceID ];
+    
+    try {
+        const res = await db.query( text, values );
+        return ( res.rowCount > 0 ) ? { success: true } : { error: "Shared workspace not found." };
+    }
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+
+exports.shareWorkspaceByID = async ( workspaceID, sharedByUserID, sharedWithUserID, permissionLevel, canCopy ) => {
+    const text = `INSERT INTO agora.shared_entities (entity_id, entity_type, shared_by_user_id, shared_with_user_id, permission_level, can_copy) 
+                  VALUES ($1, 'workspace', $2, $3, $4, $5)
+                  RETURNING shared_entity_id`;
+    const values = [ workspaceID, sharedByUserID, sharedWithUserID, permissionLevel, canCopy ];
+    
+    try {
+        const res = await db.query( text, values );
+        if ( res.rows.length > 0 ) {
+            return res.rows[0];
+        }
+        else {
+            return false;
+        }
+    }
+    catch ( e ) {
+        console.log( e.stack );
+    }
+};
+
+
+
+
+
 exports.getAllVisibleWorkspacesWithTopics = async ( ownerId ) => {
 
-    if( ownerId ) {
+    if ( ownerId ) {
 
         let text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces where active = $1 group by workspace_id) goalmax on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version and (gl.owned_by = $2 OR gl.visibility = 'public' ) order by gl.workspace_id;";
         let values = [ true, ownerId ];
 
         let workspaces = [];
-        
+
         try {
-            
+
             let res = await db.query( text, values );
-            for( let i=0; i<res.rows.length; i++ ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
                 text = "select * from workspace_paths where active = $1 and workspace_rid = $2 order by position;";
                 values = [ true, res.rows[i].workspace_rid ];
                 let topics = [];
                 let res2 = await db.query( text, values );
 
-                for( let j=0; j<res2.rowCount; j++ ) {
+                for ( let j = 0; j < res2.rowCount; j++ ) {
                     text = "select * from topics where active = $1 and topic_id = $2;";
                     values = [ true, res2.rows[j].topic_id ];
 
                     let res3 = await db.query( text, values );
-                    if( res3.rows[0] ) {
+                    if ( res3.rows[0] ) {
                         topics.push( Topic.ormTopic( res3.rows[0] ) );
                     }
-                    
+
                 }
                 let workspace = Workspace.ormWorkspace( res.rows[i] );
                 workspace.topics = topics;
-                
+
                 workspaces.push( workspace );
             }
 
-            
+
             return workspaces;
-            
+
         }
-        catch( e ) {
+        catch ( e ) {
             console.log( "[ERR]: Error getting visible workspaces with topics - " + e );
             return false;
         }
@@ -111,7 +231,7 @@ exports.getAllVisibleWorkspacesWithTopics = async ( ownerId ) => {
     else {
         return false;
     }
-    
+
 };
 
 /**
@@ -124,33 +244,33 @@ exports.getAllWorkspacesForOwner = async ( ownerId, isActive ) => {
 
     let text = "";
     let values = [];
-    if( !isActive ) {
+    if ( !isActive ) {
         text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces group by workspace_id) goalmax "
-        + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version and gl.owned_by = $1 order by gl.workspace_id;";
+            + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version and gl.owned_by = $1 order by gl.workspace_id;";
         values = [ ownerId ];
     }
     else {
         // default to only retreiving active topics
         text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces where active = $1 group by workspace_id) goalmax "
-        + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version and gl.owned_by = $2 order by gl.workspace_id;";
+            + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version and gl.owned_by = $2 order by gl.workspace_id;";
         values = [ true, ownerId ];
     }
 
     let workspaces = [];
-    
+
     try {
-         
+
         let res = await db.query( text, values );
-        
 
-        for( let i=0; i<res.rows.length; i++ ) {
+
+        for ( let i = 0; i < res.rows.length; i++ ) {
             workspaces.push( Workspace.ormWorkspace( res.rows[i] ) );
         }
 
         return workspaces;
-        
+
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: Error getting all workspaces for owner - " + e );
         return false;
     }
@@ -165,18 +285,18 @@ exports.getAllWorkspacesForOwner = async ( ownerId, isActive ) => {
  * @returns workspace with topics
  */
 exports.getActiveWorkspaceWithTopicsById = async ( workspaceId, ownerId, isActive ) => {
-
+    console.log( "Getting Workspaces...." );
     let text = "";
     let values = [];
-    if( !isActive ) {
+    if ( !isActive ) {
         text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces where workspace_id = $1 AND (owned_by = $2 OR visibility = 'public') group by workspace_id) goalmax "
-        + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version order by gl.workspace_id;";
+            + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version order by gl.workspace_id;";
         values = [ workspaceId, ownerId ];
     }
     else {
         // default to only retreiving active topics
         text = "select * from workspaces gl INNER JOIN (SELECT workspace_id, MAX(workspace_version) AS max_version FROM workspaces where active = $1 AND workspace_id = $2 AND (owned_by = $3 OR visibility = 'public') group by workspace_id) goalmax "
-        + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version order by gl.workspace_id;";
+            + "on gl.workspace_id = goalmax.workspace_id AND gl.workspace_version = goalmax.max_version order by gl.workspace_id;";
         values = [ true, workspaceId, ownerId ];
     }
 
@@ -186,31 +306,31 @@ exports.getActiveWorkspaceWithTopicsById = async ( workspaceId, ownerId, isActiv
         //console.log( " text: " + text + " values: " + values );
         let res = await db.query( text, values );
         //console.log( " res.rowCount: " + res.rowCount + "" );
-        if( res.rowCount > 0 ) {
+        if ( res.rowCount > 0 ) {
             text = "select * from workspace_paths where active = $1 and workspace_rid = $2 order by position;";
             values = [ true, res.rows[0].workspace_rid ];
             let topics = [];
             let res2 = await db.query( text, values );
 
-            for( let j=0; j<res2.rowCount; j++ ) {
+            for ( let j = 0; j < res2.rowCount; j++ ) {
                 text = "select * from topics where active = $1 and topic_id = $2;";
                 values = [ true, res2.rows[j].topic_id ];
 
                 let res3 = await db.query( text, values );
-                if( res3.rowCount > 0 ) {
+                if ( res3.rowCount > 0 ) {
                     topics.push( Topic.ormTopic( res3.rows[0] ) );
                 }
-                
+
             }
             workspace = Workspace.ormWorkspace( res.rows[0] );
             workspace.topics = topics;
-               
+
         }
 
         return workspace;
-        
+
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: Error getting active workspaces with topics by id - " + e );
         return false;
     }
@@ -227,16 +347,16 @@ exports.getMostRecentWorkspaceById = async ( workspaceId ) => {
     let values = [ workspaceId ];
     try {
         let workspace = "";
-         
+
         let res = await db.query( text, values );
-        if( res.rowCount > 0 ) {
+        if ( res.rowCount > 0 ) {
             workspace = Workspace.ormWorkspace( res.rows[0] );
-                  
+
         }
         return workspace;
-        
+
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: getting most recent workspace by Id - " + e );
         return false;
     }
@@ -248,22 +368,22 @@ exports.getMostRecentWorkspaceById = async ( workspaceId ) => {
  * @returns workspace
  */
 exports.getWorkspaceById = async ( workspaceId ) => {
-   
+
     let text = "select * from workspaces WHERE workspace_id = $1;";
     let values = [ workspaceId ];
     try {
         let workspace = "";
-         
+
         let res = await db.query( text, values );
-        if( res.rowCount > 0 ) {
+        if ( res.rowCount > 0 ) {
             workspace = Workspace.ormWorkspace( res.rows[0] );
-                  
+
         }
-       
+
         return workspace;
-        
+
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: Error getting workspace by Id - " + e );
         return false;
     }
@@ -280,7 +400,7 @@ exports.updateWorkspaceImage = async ( workspaceId, filename ) => {
     // save the current filename so that we can delete it after.
     let prevFileName = "";
 
-    if( workspace ) {
+    if ( workspace ) {
         try {
             // retrieve the current filename so that we can delete it after.
             let text = "SELECT workspace_image FROM workspaces WHERE workspace_rid = $1";
@@ -288,9 +408,9 @@ exports.updateWorkspaceImage = async ( workspaceId, filename ) => {
 
             // perform the query
             let res = await db.query( text, values );
-            
+
             // set the prevFileName with the prev name
-            if( res.rows.length > 0 ) {
+            if ( res.rows.length > 0 ) {
                 prevFileName = res.rows[0].workspace_image;
             }
 
@@ -300,9 +420,9 @@ exports.updateWorkspaceImage = async ( workspaceId, filename ) => {
 
             // perform query
             await db.query( text, values );
-            
+
         }
-        catch( e ) {
+        catch ( e ) {
             console.log( "[ERR]: Error updating workspace image - " + e );
             return false;
         }
@@ -323,23 +443,23 @@ exports.updateWorkspaceImage = async ( workspaceId, filename ) => {
 exports.saveWorkspace = async ( workspace ) => {
     // check to see if an id exists - insert / update check
     //console.log( "about to save workspace " + JSON.stringify( workspace ) );
-    if( workspace ) {
+    if ( workspace ) {
         // query to see if the workspace exists
         let text = "SELECT * FROM workspaces WHERE workspace_id = $1";
         let values = [ workspace.workspaceId ];
         try {
             let res = await db.query( text, values );
-            if( res.rowCount > 0 ) {
+            if ( res.rowCount > 0 ) {
                 // row exists, update
                 //console.log( "[workspaceController.saveWorkspace]: Updating Workspace in DB - " + JSON.stringify( workspace ) + " id : " + workspace.workspaceId );
                 text = "UPDATE workspaces SET workspace_version = $1, workspace_name = $2, workspace_description = $3, active = $4, completable = $5, owned_by = $6, visibility = $7 WHERE workspace_id = $8 RETURNING workspace_rid;";
                 values = [ workspace.workspaceVersion, workspace.workspaceName, workspace.workspaceDescription, workspace.active, workspace.completable, workspace.ownedBy, workspace.visibility, workspace.workspaceId ];
-    
+
                 try {
                     res = await db.query( text, values );
                     workspace.workspaceRid = res.rows[0].workspace_rid;
                 }
-                catch( e ) {
+                catch ( e ) {
                     console.log( "[ERR]: Error updating workspace - " + e );
                     return false;
                 }
@@ -348,28 +468,28 @@ exports.saveWorkspace = async ( workspace ) => {
                 // row does not exist, insert
                 text = "INSERT INTO workspaces (workspace_id, workspace_version, workspace_name, workspace_description, active, completable, owned_by, visibility) VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING workspace_id, workspace_rid;";
                 values = [ workspace.workspaceId, workspace.workspaceVersion, workspace.workspaceName, workspace.workspaceDescription, workspace.active, workspace.completable, workspace.ownedBy, workspace.visibility ];
-            
+
                 try {
                     res = await db.query( text, values );
                 }
-                catch( e ) {
+                catch ( e ) {
                     console.log( "[ERR]: Error inserting workspace - " + e );
                     return false;
                 }
 
-                if( res.rowCount > 0 ) {
+                if ( res.rowCount > 0 ) {
                     workspace.workspaceId = res.rows[0].workspace_id;
                     workspace.workspaceRid = res.rows[0].workspace_rid;
                 }
             }
 
         }
-        catch( e ) {
+        catch ( e ) {
             console.log( "[ERR]: Error querying to determine if workspace exists - " + e );
             return false;
         }
 
-        
+
         return workspace;
     }
     else {
@@ -385,16 +505,16 @@ exports.saveWorkspace = async ( workspace ) => {
  * @param {Integer} workspaceRid id of the topic 
  * @param {*} topicIds Array of topic id's to be associated with the woorkspace
  * @returns true for success / false for failure
- */                                               
-exports.saveTopicsForWorkspace = async function( workspaceRid, topicIds, topicsRequired ) {
+ */
+exports.saveTopicsForWorkspace = async function ( workspaceRid, topicIds, topicsRequired ) {
     // get the most recent version of the workspace
     let text = "SELECT * from workspaces where workspace_rid = $1";
     let values = [ workspaceRid ];
     try {
-         
+
         let res = await db.query( text, values );
-        
-        if( res.rowCount > 0 ) {
+
+        if ( res.rowCount > 0 ) {
 
             // first remove current resources associated with the topic
             text = "DELETE FROM workspace_paths WHERE workspace_rid = $1";
@@ -408,8 +528,8 @@ exports.saveTopicsForWorkspace = async function( workspaceRid, topicIds, topicsR
                  * TODO: is_required needs to be passed in from the UI so we are just making everything required for now.  
                  * This probably means having the pathway be an array of objects containing id and isRequired
                  */
-                if( topicIds && topicIds.length > 0 ) {
-                    for( let i=0; i < topicIds.length; i++ ) {  
+                if ( topicIds && topicIds.length > 0 ) {
+                    for ( let i = 0; i < topicIds.length; i++ ) {
 
                         let isRequired = true;
                         // always setting to true for now
@@ -420,25 +540,25 @@ exports.saveTopicsForWorkspace = async function( workspaceRid, topicIds, topicsR
                         text = "INSERT INTO workspace_paths (workspace_rid, topic_id, position, is_required, active) VALUES ($1, $2, $3, $4, $5);";
                         values = [ workspaceRid, topicIds[i], ( i + 1 ), true, true ];
 
-                        try{
+                        try {
                             let res3 = await db.query( text, values );
 
                         }
-                        catch( e ) {
+                        catch ( e ) {
                             console.log( "[ERR]: Error inserting workspace_path - " + e );
                             return false;
                         }
                     }
                 }
             }
-            catch( e ) {
+            catch ( e ) {
                 console.log( "[ERR]: Error deleting workspace paths - " + e );
                 return false;
             }
-            
+
         }
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: Error looking up workspace by id - " + e );
         return false;
     }
@@ -461,10 +581,10 @@ exports.savePathwayToMostRecentWorkspaceVersion = async ( workspaceId, pathway )
     let values = [ workspaceId ];
 
     try {
-         
+
         let res = await db.query( text, values );
-        
-        if( res.rowCount > 0 ) {
+
+        if ( res.rowCount > 0 ) {
             /**
              * TODO: the idea behind the workspace version was to keep track of changes to the pathway and not 
              * just delete it and replace it.  This way if students finished a workspace under with a particular 
@@ -483,8 +603,8 @@ exports.savePathwayToMostRecentWorkspaceVersion = async ( workspaceId, pathway )
              * TODO: is_required needs to be passed in from the UI so we are just making everything required for now.  
              * This probably means having the pathway be an array of objects containing id and isRequired
              */
-            if( pathway && pathway.length > 0 ) {
-                for( let i=0; i < pathway.length; i++ ) {
+            if ( pathway && pathway.length > 0 ) {
+                for ( let i = 0; i < pathway.length; i++ ) {
                     text = "INSERT INTO workspace_paths (workspace_rid, topic_id, position, is_required, active) VALUES ($1, $2, $3, $4, $5);";
                     values = [ res.rows[0].workspace_rid, pathway[i], ( i + 1 ), true, true ];
 
@@ -493,7 +613,7 @@ exports.savePathwayToMostRecentWorkspaceVersion = async ( workspaceId, pathway )
             }
         }
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - save path to most recent version - " + e );
         return false;
     }
@@ -515,15 +635,15 @@ exports.saveWorkspaceEnrollmentMostRecentWorkspaceVersion = async ( userId, work
     let values = [ workspaceId ];
 
     try {
-         
+
         let res = await db.query( text, values );
-        
-        if( res.rowCount > 0 ) {
+
+        if ( res.rowCount > 0 ) {
             return exports.saveWorkspaceEnrollment( userId, workspaceId, res.rows[0].version );
-            
+
         }
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - save workspace enrollment most recent version - " + e );
         return false;
     }
@@ -541,24 +661,24 @@ exports.saveWorkspaceEnrollment = async ( userId, workspaceRid ) => {
     let values = [ true, userId, workspaceRid ];
 
     try {
-         
+
         let response = await db.query( text, values );
 
-        if( !response.rowCount > 0 ) {       
+        if ( !response.rowCount > 0 ) {
             text = 'INSERT INTO user_workspaces (workspace_rid, user_id, active, is_completed)'
                 + 'VALUES($1, $2, $3, $4)';
             values = [ workspaceRid, userId, true, false ];
 
             let response = await db.query( text, values );
-    
+
         }
         else {
             console.log( "Duplicate user_workspace not saved!!" );
         }
-        
+
         return true;
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - save workspace enrollment - " + e );
         return false;
     }
@@ -578,7 +698,7 @@ exports.completeWorkspaceEnrollment = async ( userId, workspaceRid ) => {
         let response = await db.query( text, values );
         return true;
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: Error updating workspace enrollment - " + e );
         return false;
     }
@@ -594,31 +714,31 @@ exports.getEnrolledWorkspaceByUserAndWorkspaceRid = async ( userId, workspaceRid
     console.log( "params: userId " + userId + " workspaceRid: " + workspaceRid );
     let text = "SELECT ug.* FROM user_workspaces ug where ug.user_id = $1 AND ug.workspace_rid = $2 and active = $3;";
     let values = [ userId, workspaceRid, true ];
-    
+
     let workspace;
     try {
-         
+
         let res = await db.query( text, values );
-        if( res.rows.length > 0 ) {
-            for( let i=0; i<res.rows.length; i++ ) {
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
                 // get the workspace for each user_workspace
                 text = "SELECT * FROM workspaces WHERE active = $1 AND workspace_rid = $2;";
                 values = [ true, res.rows[i].workspace_rid ];
 
                 let res2 = await db.query( text, values );
 
-                if( res2.rows.length > 0 ) {
+                if ( res2.rows.length > 0 ) {
                     workspace = Workspace.ormWorkspace( res2.rows[0] );
-                }     
+                }
             }
 
         }
         else {
             return false;
         }
-        return workspace ;
+        return workspace;
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - get enrolled workspace by user and workspace rid - " + e );
         return false;
     }
@@ -698,13 +818,13 @@ exports.getActiveEnrollmentsForUserId = async ( userId ) => {
     // note this is historical, upon testing I realized that implementing this code meant that completed workspaces were not showing up in users profiles and in feeds
     // so the approach taken was to have all active / inactive workspaces returned if the user has been enrolled and use workspace.active to filter in the views where showing
     // the workspace is not desirable 
-    
+
     let enrollments = [];
     try {
-         
+
         let res = await db.query( text, values );
-        if( res.rows.length > 0 ) {
-            for( let i=0; i<res.rows.length; i++ ) {
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
                 let enrollment = WorkspaceEnrollment.ormWorkspaceEnrollment( res.rows[i] );
 
                 // get the workspace for each user_workspace
@@ -713,10 +833,10 @@ exports.getActiveEnrollmentsForUserId = async ( userId ) => {
 
                 let res2 = await db.query( text, values );
 
-                if( res2.rows.length > 0 ) {
+                if ( res2.rows.length > 0 ) {
                     enrollment.workspace = Workspace.ormWorkspace( res2.rows[0] );
-                } 
-                
+                }
+
                 enrollments.push( enrollment );
             }
 
@@ -726,7 +846,7 @@ exports.getActiveEnrollmentsForUserId = async ( userId ) => {
         }
         return enrollments;
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - get active enrollment for user Id - " + e );
         return false;
     }
@@ -737,14 +857,14 @@ exports.getRecentWorkspaceEnrollmentEvents = async ( limit ) => {
     limit = ( !limit ) ? 10 : limit;
     let text = "select ud.user_id as user_id, ud.username as username, ud.profile_filename as user_image, mod.workspace_rid as workspace_id, mod.workspace_name as workspace_name, mod.workspace_image as workspace_image, mode.create_time as create_time from users ud, workspaces mod, user_workspaces mode where mode.user_id = ud.user_id AND mode.workspace_rid = mod.workspace_rid and mode.active = true ORDER BY mode.create_time desc LIMIT $1;";
     let values = [ limit ];
-    
+
     try {
-        
+
         let res = await db.query( text, values );
-        
+
         let enrollmentEvents = [];
-        if( res.rows.length > 0 ) {
-            for( let i=0; i<res.rows.length; i++ ) {
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
                 let event = Event.emptyEvent();
                 event.eventUserId = res.rows[i].user_id;
                 event.eventItemId = res.rows[i].workspace_rid;
@@ -763,10 +883,10 @@ exports.getRecentWorkspaceEnrollmentEvents = async ( limit ) => {
         }
         return enrollmentEvents;
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - get recent workspace enrollment events - " + e );
         return false;
-    }  
+    }
 };
 
 exports.deleteWorkspaceById = async ( workspaceId, ownerId ) => {
@@ -775,7 +895,7 @@ exports.deleteWorkspaceById = async ( workspaceId, ownerId ) => {
 
     try {
         let res = await db.query( text, values );
-        if( res.rowCount > 0 ) {
+        if ( res.rowCount > 0 ) {
             return true;
         }
         else {
@@ -792,14 +912,14 @@ exports.getRecentWorkspaceCompletionEvents = async ( limit ) => {
     limit = ( !limit ) ? 10 : limit;
     let text = "select ud.user_id as user_id, ud.username as username, ud.profile_filename as user_image, mod.workspace_rid as workspace_rid, mod.workspace_name as workspace_name, mod.workspace_image as workspace_image, mode.completed_date as completed_date from users ud, workspaces mod, user_workspaces mode where mode.user_id = ud.user_id AND mode.workspace_rid = mod.workspace_rid and mode.active = true AND mode.is_completed = true ORDER BY mode.completed_date desc LIMIT $1;";
     let values = [ limit ];
-    
+
     try {
-        
+
         let res = await db.query( text, values );
-        
+
         let enrollmentEvents = [];
-        if( res.rows.length > 0 ) {
-            for( let i=0; i<res.rows.length; i++ ) {
+        if ( res.rows.length > 0 ) {
+            for ( let i = 0; i < res.rows.length; i++ ) {
                 let event = Event.emptyEvent();
                 event.eventUserId = res.rows[i].user_id;
                 event.eventItemId = res.rows[i].workspace_rid;
@@ -818,10 +938,10 @@ exports.getRecentWorkspaceCompletionEvents = async ( limit ) => {
         }
         return enrollmentEvents;
     }
-    catch( e ) {
+    catch ( e ) {
         console.log( "[ERR]: [workspace] - get recent workspace completion events - " + e );
         return false;
-    }  
+    }
 };
 // Takes in a workspaceId and finds each topicId associated with it.
 exports.getAllTopicsIdsForWorkspace = async function ( workspaceRid ) {
@@ -835,8 +955,8 @@ exports.getAllTopicsIdsForWorkspace = async function ( workspaceRid ) {
         let res = await db.query( text, values );
 
         // console.log( " RESPONSE : " + JSON.stringify( res ) );
-        if ( res.rowCount > 0 ){
-            for ( let i=0; i<res.rowCount; i++ ){
+        if ( res.rowCount > 0 ) {
+            for ( let i = 0; i < res.rowCount; i++ ) {
                 topicIds[i] = res.rows[i].topic_id;
             }
         }
@@ -848,5 +968,5 @@ exports.getAllTopicsIdsForWorkspace = async function ( workspaceRid ) {
     }
 
     return topicIds;
-       
+
 };
\ No newline at end of file