diff --git a/src/components/common/Navbar.js b/src/components/common/Navbar.js
index 5f14b4e..5d35b3b 100644
--- a/src/components/common/Navbar.js
+++ b/src/components/common/Navbar.js
@@ -59,42 +59,30 @@ export const Navbar = () => {
     }, [location])
 
     return (
+      <div className="navbar-wrapper">
         <div className="navbar-root">
-            <div className="navbar-heading">
-                <Link 
-                    to="/"
-                    className="nav-logo"
-                >
-                    <img src={logo} alt="ACM Fun Logo" />
-                    <h1>ACM FUN</h1>
-                </Link>
-            </div>
-            <ul>
-                {
-                    navbarOptions.map((item, i) => {
-                        
-                        return (
-                            <li 
-                                key={i}
-                                className="list "
-                            >
-                                <Link 
-                                    to={item.url} 
-                                    class="navbar-item" 
-                                >
-                                    <span class="icon">
-                                        <img src={item.icon} alt={item.title} />
-                                    </span>
-                                    <span class="text">
-                                        {item.title}
-                                    </span>
-                                </Link>
-                            </li>
-                        )
-                    })
-                }
-            <   div class="indicator"></div>
-            </ul>
+          <div className="navbar-heading">
+            <Link to="/" className="nav-logo">
+              <img src={logo} alt="ACM Fun Logo" />
+              <h1>ACM FUN</h1>
+            </Link>
+          </div>
+          <ul>
+            {navbarOptions.map((item, i) => {
+              return (
+                <li key={i} className="list ">
+                  <Link to={item.url} class="navbar-item">
+                    <span class="icon">
+                      <img src={item.icon} alt={item.title} />
+                    </span>
+                    <span class="text">{item.title}</span>
+                  </Link>
+                </li>
+              );
+            })}
+            <div class="indicator"></div>
+          </ul>
         </div>
-    )
+      </div>
+    );
 }
\ No newline at end of file
diff --git a/src/styles/components/common/Navbar.css b/src/styles/components/common/Navbar.css
index 3051010..3aa40d5 100644
--- a/src/styles/components/common/Navbar.css
+++ b/src/styles/components/common/Navbar.css
@@ -1,152 +1,155 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
 }
 
 :root {
-    --clr: #ffffff;
+  --clr: #ffffff;
 }
 
+.navbar-wrapper {
+  height: 110px;
+}
 .navbar-root {
-    margin-left: auto;
-    margin-right: auto;
-    top: 40px;
-    background: var(--clr);
+  margin-left: auto;
+  margin-right: auto;
+  top: 40px;
+  background: var(--clr);
 
-    position: relative;
-    width: 400px;
-    height: 70px;
-    background: #88847e;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 20px;  
+  position: relative;
+  width: 400px;
+  height: 70px;
+  background: #88847e;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
 }
 
 .navbar-heading {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-basis: 30%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-basis: 30%;
 }
 
 .navbar-heading img {
-    height: 50px;
-    width: 50px;
+  height: 50px;
+  width: 50px;
 }
 
 .navbar-heading h1 {
-    font-size: 22px;
-    color: #fff;
-    margin-bottom: 0px;
-    display: flex;
-    flex-direction: row;
+  font-size: 22px;
+  color: #fff;
+  margin-bottom: 0px;
+  display: flex;
+  flex-direction: row;
 }
 
 .navbar-root ul {
-    display: flex;
-    width: 350px;
-    padding-left: 30px;
+  display: flex;
+  width: 350px;
+  padding-left: 30px;
 }
 
 .navbar-root li {
-    position: relative;
-    list-style: none;
-    width: 70px;
-    height: 70px;
-    z-index: 1;
+  position: relative;
+  list-style: none;
+  width: 70px;
+  height: 70px;
+  z-index: 1;
 }
 
 .navbar-root ul li .navbar-item {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-    text-align: center;
-    font-weight: 500;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  text-align: center;
+  font-weight: 500;
 }
 
 .nav-logo {
-    display: flex;
-    text-decoration: none;
+  display: flex;
+  text-decoration: none;
 }
 
 .navbar-root ul li .navbar-item .icon {
-    position: relative;
-    display: block;
-    line-height: 75px;
-    font-size: 1.5em;
-    text-align: center;
-    transition: 0.5s;
-    color: var(--clr);
-    width: 48px;
-    height: 48px;
+  position: relative;
+  display: block;
+  line-height: 75px;
+  font-size: 1.5em;
+  text-align: center;
+  transition: 0.5s;
+  color: var(--clr);
+  width: 48px;
+  height: 48px;
 }
 
 .navbar-root ul li.active .navbar-item .icon {
-    transform: translateY(-32px);
+  transform: translateY(-32px);
 }
 
 .navbar-root ul li .navbar-item .text {
-    position: absolute;
-    color: var(--clr);
-    font-weight: 400;
-    letter-spacing: 0.05em;
-    transition: 0.5s;
-    opacity: 0;
-    transform: translateY(20px);
+  position: absolute;
+  color: var(--clr);
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  transition: 0.5s;
+  opacity: 0;
+  transform: translateY(20px);
 }
 
 .navbar-root ul li.active .navbar-item .text {
-    opacity: 1;
-    transform: translateY(20px);
+  opacity: 1;
+  transform: translateY(20px);
 }
 
 .indicator {
-    position: absolute;
-    top: -60%;
-    width: 70px;
-    height: 70px;
-    background: #26b4ec;
-    border-radius: 50%;
-    border: 6px solid var(--clr);
-    transition: 0.5s;
+  position: absolute;
+  top: -60%;
+  width: 70px;
+  height: 70px;
+  background: #26b4ec;
+  border-radius: 50%;
+  border: 6px solid var(--clr);
+  transition: 0.5s;
 }
 
 .indicator::before {
-    content: '';
-    position: absolute;
-    top: 60%;
-    left: -22px;
-    width: 23px;
-    height: 20px;
-    background-color: transparent;;
-    border-top-right-radius: 20px;
-    box-shadow: 0px -10px 0 0 var(--clr);
+  content: "";
+  position: absolute;
+  top: 60%;
+  left: -22px;
+  width: 23px;
+  height: 20px;
+  background-color: transparent;
+  border-top-right-radius: 20px;
+  box-shadow: 0px -10px 0 0 var(--clr);
 }
 
 .indicator::after {
-    content: '';
-    position: absolute;
-    top: 60%;
-    right: -22px;
-    width: 23px;
-    height: 20px;
-    background-color: transparent;;
-    border-top-left-radius: 20px;
-    box-shadow: 0px -10px 0 0 var(--clr);
+  content: "";
+  position: absolute;
+  top: 60%;
+  right: -22px;
+  width: 23px;
+  height: 20px;
+  background-color: transparent;
+  border-top-left-radius: 20px;
+  box-shadow: 0px -10px 0 0 var(--clr);
 }
 
 .navbar-root ul li:nth-child(1).active ~ .indicator {
-    transform: translateX(calc(70px * 0));
+  transform: translateX(calc(70px * 0));
 }
 .navbar-root ul li:nth-child(2).active ~ .indicator {
-    transform: translateX(calc(70px * 1));
+  transform: translateX(calc(70px * 1));
 }
 .navbar-root ul li:nth-child(3).active ~ .indicator {
-    transform: translateX(calc(70px * 2));
+  transform: translateX(calc(70px * 2));
 }
