diff --git a/client/src/App.css b/client/src/App.css
index 1ce0c782..12837ea8 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,5 +1,5 @@
 /* App.css */
-/* Define a CSS variable for red color */
+/* Root CSS */
 :root {
   /* --main-red-color: rgb(227, 55, 55); */
   --main-red-color: rgb(210, 31, 60) !important;
@@ -7,6 +7,31 @@
   --main-cardBackground-color: #D8E9FD !important
 }
 
+.home-root {
+  background-color: rgb(250, 249, 246);
+  min-height: 100%;
+  margin-top: auto;
+  /* padding-bottom: 3;
+  padding-top: 3; */
+  margin-left: auto;
+  min-width: 275;
+}
+
+.outlet-root {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  width: 100%;
+  flex-direction: column;
+}
+
+/* ---------------------------------------------------------------------------------------------------- */
+/* Background color */
+.home-colorBackground {
+  background-color: rgb(186, 209, 234);
+}
+
+/* ---------------------------------------------------------------------------------------------------- */
 /* image CSS */
 .centered-image {
   display: block;
@@ -14,26 +39,79 @@
   margin-right: auto;
 }
 
-
 .inline-content img {
   margin-right: 10px; /* Space between image and text */
 }
 
-.loading-icon {
-  display: inline-block;
-  animation: spin 1s linear infinite;
-  width: 50px;
-  height: 50px;
-  background: transparent;
+.member-image {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  /* by changing margin 35px (to < 38px) below you control how many team members cards will fitt in one row */
+  margin: 5px;
+}
+
+.aboutimg {
+  width: 100%;
+  height: auto;
+  border: 1px solid #f3f0f0;
+  margin: 10px 0;
+}
+
+/* ---------------------------------------------------------------------------------------------------- */
+/* Content Style */
+.outlet-main-content {
+  text-align: center;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.outlet-content {
+  flex: 1 1 auto;
+  overflow: auto;
 }
 
-/* content/text CSS */
 .inline-content {
   display: flex;
   align-items: center; /* Align items vertically center */
 }
-/* About page- BCOnexus.js CSS Components */
 
+.object-contents {
+  flex:auto;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  width: fit-content;
+}
+
+.about-text {
+  font-family:"lato", sans-serif !important;
+  font-size: x-large !important;
+  margin: left 80px !important;
+  /* color: red; */
+}
+
+.home-intro-title {
+  font-size: 28px !important;
+  font-weight: bold !important;
+  text-align: center !important;
+}
+
+.Account-Servers-title {
+  font-size: 37px;
+}
+
+.bold-title {
+  font-weight: bold;
+}
+
+.resources-citation {
+  text-align: left;
+}
+
+/* ---------------------------------------------------------------------------------------------------- */
+/* Page box components */
 .About-half-width-box{
   min-height: 650px; /* Ensure both boxes have a minimum height */
   min-width: 350px;/* min-width: 275px; Ensure both boxes have a minimum width */
@@ -48,10 +126,6 @@
   padding: 16px;
 }
 
-.centered-title {
-  text-align: center;
-}
-
 .About-Full-Width-Box{
   width: 100%;
   min-width: 275px; 
@@ -66,130 +140,18 @@
   margin-top: 20px;
 } 
 
-.about-text {
-  font-family:"lato", sans-serif !important;
-  font-size: x-large !important;
-  margin: left 80px !important;
-  /* color: red; */
-}
-
-.About-bullet {
-  /* display: "inline-block";
-  margin: "0 2px";
-  transform: "scale(0.8)";
-
-  font: 26px; */
-
-  color: black;
-  font-size: 22px !important;
-  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
-  margin: 10px 2px !important;
-  display: inline-block !important;
-  vertical-align: middle !important;
-}
-
-.About-linkCard {
-  min-height: 300px;
-  min-width: 275px;
-  text-align: center;
-  background-color:var(--main-cardBackground-color)
-}
-.About-title {
-  font-size: 33px !important;
-  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
-  margin: 10px 2px !important;
-  font-weight: bold !important;
-}
-
-.About-centerCard {
-  min-width: 275 !important;
-  text-align: center !important;
-}
-
-
-/* about pages */
-.about-main {
-  margin-top: 3%;
-  margin-left: 20%;
-  margin-right: 20%;
-  margin-bottom: 2%;
-}
-
-.member-image {
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
-  border: 2px solid #ccc;
-  /* by changing margin 35px (to < 38px) below you control how many team members cards will fitt in one row */
-  margin: 5px;
-}
-
-.member {
-  text-align: center;
-  vertical-align: middle;
-  /* padding-bottom: 10px; */
-  padding-top: 20px;
-  flex-basis: calc(25% - 30px);
-  margin: 0 15px 30px;
-}
-
-.gg-align-center {
-  justify-content: center !important;
-  text-align: center !important;
-}
-
-.content-box-md {
-  padding: 40px 0;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 0 -15px;
-}
-
-.aboutimg {
-  width: 100%;
-  height: auto;
-  border: 1px solid #f3f0f0;
-  margin: 10px 0;
-}
-
-.card-medium {
+.outlet-container {
   display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 0 -15px;
-}
-
-.nav-link {
-  input {color: white};
-  text-decoration: none;
-  color: white;
-  background-color: primary;
-}
-
-.hover-background {
-  color: inherit;
-  transition: background-color 0.3s ease;
-}
-
-.white-icon {
-  color: white;
-}
-
-.hover-background:hover {
-  background-color: inherit; /* Change to the desired background color on hover */
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding-top: 75px;
 }
 
-/*----------------------------------------------------------------------------------------------*/
-/* Account page- Servers.js CSS Components */
-
-.Account-Servers-bullet {
-  display: inline-block;
-  margin: 0 2px;
-  transform: scale(0.8);
+.home-linkcard {
+  min-height: 350px;
+  min-width: 275;
+  text-align: center;
+  margin-top: 5;
 }
 
 .Account-Servers-server-card {
@@ -202,19 +164,16 @@
   margin-left: 12px;
 }
 
-.Account-Servers-heightened {
-  min-height: 250px;
-}
-
-.Account-Servers-title {
-  font-size: 37px;
+.large_textfield {
+  border-style: inherit;
+  width: max-content;
+  grid-auto-rows: auto;
 }
 
-.Account-Servers-pos {
-  margin-bottom: 12px;
+.required-field {
+  color: var(--main-red-color) !important;
 }
 
-
 .custom-container {
   margin: 5%;
   padding-top: 0; /* Ensure the container starts at the top of the page */
@@ -225,44 +184,61 @@
   display: block;  /* Allows the table container to respect the width constraints */
 }
 
-/* Outlet styles */
-.outlet-root {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  width: 100%;
-  flex-direction: column;
+.object-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+  overflow: none;
+  height: 600px;
 }
 
-.outlet-container {
-  display: flex;
-  flex: 1 1 auto;
-  overflow: hidden;
-  padding-top: 75px;
+/* ---------------------------------------------------------------------------------------------------- */
+/* Page margin layout */
+.about-main {
+  margin-top: 3%;
+  margin-left: 20%;
+  margin-right: 20%;
+  margin-bottom: 2%;
 }
 
-.outlet-main-content {
-  text-align: center;
-  flex: 1 1 auto;
-  overflow: auto;
+.home-margintop{
+  margin-top: 50px;
 }
 
-.outlet-content {
-  flex: 1 1 auto;
-  overflow: auto;
+.object-domain {
+  margin-bottom: 35px;
+}
+
+/* Paddings */
+.table-card {
+  padding: 2%;
+}
+
+/* ---------------------------------------------------------------------------------------------------- */
+/* Navigation Bar CSS */
+.nav-link {
+  input {color: white};
+  text-decoration: none;
+  color: white;
+  background-color: primary;
+}
+
+.hover-background {
+  color: inherit;
+  transition: background-color 0.3s ease;
 }
 
-/* NavBar styles */
 .grow {
   flex-grow: 1;
 }
+
 .image-container {
   max-width: 100%;
   height: auto;
   img {
     width: "2em";
   }
-}
+} /* Specificlly for Nav Bar imag */
+
 .section-desktop {
   display: none;
   @media (min-width: 600px) {
@@ -276,149 +252,27 @@
   }
 }
 
-/* Object Styles */
-.object-sidebar {
-  width: 250px;
-  flex-shrink: 0;
-  overflow: none;
-  height: 600px;
-}
-
-.object-contents {
-  flex:auto;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  width: fit-content;
-}
-
-.button-confirm {
-  color: blue;
-}
-
-.select-box {
-  min-width: 250px;
-  justify-content: center;
-}
-
-.object-buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center; 
-}
-
-.object-domain {
-  margin-bottom: 35px;
-}
-
-/* Homepage Styles */
-.home-root {
-  background-color: rgb(250, 249, 246);
-  min-height: 100%;
-  margin-top: auto;
-  /* padding-bottom: 3;
-  padding-top: 3; */
-  margin-left: auto;
-  min-width: 275;
+/* ---------------------------------------------------------------------------------------------------- */
+/* Icon CSS */
+.white-icon {
+  color: white;
 }
 
-.home-bullet {
+.loading-icon {
   display: inline-block;
-  margin: 0 2px;
-  transform: scale(0.8);
-}
-
-.home-centered {
-  min-Width: 275;
-  text-align: center;
-  margin-Top: 0;
-}
-
-.home-heightened {
-  min-height: 250px;
-}
-
-.home-intro-title {
-  font-size: 28px !important;
-  font-weight: bold !important;
-  text-align: center !important;
-}
-
-.home-position {
-  margin-bottom: 12;
-}
-
-.home-margintop{
-  margin-top: 50px;
-}
-
-.home-colorBackground {
-  background-color: rgb(186, 209, 234);
-}
-
-.home-linkcard {
-  min-height: 350px;
-  min-width: 275;
-  text-align: center;
-  margin-top: 5;
-}
-
-.home-supportcard {
-  text-align: center;
-  margin-bottom: 10;
-  min-height: 460px;
-  min-width: 275;
-}
-
-.home-subtitle {
-  font-size: 24px !important;
-}
-
-/* prefix Styles */
-.resources-root {
-  background-color: rgb(250, 249, 246);
-  margin-top: auto;
-  /* padding-bottom: 3;
-  padding-top: 3; */
-  margin-left: auto;
-  min-width: 275;
-}
-
-.resources-supportcard {
-  text-align: center;
-  margin-bottom: 8;
-}
-
-.resources-title {
-  font-size: 28px !important;
-  font-weight: bold !important;
-}
-
-.resources-citation {
-  text-align: left;
-}
-
-.resources-linkcard {
-  min-height: auto;
-  text-align: center;
-}
-
-.resources-subtitle {
-  font-size: 25px !important;
-  font-weight:600 !important;
+  animation: spin 1s linear infinite;
+  width: 50px;
+  height: 50px;
+  background: transparent;
 }
 
-.resources-bullet {
-  display: inline-block;
-  margin: 0 2px;
-  transform: scale(0.8);
+.hover-background:hover {
+  background-color: inherit; /* Change to the desired background color on hover */
 }
 
-/* builder Styles */
+/* ---------------------------------------------------------------------------------------------------- */
+/* Button Styles */
 .add-button {
-  /* border-radius: 60% !important;
-  width:20px !important;
-  height: 60px !important; */
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
@@ -432,22 +286,12 @@
   align-items: center !important;
 }
 
-.bold-title {
-  font-weight: bold;
-}
-
-.required-field {
-  /* color: rgb(227, 55, 55) !important; */
-  color: var(--main-red-color) !important;
-}
-
-.table-card {
-  padding: 2%;
+.button-confirm {
+  color: blue;
 }
 
-/* text field */
-.large_textfield {
-  border-style: inherit;
-  width: max-content;
-  grid-auto-rows: auto;
+.object-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center; 
 }
\ No newline at end of file