diff --git a/eliis-front-end/fonts/VinaSans-Regular.ttf b/eliis-front-end/fonts/VinaSans-Regular.ttf
new file mode 100644
index 0000000..ae38318
Binary files /dev/null and b/eliis-front-end/fonts/VinaSans-Regular.ttf differ
diff --git a/eliis-front-end/package.json b/eliis-front-end/package.json
index 75e65ee..3bb6a1f 100644
--- a/eliis-front-end/package.json
+++ b/eliis-front-end/package.json
@@ -44,9 +44,9 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "last 2 versions",
+      "> 1%",
+      "not dead"
     ],
     "development": [
       "last 1 chrome version",
diff --git a/eliis-front-end/post.config.js b/eliis-front-end/post.config.js
new file mode 100644
index 0000000..cad9469
--- /dev/null
+++ b/eliis-front-end/post.config.js
@@ -0,0 +1,7 @@
+// postcss.config.js
+module.exports = {
+    plugins: {
+      autoprefixer: {},
+    },
+  };
+  
\ No newline at end of file
diff --git a/eliis-front-end/public/index.html b/eliis-front-end/public/index.html
index 709d99d..133505c 100644
--- a/eliis-front-end/public/index.html
+++ b/eliis-front-end/public/index.html
@@ -11,6 +11,21 @@
         font-family: Arial, sans-serif;
       }
     </style>
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script>
+      WebFont.load({
+        google: {
+          families: ['Roboto:300,400,500,700', 'Open+Sans:400,700'],
+        },
+        loading: function () {
+          console.log('Fonts are loading...');
+        },
+        active: function () {
+          console.log('Fonts have been loaded.');
+        },
+      });
+    </script>
+       
     <link rel="canonical" href="https://vp-web-development-showcase.netlify.app/">
     <link rel="icon" type="image/svg+xml" href="https://upload.wikimedia.org/wikipedia/commons/0/0b/Eo_circle_light-green_white_letter-e.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/eliis-front-end/src/App.css b/eliis-front-end/src/App.css
index 46dce65..fa0592c 100644
--- a/eliis-front-end/src/App.css
+++ b/eliis-front-end/src/App.css
@@ -14,3 +14,543 @@
   width: 100%;
   display: flex;
 }