diff --git a/src/styles/pages/activities/FortuneCard.css b/src/styles/pages/activities/FortuneCard.css
index 62a0d67..7fd78a7 100644
--- a/src/styles/pages/activities/FortuneCard.css
+++ b/src/styles/pages/activities/FortuneCard.css
@@ -1,57 +1,56 @@
 .FortuneCard {
-    text-align: center;
-    margin: 20px;
+  text-align: center;
+  margin: 20px;
 }
 
 h1 {
-    font-size: 24px;
-    color: #007BFF;
-    margin-bottom: 20px;
+  font-size: 24px;
+  color: #007bff;
+  margin-bottom: 20px;
 }
 
 .fortune-button {
-    background-color: #FF6F61;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    font-size: 16px;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-bottom: 20px;
+  background-color: #ff6f61;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 20px;
 }
 
 .cards {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .card {
-    background-color: #F3F4F6;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    margin: 10px;
-    max-width: 300px;
-    text-align: center;
-    transition: transform 0.2s ease-in-out;
+  background-color: #f3f4f6;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin: 10px;
+  max-width: 300px;
+  text-align: center;
+  transition: transform 0.2s ease-in-out;
 }
 
 .card:hover {
-    transform: scale(1.05);
-    background-color: #EAEAEA;
+  transform: scale(1.05);
+  background-color: #eaeaea;
 }
 
 img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 5px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 5px;
 }
 
 .special-text {
-    color: #f39c12;
-    font-weight: bold;
-    margin-top: 10px;
+  color: #f39c12;
+  font-weight: bold;
+  margin-top: 10px;
 }
-
diff --git a/src/styles/pages/activities/RandomQuote.css b/src/styles/pages/activities/RandomQuote.css
index 1309d21..022b7d2 100644
--- a/src/styles/pages/activities/RandomQuote.css
+++ b/src/styles/pages/activities/RandomQuote.css
@@ -1,31 +1,31 @@
 .rquote-content {
-    margin: 10px;
-    font-style: italic;
-    padding: 10px;
-    font-family: "Fira Code Light";
+  margin: 10px;
+  font-style: italic;
+  padding: 10px;
+  font-family: "Fira Code Light";
 }
 
 .rquote-quote {
-    font-size: 50px;
-    margin: 10px;
+  font-size: 50px;
+  margin: 10px;
 }
 
 .rquote-author {
-    font-size: 25px;
-    margin: 10px;
+  font-size: 25px;
+  margin: 10px;
 }
 
 .rquote-button {
-    font-size: 23px;
-    background: white;
-    border-radius: 10px;
-    padding: 10px;
-    margin: 10px;
-    transition-duration: 300ms;
+  font-size: 23px;
+  background: white;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  transition-duration: 300ms;
 }
 
 .rquote-button:hover {
-    cursor: pointer;
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-    background: #c9c9c9;
-}
\ No newline at end of file
+  cursor: pointer;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  background: #c9c9c9;
+}