+
+/* Event Calendar CSS */
+
+@font-face {
+  font-family: 'VinaSans-Regular';
+  src: url('../fonts/VinaSans-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+/* Background colors */
+.bg-Coral {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 158 128 / var(--tw-bg-opacity));
+}
+
+.bg-Olive-Green {
+  background-color: rgb(166, 194, 100);
+}
+
+.bg-Rose-Pink {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 130 177 / var(--tw-bg-opacity));
+}
+
+.bg-Tomato-Red {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 94 93 / var(--tw-bg-opacity));
+}
+
+.bg-Muted-Pink {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 121 121 / var(--tw-bg-opacity));
+}
+
+.bg-Mustard-Yellow {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 173 78 / var(--tw-bg-opacity));
+}
+
+.bg-Teal {
+  --tw-bg-opacity: 1;
+  background-color: rgb(115 202 194 / var(--tw-bg-opacity));
+}
+
+.bg-Sky-Blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 192 222 / var(--tw-bg-opacity));
+}
+
+/* Special style for white background with red border */
+.bg-White-Red-Outline {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity));
+  border: 1px solid red;
+}
+
+/* Event Calendar Ends */
+
+/* Personal.js start */
+
+/* Style of checkmark component */
+.e3-img-overlay {
+  position: absolute;
+  right: 0.4rem;
+  bottom: 0.1rem;
+  line-height: 12px;
+}
+/* Style for chevron and circle */
+.e3-white-fill-icon {
+  background: #fff;
+  border: .1rem solid #f79e80;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+}
+/* Background style for profile circle */
+.military-color {
+  background-color: rgb(166, 194, 100);
+  -webkit-text-fill-color: white;
+}
+/* For text beside profile logo */
+.font-semibold {
+  font-weight: 600;
+}
+/* For text style */
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+/* Positioning of name and company name */
+.custom-measurements-profile-logo {
+width: 5.964rem;
+height: 1.5rem;
+margin-bottom: 1.3rem;
+}
+/* Should be for color of the second row */
+.text-sm.text-secondary {
+  --tw-text-opacity: 1;
+  color: rgb(166 194 100 / var(--tw-text-opacity)) !important;
+}
+/* Styling for company name */
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-\[2fr_1fr\] {
+    grid-template-columns: 2fr 1fr;
+  }
+}
+
+.grid {
+  display: grid;
+}
+.gap-2{
+  gap: 0.5rem;
+}
+.grid-rows-1 {
+  grid-template-columns: repeat(1, minmax(0,1fr));
+}
+.place-items-end {
+  place-items: end;
+}
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+}
+.flex-col {
+  flex-direction:column;
+}
+
+/* Personal.js ENDS */
+
+/* NavbarItems.js START */
+.border-right {
+  border-right: 10px solid #ccc;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+/* Styling for images inside button and button it self */
+.menu-icon-container {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(#f79e80,#e58565);
+}
+
+@media only screen and (max-width: 600px) {
+  .d-flex .justify-content-end {
+      display: none;
+  }
+}
+/* NavbarItems.js END */
+
+/* Application.js START */
+.gradient-custom-2 {
+  /* fallback for old browsers */
+  background: #fbc2eb;
+  
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: -webkit-linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1));
+  
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background: linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1))
+  }
+/* Application.js END */
+
+/* Callendar.js START */
+/* Media quaeries */
+
+/* CalendarS.css */
+.calendar-container {
+  width: 100%; /* Set the width to 100% */
+  height: 60vh; /* Set the height to 60% of the viewport height */
+}
+.fc-button-primary {
+  color: #FFF;
+  background: linear-gradient(#f79e80,#e58565);
+  border-color: #FFFFFF !important;
+}
+
+.fc-col-header-cell-cushion {
+  color: black;
+  text-decoration: none;
+}
+
+#custom-calendar .fc-day-sat,
+#custom-calendar .fc-day-sun {
+  color: #eb5e5d;
+}
+
+.fc-daygrid-day-number {
+  color: black;
+  text-decoration: none;
+}
+
+/* Common styles */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+/* Background colors */
+.bg-Coral {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 158 128 / var(--tw-bg-opacity));
+}
+
+.bg-Olive-Green {
+  background-color: rgb(166, 194, 100);
+}
+
+.bg-Rose-Pink {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 130 177 / var(--tw-bg-opacity));
+}
+
+.bg-Tomato-Red {
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 94 93 / var(--tw-bg-opacity));
+}
+
+.bg-Muted-Pink {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 121 121 / var(--tw-bg-opacity));
+}
+
+.bg-Mustard-Yellow {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 173 78 / var(--tw-bg-opacity));
+}
+
+.bg-Teal {
+  --tw-bg-opacity: 1;
+  background-color: rgb(115 202 194 / var(--tw-bg-opacity));
+}
+
+.bg-Sky-Blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 192 222 / var(--tw-bg-opacity));
+}
+
+/* Special style for white background with red border */
+.bg-White-Red-Outline {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity));
+  border: 1px solid red;
+}
+
+/* Callendar.js END */
+
+/* index.css inside calendar folder START */
+
+html,
+body,
+body > div { /* the react root */
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+ul {
+  margin: 0;
+  padding: 0 0 0 1.5em;
+}
+
+li {
+  margin: 0.5rem 0;
+  padding: 0;
+}
+
+b { /* used for event dates/times */
+  margin-right: 3px;
+}
+
+.demo-app {
+  display: flex;
+  min-height: 100%;
+  font-family: 'Open Sans', 'Roboto';
+  font-size: 14px;
+}
+
+.demo-app-main {
+  flex-grow: 1;
+  padding: 3em;
+}
+
+.fc { /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+}
+/* index.css inside calendar folder END */
+
+/* Announcements.js START */
+ul.timeline-3 {
+  list-style-type: none;
+  position: relative;
+}
+ul.timeline-3:before {
+  content: " ";
+  background: #d4d9df;
+  display: inline-block;
+  position: absolute;
+  left: 29px;
+  width: 2px;
+  height: 100%;
+  z-index: 400;
+}
+ul.timeline-3 > li {
+  margin: 20px 0;
+  padding-left: 20px;
+}
+ul.timeline-3 > li:before {
+  content: " ";
+  background: white;
+  display: inline-block;
+  position: absolute;
+  border-radius: 50%;
+  border: 3px solid #22c0e8;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+  z-index: 400;
+}
+/* Announcements.js END */
+
+/* Messages.js START */
+.gradient-custom {
+  /* fallback for old browsers */
+  background: #fccb90;
+
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: -webkit-linear-gradient(
+    to bottom right,
+    rgba(252, 203, 144, 1),
+    rgba(213, 126, 235, 1)
+  );
+
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background: linear-gradient(
+    to bottom right,
+    rgba(252, 203, 144, 1),
+    rgba(213, 126, 235, 1)
+  );
+}
+
+.mask-custom {
+  background: rgba(24, 24, 16, 0.2);
+  border-radius: 2em;
+  backdrop-filter: blur(15px);
+  border: 2px solid rgba(255, 255, 255, 0.05);
+  background-clip: padding-box;
+  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
+}
+/* Messages.js END */
+
+/* Sidebar.js START */
+/* 
+  .text-sm is already applyed from "personal.css" file
+  .py-2 is applyed from Tailwind.css directly
+  .px-1 is applyed from Tailwind.css directly
+    ~ Makes width more consistend of buttons
+  .border is applyed from Tailwind.css directly
+    ~ Border around button
+  .font-semibold is applyed from Tailwind
+    ~
+*/
+
+/* So we don't see dot, behind buttons like a list. */
+.type-menu {
+  list-style: none;
+}
+/* Makes the icons round */
+.rounded-md {
+  border-radius: 0.375rem;
+}
+/* Makes the casing of buttons round */
+.rounded-lg {
+  border-radius: 0.5rem;
+  
+}
+/* Makes icons from black --> white */
+.text-white {
+  color: #fff;
+}
+/* Styling for images inside button and button it self */
+.menu-icon-container {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(#f79e80,#e58565);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+}
+.dropdown-open {
+  margin-bottom: calc(2.4rem + 2rem * var(--nav-links, 1.7));
+}
+.chevron-icon {
+  margin-left: auto !important;
+}
+/* Styling for whole side navigation bar */
+.sidebar {
+  color: #444;
+  transition: all 0.3s;
+  width: 19rem;
+  font-size: 16px;
+  min-width: 19rem;
+  max-width: 19rem;
+  height: calc(100vh - 65px);
+  overflow-y: auto;
+  scrollbar-color: #c4c4c4 #eee;
+  scrollbar-width: thin;
+  box-shadow: 2px 0 2px 0 rgba(0,0,0,0.06);
+}
+/* Background styling for buttons */
+.main-gradient {
+  background: linear-gradient(180deg,#fbfbfb 0,#e4e4e4 49%,#dfdfdf 51%,#f6f6f6);
+}
+
+/* Media query for responsive design */
+@media (max-width: 991.98px) {
+  .sidebar {
+    position: fixed;
+    background-color: #fff;
+    z-index: 103;
+    width: 100%;
+    max-width: 320px;
+    min-width: 320px;
+    transform: translateX(-320px);
+    transition: filter .2s ease-in,transform .2s ease-in-out;
+  }
+}
+
+.custom-dropdown-toggle {
+  color: #444 !important; /* Set text color to black */
+  background-color: transparent !important; /* Set background color to transparent */
+  border: none !important; /* Remove border */
+}
+
+.custom-dropdown-toggle:hover {
+  background-color: transparent !important; /* Set background color to transparent on hover */
+}
+
+.custom-dropdown-toggle::after {
+  border: none !important; /* Remove the caret icon */
+  content: none !important; /* Remove any content (caret icon) */
+}
+
+
+
+/* Sidebar.js END */
\ No newline at end of file
diff --git a/eliis-front-end/src/App.js b/eliis-front-end/src/App.js
index 98490d2..a03fcb4 100644
--- a/eliis-front-end/src/App.js
+++ b/eliis-front-end/src/App.js
@@ -7,11 +7,11 @@ import './App.css';
 import Navigation from './components/navbar/Navbar/navbar';
 import Sidebar from './components/sidebar/Sidebar';
 import Dashboard from './components/pages/Application Components/Dashboard/dashboard';
-import Messages from './components/pages/Messages/messages';
+import Messages from './components/pages/Informational Components/Messages/messages';
 import Gallery from './components/pages/Application Components/Gallery/gallery';
-import Help from './components/pages/Help/help';
+import Help from './components/pages/Informational Components/Help/help';
 import CardWithFeedback from './components/pages/Application Components/Surveys/survey';
-import Delivery from './components/pages/Contacts/contact';
+import Delivery from './components/pages/Informational Components/Contacts/contact';
 import Cards from './components/pages/Application Components/Documents/documents';
 import Applications from './components/pages/Application Components/Applications/application';
 import Schedule from './components/pages/Organizational Components/Work Schedule/schedule';
diff --git a/eliis-front-end/src/components/event-calender/Event-Calendar.css b/eliis-front-end/src/components/event-calender/Event-Calendar.css
deleted file mode 100644
index ca297f4..0000000
--- a/eliis-front-end/src/components/event-calender/Event-Calendar.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/* Common styles */
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.rounded-full {
-  border-radius: 9999px;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.h-6 {
-  height: 1.5rem;
-}
-
-/* Background colors */
-.bg-Coral {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 158 128 / var(--tw-bg-opacity));
-}
-
-.bg-Olive-Green {
-  background-color: rgb(166, 194, 100);
-}
-
-.bg-Rose-Pink {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 130 177 / var(--tw-bg-opacity));
-}
-
-.bg-Tomato-Red {
-  --tw-bg-opacity: 1;
-  background-color: rgb(235 94 93 / var(--tw-bg-opacity));
-}
-
-.bg-Muted-Pink {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 121 121 / var(--tw-bg-opacity));
-}
-
-.bg-Mustard-Yellow {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 173 78 / var(--tw-bg-opacity));
-}
-
-.bg-Teal {
-  --tw-bg-opacity: 1;
-  background-color: rgb(115 202 194 / var(--tw-bg-opacity));
-}
-
-.bg-Sky-Blue {
-  --tw-bg-opacity: 1;
-  background-color: rgb(92 192 222 / var(--tw-bg-opacity));
-}
-
-/* Special style for white background with red border */
-.bg-White-Red-Outline {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity));
-  border: 1px solid red;
-}
diff --git a/eliis-front-end/src/components/event-calender/Event-Calendar.js b/eliis-front-end/src/components/event-calender/Event-Calendar.js
index 49edd49..13980dc 100644
--- a/eliis-front-end/src/components/event-calender/Event-Calendar.js
+++ b/eliis-front-end/src/components/event-calender/Event-Calendar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Icon from '@mdi/react';
 import { mdiCheck } from '@mdi/js';
-import './Event-Calendar.css';
+import '../../App.css';
 
 const typeMenu = [
   { color: 'Coral', label: 'Education project' },
@@ -20,17 +20,21 @@ const EventCalendarHeader = () => {
     <div className="flex flex-col gap-2">
       <h1 className='text-3xl'>Event Calendar</h1>
       <h3>Types</h3>
-        {typeMenu.map((item, index) => (
-          <div key={index} className="flex items-center gap-2">
-            <span className={`rounded-full p-1 flex items-center justify-center font-bold w-6 h-6 text-xs bg-${item.color} text-${index === typeMenu.length - 1 ? 'black' : 'white'}`}>
-              <Icon 
-                path={mdiCheck} 
-                size={1} 
-                color="currentColor"
-              />
-            </span>
-            <span data-testid={item.label}>{item.label}</span>
-          </div>
+      {typeMenu.map((item, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <span
+            className={`rounded-full p-1 flex items-center justify-center font-bold w-6 h-6 text-xs bg-${item.color} text-${index === typeMenu.length - 1 ? 'black' : 'white'}`}
+            aria-label={item.label}
+            data-testid={item.label}
+          >
+            <Icon 
+              path={mdiCheck} 
+              size={1} 
+              color="currentColor"
+            />
+          </span>
+          <span>{item.label}</span>
+        </div>
         ))}
     </div>
   );
diff --git a/eliis-front-end/src/components/navbar/Navbar/Profile/personal.css b/eliis-front-end/src/components/navbar/Navbar/Profile/personal.css
deleted file mode 100644
index ee1cbb2..0000000
--- a/eliis-front-end/src/components/navbar/Navbar/Profile/personal.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/* Style of checkmark component */
-.e3-img-overlay {
-    position: absolute;
-    right: 0.4rem;
-    bottom: 0.1rem;
-    line-height: 12px;
-}
-/* Style for chevron and circle */
-.e3-white-fill-icon {
-    background: #fff;
-    border: .1rem solid #f79e80;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-}
-/* Background style for profile circle */
-.military-color {
-    background-color: rgb(166, 194, 100);
-    -webkit-text-fill-color: white;
-}
-/* For text beside profile logo */
-.font-semibold {
-    font-weight: 600;
-}
-/* For text style */
-.text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-}
-/* Positioning of name and company name */
-.custom-measurements-profile-logo {
-  width: 5.964rem;
-  height: 1.5rem;
-  margin-bottom: 1.3rem;
-}
-/* Should be for color of the second row */
-.text-sm.text-secondary {
-    --tw-text-opacity: 1;
-    color: rgb(166 194 100 / var(--tw-text-opacity)) !important;
-  }
-/* Styling for company name */
-.text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-
-@media (min-width: 768px) {
-    .md\:grid-cols-\[2fr_1fr\] {
-      grid-template-columns: 2fr 1fr;
-    }
-  }
-
-  .grid {
-    display: grid;
-  }
-  .gap-2{
-    gap: 0.5rem;
-  }
-  .grid-rows-1 {
-    grid-template-columns: repeat(1, minmax(0,1fr));
-  }
-  .place-items-end {
-    place-items: end;
-  }
-  @media (min-width: 768px) {
-    .md\:flex {
-      display: flex;
-    }
-  }
-  .flex-col {
-    flex-direction:column;
-  }
\ No newline at end of file
diff --git a/eliis-front-end/src/components/navbar/Navbar/Profile/personal.js b/eliis-front-end/src/components/navbar/Navbar/Profile/personal.js
index 0b920d5..15031d7 100644
--- a/eliis-front-end/src/components/navbar/Navbar/Profile/personal.js
+++ b/eliis-front-end/src/components/navbar/Navbar/Profile/personal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import './personal.css';
+import '../../../../App.css';
 
 const Personal = () => {
   return (
diff --git a/eliis-front-end/src/components/navbar/Navbar/navbarItems.css b/eliis-front-end/src/components/navbar/Navbar/navbarItems.css
deleted file mode 100644
index 140a075..0000000
--- a/eliis-front-end/src/components/navbar/Navbar/navbarItems.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.border-right {
-    border-right: 10px solid #ccc;
-}
-
-.rounded-full {
-    border-radius: 9999px;
-}
-
-/* Styling for images inside button and button it self */
-.menu-icon-container {
-    width: 32px;
-    height: 32px;
-    background: linear-gradient(#f79e80,#e58565);
-}
\ No newline at end of file
diff --git a/eliis-front-end/src/components/navbar/Navbar/navbarItems.js b/eliis-front-end/src/components/navbar/Navbar/navbarItems.js
index a3165de..2b5c7fe 100644
--- a/eliis-front-end/src/components/navbar/Navbar/navbarItems.js
+++ b/eliis-front-end/src/components/navbar/Navbar/navbarItems.js
@@ -3,7 +3,7 @@ import Icon from '@mdi/react';
 import { NavLink } from 'react-router-dom';
 import { mdiBell, mdiBullhorn, mdiMessageText, mdiCalendarOutline, mdiCloud } from '@mdi/js';
 import Col from 'react-bootstrap/Col';
-import './navbarItems.css';
+import '../../../App.css';
 
 const IconButton = ({ to, path, badge, label, className }) => (
   <NavLink to={to} className={`mx-2 position-relative ${className}`}>
diff --git a/eliis-front-end/src/components/navbar/navbar.css b/eliis-front-end/src/components/navbar/navbar.css
deleted file mode 100644
index 2bd61a5..0000000
--- a/eliis-front-end/src/components/navbar/navbar.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.navbar-with-line {
-    border-bottom: 2px solid #ccc;
-}
-
-@media (min-width: 768px) {
-    .md\:gap-4 {
-      gap: 1rem;
-    }
-}
-
-@media (min-width: 768px) {
-    .md\:grid-cols-\[2fr_1px_1fr\] {
-      grid-template-columns: 2fr 1px 1fr;
-    }
-
-}
-
-.items-center {
-    align-items: center;
-}
-
-.place-items-end {
-    place-items: end;
-    align-items: end;
-}
-
-.grid-rows-1 {
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-
-.max-w-\[120px\] {
-    max-width: 120px;
-  }
\ No newline at end of file
diff --git a/eliis-front-end/src/components/pages/Application Components/Applications/application.css b/eliis-front-end/src/components/pages/Application Components/Applications/application.css
deleted file mode 100644
index fd76dcb..0000000
--- a/eliis-front-end/src/components/pages/Application Components/Applications/application.css	
+++ /dev/null
@@ -1,10 +0,0 @@
-.gradient-custom-2 {
-    /* fallback for old browsers */
-    background: #fbc2eb;
-    
-    /* Chrome 10-25, Safari 5.1-6 */
-    background: -webkit-linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1));
-    
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    background: linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1))
-    }
\ No newline at end of file
diff --git a/eliis-front-end/src/components/pages/Application Components/Applications/application.js b/eliis-front-end/src/components/pages/Application Components/Applications/application.js
index 39009e5..9ab5d74 100644
--- a/eliis-front-end/src/components/pages/Application Components/Applications/application.js	
+++ b/eliis-front-end/src/components/pages/Application Components/Applications/application.js	
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MDBCol, MDBContainer, MDBRow, MDBCard, MDBCardText, MDBCardBody, MDBCardImage, MDBBtn, MDBTypography } from 'mdb-react-ui-kit';
-import './application.css';
+import '../../../../App.css';
 
 export default function Applications() {
   return (
diff --git a/eliis-front-end/src/components/pages/Events/Calendar/Calendar.js b/eliis-front-end/src/components/pages/Events/Calendar/Calendar.js
index fa05e72..7d52955 100644
--- a/eliis-front-end/src/components/pages/Events/Calendar/Calendar.js
+++ b/eliis-front-end/src/components/pages/Events/Calendar/Calendar.js
@@ -8,8 +8,8 @@ import interactionPlugin from '@fullcalendar/interaction';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { Dropdown } from 'react-bootstrap';
-import './CalendarS.css';
-import './index.css';
+import '../../../../App.css';
+import '../../../../App.css';
 import Icon from '@mdi/react';
 import { mdiCheck } from '@mdi/js';
 
diff --git a/eliis-front-end/src/components/pages/Events/Calendar/CalendarS.css b/eliis-front-end/src/components/pages/Events/Calendar/CalendarS.css
deleted file mode 100644
index 8e7aee6..0000000
--- a/eliis-front-end/src/components/pages/Events/Calendar/CalendarS.css
+++ /dev/null
@@ -1,115 +0,0 @@
-/* CalendarS.css */
-.calendar-container {
-  width: 100%; /* Set the width to 100% */
-  height: 60vh; /* Set the height to 60% of the viewport height */
-}
-.fc-button-primary {
-  color: #FFF;
-  background: linear-gradient(#f79e80,#e58565);
-  border-color: #FFFFFF !important;
-}
-
-.fc-col-header-cell-cushion {
-  color: black;
-  text-decoration: none;
-}
-
-#custom-calendar .fc-day-sat,
-#custom-calendar .fc-day-sun {
-  color: #eb5e5d;
-}
-
-.fc-daygrid-day-number {
-  color: black;
-  text-decoration: none;
-}
-
-/* Common styles */
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.rounded-full {
-  border-radius: 9999px;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.h-6 {
-  height: 1.5rem;
-}
-
-/* Background colors */
-.bg-Coral {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 158 128 / var(--tw-bg-opacity));
-}
-
-.bg-Olive-Green {
-  background-color: rgb(166, 194, 100);
-}
-
-.bg-Rose-Pink {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 130 177 / var(--tw-bg-opacity));
-}
-
-.bg-Tomato-Red {
-  --tw-bg-opacity: 1;
-  background-color: rgb(235 94 93 / var(--tw-bg-opacity));
-}
-
-.bg-Muted-Pink {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 121 121 / var(--tw-bg-opacity));
-}
-
-.bg-Mustard-Yellow {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 173 78 / var(--tw-bg-opacity));
-}
-
-.bg-Teal {
-  --tw-bg-opacity: 1;
-  background-color: rgb(115 202 194 / var(--tw-bg-opacity));
-}
-
-.bg-Sky-Blue {
-  --tw-bg-opacity: 1;
-  background-color: rgb(92 192 222 / var(--tw-bg-opacity));
-}
-
-/* Special style for white background with red border */
-.bg-White-Red-Outline {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity));
-  border: 1px solid red;
-}
diff --git a/eliis-front-end/src/components/pages/Events/Calendar/index.css b/eliis-front-end/src/components/pages/Events/Calendar/index.css
deleted file mode 100644
index f61ef06..0000000
--- a/eliis-front-end/src/components/pages/Events/Calendar/index.css
+++ /dev/null
@@ -1,44 +0,0 @@
-
-html,
-body,
-body > div { /* the react root */
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-h2 {
-  margin: 0;
-  font-size: 16px;
-}
-
-ul {
-  margin: 0;
-  padding: 0 0 0 1.5em;
-}
-
-li {
-  margin: 0.5rem 0;
-  padding: 0;
-}
-
-b { /* used for event dates/times */
-  margin-right: 3px;
-}
-
-.demo-app {
-  display: flex;
-  min-height: 100%;
-  font-family: 'Open Sans', 'Roboto';
-  font-size: 14px;
-}
-
-.demo-app-main {
-  flex-grow: 1;
-  padding: 3em;
-}
-
-.fc { /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-}
\ No newline at end of file
diff --git a/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.css b/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.css
deleted file mode 100644
index f243e49..0000000
--- a/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.css	
+++ /dev/null
@@ -1,30 +0,0 @@
-ul.timeline-3 {
-    list-style-type: none;
-    position: relative;
-  }
-  ul.timeline-3:before {
-    content: " ";
-    background: #d4d9df;
-    display: inline-block;
-    position: absolute;
-    left: 29px;
-    width: 2px;
-    height: 100%;
-    z-index: 400;
-  }
-  ul.timeline-3 > li {
-    margin: 20px 0;
-    padding-left: 20px;
-  }
-  ul.timeline-3 > li:before {
-    content: " ";
-    background: white;
-    display: inline-block;
-    position: absolute;
-    border-radius: 50%;
-    border: 3px solid #22c0e8;
-    left: 20px;
-    width: 20px;
-    height: 20px;
-    z-index: 400;
-  }
\ No newline at end of file
diff --git a/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.js b/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.js
index c747caf..659252a 100644
--- a/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.js	
+++ b/eliis-front-end/src/components/pages/Informational Components/Announcements/announcements.js	
@@ -1,6 +1,6 @@
 import React from "react";
 import { MDBCol, MDBContainer, MDBRow } from "mdb-react-ui-kit";
-
+import '../../../../App.css';
 export default function Announcements() {
   return (
     <MDBContainer className="py-5">
diff --git a/eliis-front-end/src/components/pages/Informational Components/Messages/messages.css b/eliis-front-end/src/components/pages/Informational Components/Messages/messages.css
deleted file mode 100644
index 6e097d8..0000000
--- a/eliis-front-end/src/components/pages/Informational Components/Messages/messages.css	
+++ /dev/null
@@ -1,27 +0,0 @@
-.gradient-custom {
-    /* fallback for old browsers */
-    background: #fccb90;
-  
-    /* Chrome 10-25, Safari 5.1-6 */
-    background: -webkit-linear-gradient(
-      to bottom right,
-      rgba(252, 203, 144, 1),
-      rgba(213, 126, 235, 1)
-    );
-  
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    background: linear-gradient(
-      to bottom right,
-      rgba(252, 203, 144, 1),
-      rgba(213, 126, 235, 1)
-    );
-  }
-  
-  .mask-custom {
-    background: rgba(24, 24, 16, 0.2);
-    border-radius: 2em;
-    backdrop-filter: blur(15px);
-    border: 2px solid rgba(255, 255, 255, 0.05);
-    background-clip: padding-box;
-    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
-  }
\ No newline at end of file
diff --git a/eliis-front-end/src/components/pages/Informational Components/Messages/messages.js b/eliis-front-end/src/components/pages/Informational Components/Messages/messages.js
index e43c89f..b7d5515 100644
--- a/eliis-front-end/src/components/pages/Informational Components/Messages/messages.js	
+++ b/eliis-front-end/src/components/pages/Informational Components/Messages/messages.js	
@@ -11,7 +11,7 @@ import {
   MDBTextArea,
   MDBCardHeader,
 } from "mdb-react-ui-kit";
-import './messages.css';
+import '../../../../App.css';
 
 export default function App() {
   return (
diff --git a/eliis-front-end/src/components/pages/Organizational Components/Work Schedule/schedule.css b/eliis-front-end/src/components/pages/Organizational Components/Work Schedule/schedule.css
deleted file mode 100644
index e69de29..0000000
diff --git a/eliis-front-end/src/components/pages/Organizational Components/Work Schedule/schedule.js b/eliis-front-end/src/components/pages/Organizational Components/Work Schedule/schedule.js
index 01b2a78..5e7cca4 100644
--- a/eliis-front-end/src/components/pages/Organizational Components/Work Schedule/schedule.js	
+++ b/eliis-front-end/src/components/pages/Organizational Components/Work Schedule/schedule.js	
@@ -6,7 +6,6 @@ import {
   MDBContainer,
   MDBIcon,
 } from "mdb-react-ui-kit";
-import './schedule.css';
 
 export default function Schedule() {
   return (
diff --git a/eliis-front-end/src/components/sidebar/Sidebar.css b/eliis-front-end/src/components/sidebar/Sidebar.css
deleted file mode 100644
index 36bc94a..0000000
--- a/eliis-front-end/src/components/sidebar/Sidebar.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/* 
-  .text-sm is already applyed from "personal.css" file
-  .py-2 is applyed from Tailwind.css directly
-  .px-1 is applyed from Tailwind.css directly
-    ~ Makes width more consistend of buttons
-  .border is applyed from Tailwind.css directly
-    ~ Border around button
-  .font-semibold is applyed from Tailwind
-    ~
-*/
-
-/* So we don't see dot, behind buttons like a list. */
-.type-menu {
-  list-style: none;
-}
-/* Makes the icons round */
-.rounded-md {
-  border-radius: 0.375rem;
-}
-/* Makes the casing of buttons round */
-.rounded-lg {
-  border-radius: 0.5rem;
-  
-}
-/* Makes icons from black --> white */
-.text-white {
-  color: #fff;
-}
-/* Styling for images inside button and button it self */
-.menu-icon-container {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(#f79e80,#e58565);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 8px;
-}
-.dropdown-open {
-  margin-bottom: calc(2.4rem + 2rem * var(--nav-links, 1.7));
-}
-.chevron-icon {
-  margin-left: auto !important;
-}
-/* Styling for whole side navigation bar */
-.sidebar {
-  color: #444;
-  transition: all 0.3s;
-  width: 19rem;
-  font-size: 16px;
-  min-width: 19rem;
-  max-width: 19rem;
-  height: calc(100vh - 65px);
-  overflow-y: auto;
-  scrollbar-color: #c4c4c4 #eee;
-  scrollbar-width: thin;
-  box-shadow: 2px 0 2px 0 rgba(0,0,0,0.06);
-}
-/* Background styling for buttons */
-.main-gradient {
-  background: linear-gradient(180deg,#fbfbfb 0,#e4e4e4 49%,#dfdfdf 51%,#f6f6f6);
-}
-
-/* Media query for responsive design */
-@media (max-width: 991.98px) {
-  .sidebar {
-    position: fixed;
-    background-color: #fff;
-    z-index: 103;
-    width: 100%;
-    max-width: 320px;
-    min-width: 320px;
-    transform: translateX(-320px);
-    transition: filter .2s ease-in,transform .2s ease-in-out;
-  }
-}
-
-.custom-dropdown-toggle {
-  color: #444 !important; /* Set text color to black */
-  background-color: transparent !important; /* Set background color to transparent */
-  border: none !important; /* Remove border */
-}
-
-.custom-dropdown-toggle:hover {
-  background-color: transparent !important; /* Set background color to transparent on hover */
-}
-
-.custom-dropdown-toggle::after {
-  border: none !important; /* Remove the caret icon */
-  content: none !important; /* Remove any content (caret icon) */
-}
-
-
diff --git a/eliis-front-end/src/components/sidebar/Sidebar.js b/eliis-front-end/src/components/sidebar/Sidebar.js
index c21b4dc..080830f 100644
--- a/eliis-front-end/src/components/sidebar/Sidebar.js
+++ b/eliis-front-end/src/components/sidebar/Sidebar.js
@@ -19,7 +19,7 @@ import {
   mdiChevronRight,
   mdiChevronDown,
 } from '@mdi/js';
-import './Sidebar.css';
+import '../../App.css';
 import Dropdown from 'react-bootstrap/Dropdown';
 
 const Sidebar = () => {
diff --git a/eliis-front-end/webpack.config.js b/eliis-front-end/webpack.config.js
new file mode 100644
index 0000000..5887a95
--- /dev/null
+++ b/eliis-front-end/webpack.config.js
@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'postcss-loader',
+        ],
+      },
+    ],
+  },
+
+};