diff --git a/src/app/globals.css b/src/app/globals.css
index 520a142..ac8439e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,4 @@
 @import "react-big-calendar/lib/css/react-big-calendar.css";
-/* @import '../styles/custom-calendar.css'; */
 
 * {
   box-sizing: border-box;
@@ -25,27 +24,27 @@ body {
 :root {
   --color-page-bg: #fff;
 
-  --color-toolbar-bg: #ef3e0e;
+  --color-toolbar-bg: #2C3168;
   --color-toolbar-button: rgb(255, 255, 255);
-  --color-toolbar-button-hover: rgba(79, 45, 80, 0.692);
-  --color-toolbar-button-active: rgba(79, 45, 80, 0.692);
+  --color-toolbar-button-hover: rgba(44, 49, 104, 0.692);
+  --color-toolbar-button-active: rgba(113, 120, 197, 0.692);
   --color-toolbar-label: #fff;
-  --color-toolbar-text: #ef3e0e;
+  --color-toolbar-text: #2C3168;
 
-  --color-modal-button: #ef3e0e;
+  --color-modal-button: #2C3168;
   --color-modal-text: #fff;
-  --color-modal-button-hover: #a33718;
+  --color-modal-button-hover: #1c2050;
 
   --color-header-button: #fff;
-  --color-header-text: #ef3e0e;
-  --color-header-button-hover: #a33718;
+  --color-header-text: #2C3168;
+  --color-header-button-hover: #1c2050;
   --color-header-text-hover: #fff;
 
   --color-calendar-bg: #d3d3d3;
-  --color-calendar-border: #ee5126;
+  --color-calendar-border: #5960b3;
   --color-calendar-numbers: #ffffff;
 
-  --color-event-bg: #ef3e0e;
+  --color-event-bg: #2C3168;
   --color-event-text: #fff;
 
   --color-today-border: #007bff;
diff --git a/src/app/layout.js b/src/app/layout.js
index 54c3f38..b584961 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,10 +1,8 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-// import "@/styles/custom-calendar.css";
-import Sidebar from "@/components/Sidebar";
+import "@/styles/main.scss";
 import Header from "@/components/Header";
 import StyledComponentsRegistry from "@/lib/registry";
-import Square from "@/components/Square";
 import { CalendarProvider } from "@/context/CalendarContext";
 
 const geistSans = Geist({
@@ -41,9 +39,8 @@ export default function RootLayout({ children }) {
                 style={{
                   display: "flex",
                   backgroundColor: "var(--color-toolbar-bg)",
-                  width: '100%',
-                  height: 'auto',
-                  
+                  width: "100%",
+                  height: "auto",
                 }}
               >
                 {/* <Square /> */}
@@ -54,7 +51,7 @@ export default function RootLayout({ children }) {
                   display: "flex",
                   overflow: "hidden",
                   justifyContent: "center",
-                  alignItems: 'center',
+                  alignItems: "center",
                   width: "100%",
                   height: "100%",
                 }}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 58ce194..137332b 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,32 +1,16 @@
-import styled from "styled-components";
-
-const ButtonWrapper = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 1.1rem;
-  border: none;
-  background-color: var(--color-header-button);
-  padding: 15px;
-  border-radius: 15px;
-  cursor: pointer;
-  width: auto;
-  color: var(--color-header-text);
-  transition: background-color 0.2s ease, color 0.2s ease;
-
-  &:hover {
-    background-color: var(--color-header-button-hover);
-    color: var(--color-header-text-hover);
-  }
-`;
-
-export default function Button({ children, type = "button", ...props }) {
+export default function Button({
+  children,
+  type = "button",
+  className = "",
+  ...props
+}) {
   return (
-    <>
-      <ButtonWrapper type={type} {...props}>
-        {children}
-      </ButtonWrapper>
-    </>
+    <button
+      type={type}
+      className={`button__button_wrapper ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
   );
 }
diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx
index 2c4e42b..af6bd01 100644
--- a/src/components/Calendar.jsx
+++ b/src/components/Calendar.jsx
@@ -1,30 +1,13 @@
 "use client";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import moment from "moment";
-import styled from "styled-components";
+
 import { useEffect, useState } from "react";
 import { useCalendar } from "@/context/CalendarContext";
 import EventFormModal from "./EventFormModal";
 import DeleteEventModal from "./DeleteEventModal";
 import { useRouter } from "next/navigation";
 
-const CalendarWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  height: 75vh;
-  width: 90vw;
-  padding: 10px;
-  box-sizing: border-box;
-`;
-
-const CalendarSizing = styled.div`
-  flex-grow: 1;
-  width: 100%;
-  max-width: 1200px;
-  height: 100%;
-`;
-
 const localizer = momentLocalizer(moment);
 
 export default function UserCalendar() {
@@ -113,8 +96,8 @@ export default function UserCalendar() {
   return (
     <>
       <div key={theme}>
-        <CalendarWrapper>
-          <CalendarSizing>
+        <div className="calendar__wrapper">
+          <div className="calendar__sizing">
             <Calendar
               key={user?.id || "calendar"}
               localizer={localizer}
@@ -128,12 +111,7 @@ export default function UserCalendar() {
               onSelectSlot={handleSelectSlot}
               onSelectEvent={(event) => setEventToDelete(event)}
               onNavigate={(date) => setDate(date)}
-              style={{
-                minHeight: "494px",
-                height: "100%",
-                minWidth: "452px",
-                boxShadow: "2px 3px 6px 4px rgba(0, 0, 0, 0.1)",
-              }}
+              className="calendar__component"
             />
             {showModal && <EventFormModal start={modalStart} end={modalEnd} />}
             {eventToDelete && typeof eventToDelete === "object" && (
@@ -147,8 +125,8 @@ export default function UserCalendar() {
                 }}
               />
             )}
-          </CalendarSizing>
-        </CalendarWrapper>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/src/components/CalendarSkeletion.jsx b/src/components/CalendarSkeletion.jsx
index dcae73a..37d8ed0 100644
--- a/src/components/CalendarSkeletion.jsx
+++ b/src/components/CalendarSkeletion.jsx
@@ -1,20 +1,11 @@
-'use client'
-import styled from "styled-components";
-
-const SkeletonWrapper = styled.div`
-  flex-grow: 1;          // fill the remaining space next to Sidebar
-  padding: 50px 20px 50px 50px;
-  height: 80vh;
-`;
+"use client";
 
 const CalendarSkeleton = () => {
   return (
-    <>
-        <SkeletonWrapper>
-            <p>Loading calendar...</p>
-        </SkeletonWrapper>
-    </>
-  )
-}
+    <div className="calendar__wrapper">
+      <div className="calendar__component">Loading calendar...</div>
+    </div>
+  );
+};
 
-export default CalendarSkeleton
\ No newline at end of file
+export default CalendarSkeleton;
diff --git a/src/components/ContactTabInModal.jsx b/src/components/ContactTabInModal.jsx
index 8c8693f..5f3958c 100644
--- a/src/components/ContactTabInModal.jsx
+++ b/src/components/ContactTabInModal.jsx
@@ -1,111 +1,52 @@
 "use client";
 import Image from "next/image";
-import styled from "styled-components";
-
-const TabWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  background-color: ${({ isSelected }) =>
-    isSelected
-      ? "var(--color-selected-contact-bg)"
-      : "var(--color-notselected-contact-bg)"};
-  color: #fff;
-  transition: background-color 0.2s ease;
-`;
-
-const UserContactIconWrapper = styled.div`
-  min-width: 13%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 7px 20px 7px 15px;
-  color: var(--color-contacts-text);
-`;
-
-const UserContactIcon = styled.button`
-  cursor: pointer;
-  border: none;
-  height: 40px;
-  width: 40px;
-  border-radius: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--color-user-icon);
-  color: var(--color-contacts-icon-text);
-`;
-
-const ContactSnippetWrapper = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  flex-grow: 1;
-  font-size: 1.2rem;
-  font-weight: 500;
-  padding: 10px;
-`;
-
-const ContactSnippet = styled.button`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-contacts-text);
-  cursor: pointer;
-  border: none;
-  background-color: inherit;
-  font-size: 1.2rem;
-`;
-
-const ContactFunctionWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: auto;
-  height: 100%;
-  position: relative;
-`;
 
 export default function ContactTabInModal({ contact, isSelected, onToggle }) {
   const trashcanImage = "/images/trashcan.png";
 
   return (
-    <TabWrapper isSelected={isSelected}>
-      <UserContactIconWrapper>
-        <UserContactIcon type="button" onClick={() => onToggle(contact.id)}>
+    <div
+      className={`contacts__tab-wrapper${
+        isSelected ? " contacts__tab-wrapper--selected" : ""
+      }`}
+    >
+      <div className="contacts__user-contact-icon-wrapper">
+        <button
+          className="contacts__user-contact-icon"
+          type="button"
+          onClick={() => onToggle(contact.id)}
+        >
           {contact.username?.slice(0, 2).toUpperCase()}
-        </UserContactIcon>
-      </UserContactIconWrapper>
-
-      <ContactSnippetWrapper>
-        <ContactSnippet type="button" onClick={() => onToggle(contact.id)}>{contact.username}</ContactSnippet>
-      </ContactSnippetWrapper>
-      <ContactFunctionWrapper>
+        </button>
+      </div>
+      <div className="contacts__contact-snippet-wrapper">
+        <button
+          className="contacts__contact-snippet"
+          type="button"
+          onClick={() => onToggle(contact.id)}
+        >
+          {contact.username}
+        </button>
+      </div>
+      <div className="contacts__contact-function-wrapper">
         <button
+          className="contacts__delete-contact-btn"
           type="button"
           onClick={() => onToggle(contact.id)}
-          style={{
-            border: "none",
-            backgroundColor: "transparent",
-            cursor: "pointer",
-          }}
         >
           <Image
             src={trashcanImage}
             width={25}
             height={50}
             alt="Toggle contact"
-            style={{
-              margin: "0 10px",
-              objectFit: "contain",
-              opacity: isSelected ? 1 : 0.4,
-              transform: isSelected ? "rotate(0deg)" : "rotate(20deg)",
-            }}
+            className={`contacts__delete-contact-icon${
+              isSelected
+                ? " contacts__delete-contact-icon--selected"
+                : " contacts__delete-contact-icon--notselected"
+            }`}
           />
         </button>
-      </ContactFunctionWrapper>
-    </TabWrapper>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/ContactsSkeleton.jsx b/src/components/ContactsSkeleton.jsx
index 08a7e2f..cc456c5 100644
--- a/src/components/ContactsSkeleton.jsx
+++ b/src/components/ContactsSkeleton.jsx
@@ -1,20 +1,11 @@
-'use client'
-import styled from "styled-components";
-
-const SkeletonWrapper = styled.div`
-  flex-grow: 1;          // fill the remaining space next to Sidebar
-  padding: 50px 20px 50px 50px;
-  height: 80vh;
-`;
+"use client";
 
 const ContactsSkeleton = () => {
   return (
-    <>
-        <SkeletonWrapper>
-            <div style={{fontSize: '3.5rem', padding: '0 0 50px 0', display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: '1', minHeight: '80vh'}}>Loading...</div>
-        </SkeletonWrapper>
-    </>
-  )
-}
+    <div className="contacts__section-wrapper">
+      <div className="contacts__empty-message">Loading...</div>
+    </div>
+  );
+};
 
-export default ContactsSkeleton
\ No newline at end of file
+export default ContactsSkeleton;
diff --git a/src/components/DeleteEventModal.jsx b/src/components/DeleteEventModal.jsx
index 3725e17..49310a7 100644
--- a/src/components/DeleteEventModal.jsx
+++ b/src/components/DeleteEventModal.jsx
@@ -1,104 +1,9 @@
 "use client";
-import styled from "styled-components";
+
 import ModalButton from "./ModalButton";
 import { useEffect, useState } from "react";
 import UserOnEventInModal from "./UserOnEventInModal";
 
-const ModalWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-const ModalForm = styled.form`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 70%;
-  max-width: ;
-`;
-
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10;
-`;
-
-const ModalButtonWrapper = styled.div`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  width: 100%;
-`;
-
-const ModalFormContainer = styled.div`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  flex-flow: column nowrap;
-  background-color: white;
-  height: auto;
-  width: 60%;
-  padding: 30px;
-  border-radius: 10px;
-  min-width: 315px;
-  max-width: 450px;
-`;
-
-const TextContainerLeftAlign = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  text-align: left;
-  width: 80%;
-  min-width: 100px;
-`;
-
-const TextContainerCenterAlign = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: left;
-  width: 100%;
-  min-width: 100px;
-  textalign: "center";
-`;
-
-const TitleBar = styled.input`
-  width: 80%;
-  font-size: 1.1rem;
-  margin: 0 0 20px 0;
-`;
-
-const AddDatesContainers = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 80%;
-  flex-flow: column nowrap;
-`;
-
-const ContactsAddedContainer = styled.div`
-  width: 80%;
-  max-height: 220px;
-  background-color: #fff;
-  margin: 0 0 20px 0;
-  overflow-y: auto;
-`;
-
-const TextContainer = styled.div`
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
-
 export default function DeleteEventModal({ event, onCancel, onConfirm }) {
   const [users, setUsers] = useState([]);
 
@@ -114,101 +19,61 @@ export default function DeleteEventModal({ event, onCancel, onConfirm }) {
 
   return (
     <>
-      <ModalOverlay>
-        <ModalWrapper>
-          <ModalForm>
-            <ModalFormContainer>
-              <TextContainer>
-                <TextContainerCenterAlign>
-                  <p style={{ paddingBottom: "5px 0" }}>Event Title:</p>
-                </TextContainerCenterAlign>
-                <p
-                  style={{
-                    display: "flex",
-                    justifyContent: "center",
-                    width: "100%",
-                    padding: "0 0 15px 0",
-                    fontWeight: "bold",
-                    fontSize: "1.2rem",
-                  }}
-                >
-                  {event.title}
-                </p>
-                <AddDatesContainers>
+      <div className="modal__overlay">
+        <div className="modal__wrapper">
+          <form className="modal__form">
+            <div className="modal__form-container">
+              <div className="modal__delete-modal-text-container">
+                <div className="modal__text-container-center-align">
+                  <p className="modal__delete-modal-title">Event Title:</p>
+                </div>
+                <p className="modal__delete-modal-event-title">{event.title}</p>
+                <div className="modal__add-dates-containers">
                   <div>
-                    <TextContainerCenterAlign>
-                      <p style={{ padding: "5px 0" }}>Start Time:</p>
-                    </TextContainerCenterAlign>
-                    <p
-                      style={{
-                        display: "flex",
-                        justifyContent: "center",
-                        width: "100%",
-                        padding: "0 0 15px 0",
-                        fontWeight: "bold",
-                        fontSize: "1.2rem",
-                      }}
-                    >
+                    <div className="modal__text-container-center-align">
+                      <p className="modal__delete-modal-label">Start Time:</p>
+                    </div>
+                    <p className="modal__delete-modal-event-date">
                       {event.start
                         ? new Date(event.start).toLocaleString()
                         : "N/A"}
                     </p>
                   </div>
                   <div>
-                    <TextContainerCenterAlign>
-                      <p style={{ padding: "5px 0" }}>End Time:</p>
-                    </TextContainerCenterAlign>
-                    <p
-                      style={{
-                        display: "flex",
-                        justifyContent: "center",
-                        width: "100%",
-                        padding: "0 0 15px 0",
-                        fontWeight: "bold",
-                        fontSize: "1.2rem",
-                      }}
-                    >
+                    <div className="modal__text-container-center-align">
+                      <p className="modal__delete-modal-label">End Time:</p>
+                    </div>
+                    <p className="modal__delete-modal-event-date">
                       {event.end ? new Date(event.end).toLocaleString() : "N/A"}
                     </p>
                   </div>
-                </AddDatesContainers>
-                <TextContainerCenterAlign>
-                  <p style={{ padding: "5px 0" }}>Invited Contacts</p>
-                </TextContainerCenterAlign>
+                </div>
+                <div className="modal__text-container-center-align">
+                  <p className="modal__delete-modal-label">Invited Contacts</p>
+                </div>
 
-                <ContactsAddedContainer>
+                <div className="modal__contacts-added-container">
                   {users.length > 0 ? (
                     users.map((user) => (
                       <UserOnEventInModal key={user.id} user={user} />
                     ))
                   ) : (
-                    <TextContainerCenterAlign>
-                      <p
-                        style={{
-                          display: "flex",
-                          justifyContent: "center",
-                          backgroundColor: "#fff",
-                          width: "auto",
-                          padding: "0 0 15px 0",
-                          fontSize: "1rem",
-                          fontWeight: "bold",
-                          textAlign: "center",
-                        }}
-                      >
+                    <div className="modal__text-container-center-align">
+                      <p className="modal__delete-modal-no-contacts">
                         No contacts were invited
                       </p>
-                    </TextContainerCenterAlign>
+                    </div>
                   )}
-                </ContactsAddedContainer>
-                <ModalButtonWrapper>
+                </div>
+                <div className="modal__button-wrapper">
                   <ModalButton onClick={onConfirm}>Delete</ModalButton>
                   <ModalButton onClick={onCancel}>Cancel</ModalButton>
-                </ModalButtonWrapper>
-              </TextContainer>
-            </ModalFormContainer>
-          </ModalForm>
-        </ModalWrapper>
-      </ModalOverlay>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/components/DetailsContactTab.jsx b/src/components/DetailsContactTab.jsx
index 8cf9755..bb37c07 100644
--- a/src/components/DetailsContactTab.jsx
+++ b/src/components/DetailsContactTab.jsx
@@ -1,119 +1,45 @@
 "use client";
 import { useCalendar } from "@/context/CalendarContext";
 import Image from "next/image";
-import styled from "styled-components";
-
-const TabWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  background-color: var(--color-toolbar-label);
-  color: #fff;
-`;
-
-const UserContactIconWrapper = styled.div`
-  min-width: 13%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 7px 20px 7px 15px;
-  color: var(--color-contacts-text);
-`;
-
-const UserContactIcon = styled.div`
-  height: 60px;
-  width: 60px;
-  border-radius: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.1rem;
-  background-color: var(--color-user-icon);
-  color: var(--color-contacts-icon-text);
-`;
-
-const ContactSnippetWrapper = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  flex-grow: 1;
-  font-size: 1.2rem;
-  font-weight: 500;
-  padding: 10px;
-`;
-
-const ContactSnippet = styled.div`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  color: var(--color-contacts-text);
-`;
-
-const AddContactButton = styled.button`
-  border: 0;
-  background-color: inherit;
-  font-size: 1.6rem;
-  width: auto;
-  padding: 0 10px;
-  cursor: pointer;
-  margin: 0 10px;
-`;
-
-const ContactFunctionWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 10%;
-  height: 100%;
-  position: relative;
-`;
 
 export default function DetailsContactTab({ contact }) {
   const trashcanImage = "/images/trashcan.png";
-
   const { contacts, addContacts, deleteContact } = useCalendar();
   const contactExists = contacts.some((c) => c.id === contact.id);
 
   return (
-    <TabWrapper>
-      <UserContactIconWrapper>
-        <UserContactIcon>
+    <div className="contacts__tab-wrapper">
+      <div className="contacts__user-contact-icon-wrapper">
+        <div className="contacts__user-contact-icon">
           {contact.username.slice(0, 2).toUpperCase()}
-        </UserContactIcon>
-      </UserContactIconWrapper>
-      <ContactSnippetWrapper>
-        <ContactSnippet>{contact.username}</ContactSnippet>
-      </ContactSnippetWrapper>
-
+        </div>
+      </div>
+      <div className="contacts__contact-snippet-wrapper">
+        <div className="contacts__contact-snippet">{contact.username}</div>
+      </div>
       {!contactExists ? (
-        <AddContactButton onClick={() => addContacts(contact.id)}>
+        <button
+          className="contacts__add-contact-button"
+          onClick={() => addContacts(contact.id)}
+        >
           +
-        </AddContactButton>
+        </button>
       ) : (
-        <>
-          <ContactFunctionWrapper>
-            <button
-              style={{ border: "none", backgroundColor: "rgba(0,0,0,0)" }}
-              onClick={() => deleteContact(contact.id)}
-            >
-              <Image
-                src={trashcanImage}
-                width={25}
-                height={50}
-                alt="Delete contact icon"
-                style={{
-                  margin: "0 10px",
-                  objectFit: "contain",
-                  cursor: "pointer",
-                }}
-              />
-            </button>
-          </ContactFunctionWrapper>
-        </>
+        <div className="contacts__contact-function-wrapper">
+          <button
+            className="contacts__delete-contact-btn"
+            onClick={() => deleteContact(contact.id)}
+          >
+            <Image
+              src={trashcanImage}
+              width={25}
+              height={50}
+              alt="Delete contact icon"
+              className="contacts__delete-contact-icon contacts__delete-contact-icon--selected"
+            />
+          </button>
+        </div>
       )}
-    </TabWrapper>
+    </div>
   );
 }
diff --git a/src/components/DetailsContainer.jsx b/src/components/DetailsContainer.jsx
index e6a9fd4..f924b14 100644
--- a/src/components/DetailsContainer.jsx
+++ b/src/components/DetailsContainer.jsx
@@ -1,82 +1,33 @@
 "use client";
 import { useCalendar } from "@/context/CalendarContext";
-import styled from "styled-components";
+
 import { usePathname } from "next/navigation";
 import DetailsContactTab from "./DetailsContactTab";
 import SearchBar from "./SearchBar";
 
-const ComponentWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 95%;
-  flex-flow: column;
-  width: 60%;
-`;
-
-const ContactsSectionWrapper = styled.div`
-  flex-flow: column nowrap;
-  width: 100%;
-  height: 100%;
-  max-width: 1200px;
-  box-sizing: border-box;
-  border: 2px solid black;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: var(--color-contacts-container-bg);
-  color: var(--color-contacts-text);
-  overflow-y: auto;
-  margin-bottom: 40px;
-
-  &::-webkit-scrollbar {
-    border-bottom-right-radius: 8px;
-    border-top-right-radius: 8px;
-  }
-`;
-
-const TabsLayout = styled.div`
-  border-bottom: 1px solid black;
-  width: 100%;
-  height: auto;
-  display: flex;
-`;
-
-const EmptyInfoWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  font-size: 1.4rem;
-  text-align: center;
-`;
-
-const TextContainerLeftAlign = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  text-align: left;
-  width: 100%;
-`;
-
 export default function DetailsContainer() {
   const { messages, contacts, searchTerm, result } = useCalendar();
   const pathname = usePathname();
 
   return (
-    <ComponentWrapper>
-      <div style={{width: '100%'}}>
-        <SearchBar /> 
+    <div className="contacts__component-wrapper">
+      <div className="contacts__searchbar-container">
+        <SearchBar />
       </div>
 
-      <TextContainerLeftAlign><h2 style={{paddingTop: '20px'}}>Your Contacts</h2></TextContainerLeftAlign>
-      <ContactsSectionWrapper>
+      <div className="contacts__text-container-left-align">
+        <h2 className="contacts__title">Your Contacts</h2>
+      </div>
+      <div className="contacts__section-wrapper">
         {pathname.startsWith("/messages") ? (
           //message section below
           <>
             {messages?.length === 0 ? (
-              <EmptyInfoWrapper>
-                <h1 style={{padding: '20px'}}>You have no Messages</h1>
-              </EmptyInfoWrapper>
+              <div className="contacts__empty-info-wrapper">
+                <h1 className="contacts__empty-message">
+                  You have no Messages
+                </h1>
+              </div>
             ) : (
               <>
                 {messages?.map((message, i) => (
@@ -94,40 +45,42 @@ export default function DetailsContainer() {
             {Array.isArray(contacts) &&
             contacts.length === 0 &&
             searchTerm.length < 3 ? (
-              <EmptyInfoWrapper>
-                <h1 style={{padding: '20px'}}>Your Contacts List is empty...</h1>
-              </EmptyInfoWrapper>
+              <div className="contacts__empty-info-wrapper">
+                <h1 className="contacts__empty-message">
+                  Your Contacts List is empty...
+                </h1>
+              </div>
             ) : Array.isArray(contacts) &&
               contacts.length > 0 &&
               searchTerm.length < 3 ? (
               <>
                 {contacts.map((contact, i) => (
-                  <TabsLayout key={i}>
+                  <div className="tabs-layout" key={i}>
                     <DetailsContactTab contact={contact} />
-                  </TabsLayout>
+                  </div>
                 ))}
               </>
             ) : searchTerm.length >= 3 && result.length > 0 ? (
               <>
                 {result.map((contact, i) => (
-                  <TabsLayout key={i}>
+                  <div className="contacts__tabs-layout" key={i}>
                     <DetailsContactTab contact={contact} />
-                  </TabsLayout>
+                  </div>
                 ))}
               </>
             ) : searchTerm.length >= 3 && result.length === 0 ? (
-              <EmptyInfoWrapper>
-                <h1 style={{padding: '20px'}}>No results found</h1>
-              </EmptyInfoWrapper>
+              <div className="contacts__empty-info-wrapper">
+                <h1 className="contacts__empty-message">No results found</h1>
+              </div>
             ) : (
-              <EmptyInfoWrapper>
-                <h1 style={{padding: '20px'}}>Loading...</h1>
-              </EmptyInfoWrapper>
+              <div className="contacts__empty-info-wrapper">
+                <h1 className="contacts__empty-message">Loading...</h1>
+              </div>
             )}
           </>
           //end contacts section
         )}
-      </ContactsSectionWrapper>
-    </ComponentWrapper>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/EventFormModal.jsx b/src/components/EventFormModal.jsx
index 5ed5663..7dd2a13 100644
--- a/src/components/EventFormModal.jsx
+++ b/src/components/EventFormModal.jsx
@@ -1,111 +1,20 @@
 "use client";
 import { useCalendar } from "@/context/CalendarContext";
 import { useState } from "react";
-import styled from "styled-components";
+
 import ContactTabInModal from "./ContactTabInModal";
 import ModalButton from "./ModalButton";
 
-const ModalWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-const ModalForm = styled.form`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 70%;
-`;
-
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10;
-`;
-
-const ModalButtonWrapper = styled.div`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  width: 100%;
-`;
-
-const ModalFormContainer = styled.div`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  flex-flow: column nowrap;
-  background-color: white;
-  height: auto;
-  width: 60%;
-  padding: 30px;
-  border-radius: 10px;
-  min-width: 315px;
-`;
-
-const TextContainerLeftAlign = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  text-align: left;
-  width: 80%;
-`;
-
-const TitleBar = styled.input`
-  width: 80%;
-  font-size: 1.1rem;
-  margin: 0 0 20px 0;
-`;
-
-const AddDatesContainers = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 80%;
-  flex-flow: row nowrap;
-
-  @media (max-width: 1588px) {
-    flex-flow: column nowrap;
-  }
-`;
-
-const StartTimeBar = styled.input`
-  width: auto;
-  font-size: 1.1rem;
-  margin: 0 0 20px 0;
-
-  @media (max-width: 1588px) {
-    width: 100%;
-  }
-`;
-
-const EndTimeBar = styled.input`
-  width: auto;
-  font-size: 1.1rem;
-  margin: 0 0 20px 0;
-
-  @media (max-width: 1588px) {
-    width: 100%;
-  }
-`;
-
-const ContactsAddedContainer = styled.div`
-  width: 80%;
-  max-height: 220px;
-  background-color: #fff;
-  margin: 0 0 20px 0;
-  overflow-y: auto;
-`;
-
 export default function EventFormModal({ start, end }) {
-  const { showModal, setShowModal, contacts, addEvent, setEvents, user, refreshEvents } =
-    useCalendar();
+  const {
+    showModal,
+    setShowModal,
+    contacts,
+    addEvent,
+    setEvents,
+    user,
+    refreshEvents,
+  } = useCalendar();
 
   const [title, setTitle] = useState("");
   const [selectContacts, setSelectContacts] = useState([]);
@@ -173,46 +82,49 @@ export default function EventFormModal({ start, end }) {
 
   return (
     <>
-      <ModalOverlay>
-        <ModalWrapper>
-          <ModalForm onSubmit={handleSubmit}>
-            <ModalFormContainer>
-              <TextContainerLeftAlign>
+      <div className="modal__overlay">
+        <div className="modal__wrapper">
+          <form className="modal__form" onSubmit={handleSubmit}>
+            <div className="modal__form-container">
+              <div className="modal__text-container-left-align">
                 <h4>Event Title:</h4>
-              </TextContainerLeftAlign>
-              <TitleBar
+              </div>
+              <input
+                className="modal__title-bar"
                 placeholder="Title..."
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
               />
 
-              <AddDatesContainers>
+              <div className="modal__add-dates-containers">
                 <div>
-                  <TextContainerLeftAlign>
+                  <div className="modal__text-container-left-align">
                     <h4>Start Time:</h4>
-                  </TextContainerLeftAlign>
-                  <StartTimeBar
+                  </div>
+                  <input
+                    className="modal__start-time-bar"
                     type="datetime-local"
                     value={startTime ? formatLocalDateTime(startTime) : ""}
                     onChange={(e) => setStartTime(new Date(e.target.value))}
                   />
                 </div>
                 <div>
-                  <TextContainerLeftAlign>
+                  <div className="modal__text-container-left-align">
                     <h4>End Time:</h4>
-                  </TextContainerLeftAlign>
-                  <EndTimeBar
+                  </div>
+                  <input
+                    className="modal__end-time-bar"
                     type="datetime-local"
                     value={endTime ? formatLocalDateTime(endTime) : ""}
                     onChange={(e) => setEndTime(new Date(e.target.value))}
                   />
                 </div>
-              </AddDatesContainers>
+              </div>
 
-              <TextContainerLeftAlign>
+              <div className="modal__text-container-left-align">
                 <h4>Add Contacts</h4>
-              </TextContainerLeftAlign>
-              <ContactsAddedContainer>
+              </div>
+              <div className="modal__contacts-added-container">
                 {contacts.map((contact) => (
                   <ContactTabInModal
                     key={contact.id}
@@ -227,9 +139,9 @@ export default function EventFormModal({ start, end }) {
                     }}
                   />
                 ))}
-              </ContactsAddedContainer>
+              </div>
 
-              <ModalButtonWrapper>
+              <div className="modal__button-wrapper">
                 <ModalButton type="submit">Confirm</ModalButton>
                 <ModalButton
                   type="button"
@@ -243,11 +155,11 @@ export default function EventFormModal({ start, end }) {
                 >
                   Cancel
                 </ModalButton>
-              </ModalButtonWrapper>
-            </ModalFormContainer>
-          </ModalForm>
-        </ModalWrapper>
-      </ModalOverlay>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 0f0c414..87d4714 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,35 +1,10 @@
 "use client";
 import { useCalendar } from "@/context/CalendarContext";
-import styled from "styled-components";
 import { useRouter } from "next/navigation";
 import Square from "./Square";
 import Button from "./Button";
 import Link from "next/link";
 
-const HeaderWrapper = styled.div`
-  height: auto;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  gap: 5px;
-  align-items: center;
-  margin: 0 20px 0 0;
-`;
-
-const WelcomeText = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  color: var(--color-header-button);
-`;
-
 export default function Header() {
   const { user, isLoggedIn, logoutUser, toggleDarkMode, theme } = useCalendar();
 
@@ -57,10 +32,10 @@ export default function Header() {
 
   return (
     <>
-      <HeaderWrapper>
+      <div className="header__wrapper">
         <Square />
         {isLoggedIn ? (
-          <ButtonContainer>
+          <div className="header__button-container">
             <Link href={"/"}>
               <Button>Calendar</Button>
             </Link>
@@ -73,18 +48,18 @@ export default function Header() {
               <Button onClick={() => toggleDarkMode()}>Light</Button>
             )}
             <Button onClick={() => handleLogout()}>Logout</Button>
-          </ButtonContainer>
+          </div>
         ) : (
-          <ButtonContainer>
+          <div className="header__button-container">
             <Link href={"/login"}>
               <Button>Login</Button>
             </Link>
             <Link href={"/register"}>
               <Button>Register</Button>
             </Link>
-          </ButtonContainer>
+          </div>
         )}
-      </HeaderWrapper>
+      </div>
     </>
   );
 }
diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx
index 866e109..0cff8af 100644
--- a/src/components/LoginForm.jsx
+++ b/src/components/LoginForm.jsx
@@ -1,5 +1,5 @@
 "use client";
-import styled from "styled-components";
+
 import { useCalendar } from "@/context/CalendarContext";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
@@ -7,38 +7,6 @@ import Button from "@/components/Button";
 import Link from "next/link";
 import RedirectPath from "@/components/Redirect";
 
-const LoginWrapper = styled.div`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  height: 100%;
-  flex-direction: column;
-  width: 300px;
-`;
-
-const LoginFormWrapper = styled.div`
-  height: auto;
-  padding: 20px;
-  background-color: var(--color-toolbar-bg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 15px;
-`;
-
-const InputBoxes = styled.input`
-  padding: 10px;
-  font-size: 1.2rem;
-  width: 100%;
-  margin: 10px 0;
-  border-radius: 5px;
-  border: none;
-
-  &:focus {
-    border: none;
-  }
-`;
-
 export default function LoginForm() {
   const { loginUser } = useCalendar();
   const [loginData, setLoginData] = useState({
@@ -73,7 +41,6 @@ export default function LoginForm() {
         console.error(error);
         return;
       }
-
       if (data.user) {
         loginUser(data.user);
         setLoginData({ username: "", password: "" });
@@ -91,22 +58,14 @@ export default function LoginForm() {
   return (
     <>
       <RedirectPath />
-      <LoginWrapper>
+      <div className="login">
         <div>
           <div>
-            <h1 style={{ fontSize: "2.8rem", marginBottom: "10px" }}>Login</h1>
-            <LoginFormWrapper>
-              <form
-                onSubmit={handleLoginUser}
-                style={{
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "space-evenly",
-                  alignItems: "center",
-                }}
-              >
-                <InputBoxes
+            <h1 className="login__title">Login</h1>
+            <div className="login__form-wrapper">
+              <form onSubmit={handleLoginUser} className="login__form">
+                <input
+                  className="login__input-boxes"
                   placeholder="Username"
                   type="text"
                   name="username"
@@ -114,7 +73,8 @@ export default function LoginForm() {
                   onChange={handleLoginChange}
                   required
                 />
-                <InputBoxes
+                <input
+                  className="login__input-boxes"
                   placeholder="Password"
                   type="password"
                   name="password"
@@ -122,44 +82,22 @@ export default function LoginForm() {
                   onChange={handleLoginChange}
                   required
                 />
-                <Button
-                  style={{
-                    marginTop: "20px",
-                    width: "130px",
-                    fontWeight: "600",
-                  }}
-                  type="submit"
-                >
+                <Button className="login__btn" type="submit">
                   Login
                 </Button>
               </form>
-            </LoginFormWrapper>
+            </div>
           </div>
-          {error && (
-            <p
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                textAlign: "center",
-                color: "var(--color-error-text)",
-                marginTop: "20px",
-              }}
-            >
-              {error}
-            </p>
-          )}
-          <div
-            style={{ marginTop: "20px", width: "100%", textAlign: "center" }}
-          >
+          {error && <p className="login__error">{error}</p>}
+          <div className="login__register-link">
             Don&apos;t have an account?{" "}
-            <Link href={"/register"}>
+            <Link href="/register">
               <u>Create one!</u>
             </Link>
           </div>
         </div>
         <div></div>
-      </LoginWrapper>
+      </div>
     </>
   );
 }
diff --git a/src/components/ModalButton.jsx b/src/components/ModalButton.jsx
index 0d78002..53284a2 100644
--- a/src/components/ModalButton.jsx
+++ b/src/components/ModalButton.jsx
@@ -1,32 +1,17 @@
-import styled from "styled-components";
 
-const ButtonWrapper = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 1.1rem;
-  border: none;
-  background-color: var(--color-modal-button);
-  padding: 15px;
-  border-radius: 15px;
-  cursor: pointer;
-  width: auto;
-  color: var(--color-modal-text);
-  transition: background-color 0.2s ease, color 0.2s ease;
-
-  &:hover {
-    background-color: var(--color-modal-button-hover);
-    color: var(--color-modal-text);
-  }
-`;
-
-export default function ModalButton({ children, type = "button", ...props }) {
+export default function ModalButton({
+  children,
+  type = "button",
+  className = "",
+  ...props
+}) {
   return (
-    <>
-      <ButtonWrapper type={type} {...props}>
-        {children}
-      </ButtonWrapper>
-    </>
+    <button
+      type={type}
+      className={`button__modal-button ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
   );
 }
diff --git a/src/components/RegisterForm.jsx b/src/components/RegisterForm.jsx
index 9e0124c..64fe2e9 100644
--- a/src/components/RegisterForm.jsx
+++ b/src/components/RegisterForm.jsx
@@ -1,5 +1,5 @@
 "use client";
-import styled from "styled-components";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useCalendar } from "@/context/CalendarContext";
@@ -7,38 +7,6 @@ import Button from "@/components/Button";
 import Link from "next/link";
 import RedirectPath from "@/components/Redirect";
 
-const RegisterWrapper = styled.div`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  height: 100%;
-  flex-direction: column;
-  width: 300px;
-`;
-
-const RegisterFormWrapper = styled.div`
-  height: auto;
-  padding: 20px;
-  background-color: var(--color-toolbar-bg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 15px;
-`;
-
-const InputBoxes = styled.input`
-  padding: 10px;
-  font-size: 1.2rem;
-  width: 100%;
-  margin: 10px 0;
-  border-radius: 5px;
-  border: none;
-
-  &:focus {
-    border: none;
-  }
-`;
-
 export default function RegisterForm() {
   const { loginUser } = useCalendar();
 
@@ -103,85 +71,53 @@ export default function RegisterForm() {
   return (
     <>
       <RedirectPath />
-      <RegisterWrapper>
+      <div className="register__wrapper">
         <div>
-          <div>
-            <h1 style={{ fontSize: "2.8rem", marginBottom: "10px" }}>
-              Register
-            </h1>
-            <RegisterFormWrapper>
-              <form
-                onSubmit={handleCreateUser}
-                style={{
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "space-evenly",
-                  alignItems: "center",
-                }}
-              >
-                <InputBoxes
-                  placeholder="Username"
-                  type="text"
-                  name="username"
-                  value={registerData.username}
-                  onChange={handleRegisterChange}
-                  required
-                />
-                <InputBoxes
-                  placeholder="Password"
-                  type="password"
-                  name="password"
-                  value={registerData.password}
-                  onChange={handleRegisterChange}
-                  required
-                />
-                <InputBoxes
-                  placeholder="Confirm password"
-                  type="password"
-                  name="confirmPassword"
-                  value={registerData.confirmPassword}
-                  onChange={handleRegisterChange}
-                  required
-                />
-                <Button
-                  style={{
-                    marginTop: "20px",
-                    width: "130px",
-                    fontWeight: "600",
-                  }}
-                  type="submit"
-                >
-                  Register
-                </Button>
-              </form>
-            </RegisterFormWrapper>
+          <h1 className="register__title">Register</h1>
+          <div className="register__form-wrapper">
+            <form onSubmit={handleCreateUser} className="register__form">
+              <input
+                className="register__input-boxes"
+                placeholder="Username"
+                type="text"
+                name="username"
+                value={registerData.username}
+                onChange={handleRegisterChange}
+                required
+              />
+              <input
+                className="register__input-boxes"
+                placeholder="Password"
+                type="password"
+                name="password"
+                value={registerData.password}
+                onChange={handleRegisterChange}
+                required
+              />
+              <input
+                className="register__input-boxes"
+                placeholder="Confirm Password"
+                type="password"
+                name="confirmPassword"
+                value={registerData.confirmPassword}
+                onChange={handleRegisterChange}
+                required
+              />
+              <Button className="register__btn" type="submit">
+                Register
+              </Button>
+            </form>
           </div>
-          {error && (
-            <p
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                textAlign: "center",
-                color: "var(--color-error-text)",
-                marginTop: "20px",
-              }}
-            >
-              {error}
-            </p>
-          )}
-          <div
-            style={{ marginTop: "20px", width: "100%", textAlign: "center" }}
-          >
+          {error && <p className="register__error">{error}</p>}
+          <div className="register__login-link">
             Already have an account?{" "}
-            <Link href={"/register"}>
-              <u>Log in!</u>
+            <Link href="/login">
+              <u>Login!</u>
             </Link>
           </div>
         </div>
-        <div></div>
-      </RegisterWrapper>
+        <div />
+      </div>
     </>
   );
 }
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 8ccf7cc..6997a1e 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -1,28 +1,5 @@
 "use client";
 import { useCalendar } from "@/context/CalendarContext";
-import styled from "styled-components";
-
-const SearchBarWrapper = styled.div`
-  width: 100%;
-  height: auto;
-  margin: 5px 0 10px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Search = styled.input`
-  font-size: 1.3rem;
-  width: 100%;
-  max-width: 1200px;
-  padding: 10px;
-  border-radius: 5px;
-  border: 2px solid black;
-
-  &:focus {
-    outline: none;
-  }
-`;
 
 export default function SearchBar() {
   const { user, setResult, searchTerm, setSearchTerm } = useCalendar();
@@ -47,14 +24,15 @@ export default function SearchBar() {
 
   return (
     <>
-      <SearchBarWrapper>
-        <Search
+      <div className="searchbar">
+        <input
+          className="searchbar__input"
           type="text"
           placeholder="Find new contacts..."
           value={searchTerm}
           onChange={handleSearch}
         />
-      </SearchBarWrapper>
+      </div>
     </>
   );
 }
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 2d1d60e..be6f1d7 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -2,75 +2,9 @@
 import { useCalendar } from "@/context/CalendarContext";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import styled from "styled-components";
-
-const SidebarWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 80%;
-  background-color: lavender;
-  border-radius: 8px;
-  box-shadow: 4px 6px 5px 3px rgba(0, 0, 0, 0.1);
-  min-width: 130px;
-  max-width: 130px;
-  flex-flow: column nowrap;
-  margin: 10px 0 0 10px;
-`;
-
-const SidebarTabContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-flow: column nowrap;
-  width: 100%;
-  gap: 5px;
-  height: 90%;
-`;
-
-const SidebarTab = styled(Link)`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  padding: 3px;
-  width: 100%;
-  border: 1px solid white;
-  height: 40px;
-  color: black;
-  background-color: rgb(187, 151, 194);
-  cursor: pointer;
-  border-radius: 7px;
-
-  &:first-of-type {
-    margin-top: 10px;
-  }
-
-    &:hover {
-  background-color: rgb(149, 114, 156)
-  }
-`;
-
-const SidebarTabDiv = styled.button`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  padding: 3px;
-  width: 100%;
-  border: 1px solid white;
-  height: 40px;
-  color: black;
-  background-color: rgb(187, 151, 194);
-  cursor: pointer;
-  border-radius: 7px;
-  font-size: 1rem;
-
-  &:hover {
-  background-color: rgb(149, 114, 156)
-  }
-`;
 
 export default function Sidebar() {
-  const { isLoggedIn, logoutUser, toggleDarkMode} = useCalendar();
+  const { isLoggedIn, logoutUser, toggleDarkMode } = useCalendar();
 
   const router = useRouter();
 
@@ -96,27 +30,36 @@ export default function Sidebar() {
 
   return (
     <>
-      <SidebarWrapper>
-        <SidebarTabContainer>
-          <SidebarTab href="/">Calendar</SidebarTab>
-          <SidebarTab href="/contacts">Contacts</SidebarTab>
-          
+      <div className="sidebar">
+        <div className="sidebar__tab-container">
+          <Link href="/" className="sidebar__tab">
+            Calendar
+          </Link>
+          <Link href="/contacts" className="sidebar__tab">
+            Contacts
+          </Link>
           {isLoggedIn ? (
-            <SidebarTabDiv
+            <button
+              className="sidebar__tab sidebar__tab--div"
               onClick={() => {
                 handleLogout();
               }}
             >
               Logout
-            </SidebarTabDiv>
+            </button>
           ) : (
             <>
-              <SidebarTab href="/login">Login</SidebarTab>
-              <SidebarTab href="/register">Create account</SidebarTab>
+              <Link href="/login" className="sidebar__tab">
+                Login
+              </Link>
+              <Link href="/register" className="sidebar__tab">
+                Create account
+              </Link>
             </>
-          )}<button onClick={() => toggleDarkMode()}>Toggle</button>
-        </SidebarTabContainer>
-      </SidebarWrapper>
+          )}
+          <button onClick={() => toggleDarkMode()}>Toggle</button>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/components/Square.jsx b/src/components/Square.jsx
index 6b2659e..dcd33f5 100644
--- a/src/components/Square.jsx
+++ b/src/components/Square.jsx
@@ -1,69 +1,32 @@
 "use client";
-import styled from "styled-components";
+
 import Image from "next/image";
 import Link from "next/link";
 
-const SquareWrapper = styled.div`
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const SquareContent = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-  background-color: rgba(0, 0, 0, 0);
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  box-shadow: 4px 6px 5px 3px rgba(0, 0, 0, 0);
-`;
-
 export default function Square() {
   return (
     <>
-      <SquareWrapper>
-        <SquareContent>
-          {/* <Image
-          className="logo"
-            src="/images/PlanzLogo.png"
-            height={125}
-            width={100}
-            alt="Planz Logo"
-            style={{ objectFit: "contain", padding: '9px' }}
-          /> */}
+      <div className="calendar__square-wrapper">
+        <div className="calendar__square-content">
           <Link href={"/"}>
             <Image
-              className="logo"
+              className="calendar__logo"
               src={"/images/PlanzCalendar.png"}
               width={100}
               height={90}
               alt="Planz Calendar Logo"
-              style={{ padding: "10px" }}
             />
           </Link>
-
-          <div
-            style={{
-              display: "flex",
-              alignContent: "flex-end",
-              height: "100%",
-            }}
-          >
+          <div className="calendar__square-logo-text">
             <Image
               src={"/images/PlanzText.png"}
               width={190}
               height={60}
               alt="Planz Text Logo"
-              style={{marginLeft: '10px'}}
             />
           </div>
-        </SquareContent>
-      </SquareWrapper>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/components/UserOnEventInModal.jsx b/src/components/UserOnEventInModal.jsx
index f60ba93..7bbe022 100644
--- a/src/components/UserOnEventInModal.jsx
+++ b/src/components/UserOnEventInModal.jsx
@@ -1,82 +1,20 @@
 "use client";
-import styled from "styled-components";
 
-const TabWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  background-color: ${({ isSelected }) =>
-    isSelected
-      ? "var(--color-selected-contact-bg)"
-      : "var(--color-notselected-contact-bg)"};
-  color: #fff;
-  transition: background-color 0.2s ease;
-`;
-
-const UserContactIconWrapper = styled.div`
-  min-width: 13%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 7px 20px 7px 15px;
-  color: var(--color-contacts-text);
-`;
-
-const UserContactIcon = styled.button`
-  border: none;
-  height: 40px;
-  width: 40px;
-  border-radius: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--color-user-icon);
-  color: var(--color-contacts-icon-text);
-`;
-
-const ContactSnippetWrapper = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  flex-grow: 1;
-  font-size: 1.2rem;
-  font-weight: 500;
-  padding: 10px;
-`;
-
-const ContactSnippet = styled.div`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-contacts-text);
-`;
-
-const ContactFunctionWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: auto;
-  height: 100%;
-  position: relative;
-`;
-
-
-export default function UserOnEventInModal({ user }) {
-
-    return (
-        <TabWrapper>
-          <UserContactIconWrapper>
-            <UserContactIcon>
-              {user.username?.slice(0, 2).toUpperCase()}
-            </UserContactIcon>
-          </UserContactIconWrapper>
-    
-          <ContactSnippetWrapper>
-            <ContactSnippet>{user.username}</ContactSnippet>
-          </ContactSnippetWrapper>
-        
-        </TabWrapper>
-      );
-}
\ No newline at end of file
+export default function UserOnEventInModal({ user, isSelected }) {
+  return (
+    <div
+      className={`contacts__tab-wrapper${
+        isSelected ? " contacts__tab-wrapper--selected" : ""
+      }`}
+    >
+      <div className="contacts__user-contact-icon-wrapper">
+        <button className="contacts__user-contact-icon">
+          {user.username?.slice(0, 2).toUpperCase()}
+        </button>
+      </div>
+      <div className="contacts__contact-snippet-wrapper">
+        <div className="contacts__contact-snippet">{user.username}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles/_custom-calendar.scss b/src/styles/_custom-calendar.scss
new file mode 100644
index 0000000..5dbbde5
--- /dev/null
+++ b/src/styles/_custom-calendar.scss
@@ -0,0 +1,163 @@
+.rbc-toolbar {
+  background-color: var(--color-toolbar-bg);
+  color: var(--color-toolbar-label);
+  padding: 1rem;
+  font-size: 1.2rem;
+  border-radius: 9px;
+  display: flex;
+}
+
+.rbc-toolbar-label {
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
+.rbc-event,
+.rbc-event:focus,
+.rbc-event.rbc-selected {
+  border-radius: 8px;
+  padding: 4px;
+  font-size: 0.9rem;
+  background-color: var(--color-calendar-event-bg);
+  color: var(--color-calendar-event-text);
+  width: 90%;
+  margin-left: 6px;
+}
+
+.rbc-today {
+  border: 2px solid var(--color-calendar-border);
+}
+
+.rbc-month-view {
+  border-radius: 9px;
+  border: none;
+  background-color: var(--color-calendar-bg);
+  padding: 0 8px 8px 8px;
+  gap: 4px;
+}
+
+.rbc-month-row {
+  border-top: none !important;
+}
+
+.rbc-month-row:last-of-type .rbc-row-bg .rbc-day-bg:first-of-type {
+  border-bottom-left-radius: 9px;
+}
+
+.rbc-month-row:last-of-type .rbc-row-bg .rbc-day-bg:last-of-type {
+  border-bottom-right-radius: 9px;
+}
+
+.rbc-day-bg {
+  background-color: var(--color-calendar-numbers);
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 7px;
+  max-width: none;
+  height: 100%;
+}
+
+.rbc-date-cell {
+  margin: auto;
+}
+
+.rbc-calendar {
+  border-radius: 9px;
+  background-color: var(--color-calendar-bg);
+}
+
+.rbc-header {
+  background-color: var(--color-calendar-numbers);
+  color: var(--color-calendar-border);
+  font-size: 1rem;
+  border-radius: 15px;
+  height: auto;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: none;
+  margin: 1px 3px;
+  padding: 3px;
+}
+
+.rbc-time-slot {
+  color: black;
+}
+
+.rbc-time-view {
+  background-color: rgb(216, 216, 216);
+}
+
+.rbc-allday-cell .rbc-row-bg {
+  padding: 2px;
+}
+
+.rbc-month-header,
+.rbc-row-bg,
+.rbc-row {
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+}
+
+.rbc-month-header,
+.rbc-row-content,
+.rbc-row-bg,
+.rbc-month-view {
+  gap: 4px;
+}
+
+.rbc-row-content {
+  width: 99.5%;
+}
+
+.rbc-current button.rbc-button-link {
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 3px;
+}
+
+.rbc-toolbar button {
+  background-color: var(--color-toolbar-button);
+  color: var(--color-toolbar-text);
+  font-weight: normal;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  border: 1px solid #ccc;
+  padding: 6px 12px;
+  font-size: 0.9rem;
+}
+
+.rbc-toolbar button.rbc-active {
+  background-color: var(--color-toolbar-button-active) !important;
+  color: var(--color-toolbar-label);
+  font-weight: 600;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+}
+
+.rbc-toolbar button:hover {
+  background-color: var(--color-toolbar-button-hover);
+  color: var(--color-toolbar-label);
+}
+
+.rbc-toolbar button.rbc-active:hover {
+  background-color: var(--color-toolbar-button-active) !important;
+  color: var(--color-toolbar-label);
+}
+
+.rbc-button-link {
+  color: var(--color-calendar-border);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 875px) {
+  .rbc-toolbar {
+    flex-direction: column;
+  }
+  .rbc-toolbar-label {
+    margin: 10px 0;
+  }
+}
diff --git a/src/styles/common/_button.scss b/src/styles/common/_button.scss
new file mode 100644
index 0000000..39d42ba
--- /dev/null
+++ b/src/styles/common/_button.scss
@@ -0,0 +1,44 @@
+.button {
+  
+  &__modal-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 1.1rem;
+    border: none;
+    background-color: var(--color-modal-button);
+    padding: 15px;
+    border-radius: 15px;
+    cursor: pointer;
+    width: auto;
+    color: var(--color-modal-text);
+    transition: background-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-modal-button-hover);
+      color: var(--color-modal-text);
+    }
+  }
+
+  &__button_wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 1.1rem;
+    border: none;
+    background-color: var(--color-header-button);
+    padding: 15px;
+    border-radius: 15px;
+    cursor: pointer;
+    width: auto;
+    color: var(--color-header-text);
+    transition: background-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-header-button-hover);
+      color: var(--color-header-text-hover);
+    }
+  }
+}
diff --git a/src/styles/common/_calendar.scss b/src/styles/common/_calendar.scss
new file mode 100644
index 0000000..993a5bd
--- /dev/null
+++ b/src/styles/common/_calendar.scss
@@ -0,0 +1,58 @@
+.calendar {
+
+  &__square-wrapper {
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__square-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    background-color: rgba(0, 0, 0, 0);
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    box-shadow: 4px 6px 5px 3px rgba(0, 0, 0, 0);
+  }
+
+  &__logo {
+    object-fit: contain;
+    padding: 10px;
+  }
+
+  &__square-logo-text {
+    display: flex;
+    align-content: flex-end;
+    height: 100%;
+    margin-left: 10px;
+  }
+
+  &__wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 75vh;
+    width: 90vw;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  &__sizing {
+    flex-grow: 1;
+    width: 100%;
+    max-width: 1200px;
+    height: 100%;
+  }
+
+  &__component {
+    min-height: 494px;
+    height: 100%;
+    min-width: 452px;
+    box-shadow: 2px 3px 6px 4px rgba(0, 0, 0, 0.1);
+  }
+}
diff --git a/src/styles/common/_contacts.scss b/src/styles/common/_contacts.scss
new file mode 100644
index 0000000..bf7e82d
--- /dev/null
+++ b/src/styles/common/_contacts.scss
@@ -0,0 +1,157 @@
+.contacts {
+    
+  &__tab-wrapper {
+    width: 100%;
+    display: flex;
+    background-color: var(--color-toolbar-label);
+    color: #fff;
+  }
+
+  &__user-contact-icon-wrapper {
+    min-width: 13%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 7px 20px 7px 15px;
+    color: var(--color-contacts-text);
+  }
+
+  &__user-contact-icon {
+    height: 60px;
+    width: 60px;
+    border-radius: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.1rem;
+    background-color: var(--color-user-icon);
+    color: var(--color-contacts-icon-text);
+  }
+
+  &__contact-snippet-wrapper {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    flex-grow: 1;
+    font-size: 1.2rem;
+    font-weight: 500;
+    padding: 10px;
+  }
+
+  &__contact-snippet {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    color: var(--color-contacts-text);
+  }
+
+  &__add-contact-button {
+    border: 0;
+    background-color: inherit;
+    font-size: 1.6rem;
+    width: auto;
+    padding: 0 10px;
+    cursor: pointer;
+    margin: 0 10px;
+  }
+
+  &__contact-function-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 10%;
+    height: 100%;
+    position: relative;
+  }
+
+  &__delete-contact-btn {
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  &__delete-contact-icon {
+    margin: 0 10px;
+    object-fit: contain;
+    cursor: pointer;
+  }
+
+  &__delete-contact-icon--selected {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  &__delete-contact-icon--notselected {
+    opacity: 0.4;
+    transform: rotate(20deg);
+  }
+
+  &__component-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 95%;
+    flex-flow: column;
+    width: 60%;
+  }
+
+  &__contacts-section-wrapper {
+    flex-flow: column nowrap;
+    width: 100%;
+    height: 100%;
+    max-width: 1200px;
+    box-sizing: border-box;
+    border: 2px solid black;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: var(--color-contacts-container-bg);
+    color: var(--color-contacts-text);
+    overflow-y: auto;
+    margin-bottom: 40px;
+  }
+
+  &__contacts-section-wrapper::-webkit-scrollbar {
+    border-bottom-right-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  &__tabs-layout {
+    border-bottom: 1px solid black;
+    width: 100%;
+    height: auto;
+    display: flex;
+  }
+
+  &__empty-info-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 1.4rem;
+    text-align: center;
+  }
+
+  &__contacts-empty-message {
+    padding: 20px;
+  }
+
+  &__text-container-left-align {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    text-align: left;
+    width: 100%;
+  }
+
+  &__contacts-title {
+    padding-top: 20px;
+  }
+
+  &__contacts-searchbar-container {
+    width: 100%;
+  }
+}
diff --git a/src/styles/common/_event_modal.scss b/src/styles/common/_event_modal.scss
new file mode 100644
index 0000000..6b6a5ff
--- /dev/null
+++ b/src/styles/common/_event_modal.scss
@@ -0,0 +1,151 @@
+.modal {
+  
+  &__delete-modal-text-container {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__delete-modal-title {
+    padding-bottom: 5px;
+  }
+
+  &__delete-modal-event-title {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 0 0 15px 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+
+  &__delete-modal-label {
+    padding: 5px 0;
+  }
+
+  &__delete-modal-event-date {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 0 0 15px 0;
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+
+  &__delete-modal-no-contacts {
+    display: flex;
+    justify-content: center;
+    background-color: #fff;
+    width: auto;
+    padding: 0 0 15px 0;
+    font-size: 1rem;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  &__modal-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__modal-form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 70%;
+  }
+
+  &__modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+  }
+
+  &__modal-button-wrapper {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__modal-form-container {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-flow: column nowrap;
+    background-color: white;
+    height: auto;
+    width: 60%;
+    padding: 30px;
+    border-radius: 10px;
+    min-width: 315px;
+  }
+
+  &__text-container-left-align {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    text-align: left;
+    width: 80%;
+  }
+
+  &__title-bar {
+    width: 80%;
+    font-size: 1.1rem;
+    margin: 0 0 20px 0;
+  }
+
+  &__add-dates-containers {
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+    flex-flow: row nowrap;
+  }
+
+  @media (max-width: 1588px) {
+    &__add-dates-containers {
+      flex-flow: column nowrap;
+    }
+  }
+
+  &__start-time-bar {
+    width: auto;
+    font-size: 1.1rem;
+    margin: 0 0 20px 0;
+  }
+
+  @media (max-width: 1588px) {
+    &__start-time-bar {
+      width: 100%;
+    }
+  }
+
+  &__end-time-bar {
+    width: auto;
+    font-size: 1.1rem;
+    margin: 0 0 20px 0;
+  }
+  
+  @media (max-width: 1588px) {
+    &__end-time-bar {
+      width: 100%;
+    }
+  }
+
+  &__contacts-added-container {
+    width: 80%;
+    max-height: 220px;
+    background-color: #fff;
+    margin: 0 0 20px 0;
+    overflow-y: auto;
+  }
+}
diff --git a/src/styles/common/_header.scss b/src/styles/common/_header.scss
new file mode 100644
index 0000000..b8597e5
--- /dev/null
+++ b/src/styles/common/_header.scss
@@ -0,0 +1,26 @@
+.header {
+
+  &__wrapper {
+    height: auto;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__button-container {
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+    align-items: center;
+    margin: 0 20px 0 0;
+  }
+
+  &__welcome-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    color: var(--color-header-button);
+  }
+}
diff --git a/src/styles/common/_login.scss b/src/styles/common/_login.scss
new file mode 100644
index 0000000..0427ee1
--- /dev/null
+++ b/src/styles/common/_login.scss
@@ -0,0 +1,68 @@
+.login {
+
+  &__wrapper {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+    flex-direction: column;
+    width: 300px;
+  }
+
+  &__form-wrapper {
+    height: auto;
+    padding: 20px;
+    background-color: var(--color-toolbar-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15px;
+  }
+
+  &__input-boxes {
+    padding: 10px;
+    font-size: 1.2rem;
+    width: 100%;
+    margin: 10px 0;
+    border-radius: 5px;
+    border: none;
+  }
+
+  &__input-boxes:focus {
+    border: none;
+  }
+
+  &__title {
+    font-size: 2.8rem;
+    margin-bottom: 10px;
+  }
+
+  &__form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  &__btn {
+    margin-top: 20px;
+    width: 100%;
+    font-weight: 600;
+  }
+
+  &__error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: var(--color-error-text);
+    margin-top: 20px;
+  }
+
+  &__register-link {
+    margin-top: 20px;
+    width: 100%;
+    text-align: center;
+  }
+}
diff --git a/src/styles/common/_register.scss b/src/styles/common/_register.scss
new file mode 100644
index 0000000..a095b32
--- /dev/null
+++ b/src/styles/common/_register.scss
@@ -0,0 +1,67 @@
+.register {
+  &__wrapper {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+    flex-direction: column;
+    width: 300px;
+  }
+
+  &__form-wrapper {
+    height: auto;
+    padding: 20px;
+    background-color: var(--color-toolbar-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15px;
+  }
+
+  &__input-boxes {
+    padding: 10px;
+    font-size: 1.2rem;
+    width: 100%;
+    margin: 10px 0;
+    border-radius: 5px;
+    border: none;
+
+    &:focus {
+      border: none;
+    }
+  }
+
+  &__title {
+    font-size: 2.8rem;
+    margin-bottom: 10px;
+  }
+
+  &__form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  &__btn {
+    margin-top: 20px;
+    width: 100%;
+    font-weight: 600;
+  }
+
+  &__error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: var(--color-error-text);
+    margin-top: 20px;
+  }
+
+  &__login-link {
+    margin-top: 20px;
+    width: 100%;
+    text-align: center;
+  }
+}
diff --git a/src/styles/common/_searchbar.scss b/src/styles/common/_searchbar.scss
new file mode 100644
index 0000000..60b6f36
--- /dev/null
+++ b/src/styles/common/_searchbar.scss
@@ -0,0 +1,24 @@
+.searchbar {
+    
+  &__wrapper {
+    width: 100%;
+    height: auto;
+    margin: 5px 0 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__input {
+    font-size: 1.3rem;
+    width: 100%;
+    max-width: 1200px;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid black;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
diff --git a/src/styles/common/_sidebar.scss b/src/styles/common/_sidebar.scss
new file mode 100644
index 0000000..5ed923a
--- /dev/null
+++ b/src/styles/common/_sidebar.scss
@@ -0,0 +1,48 @@
+.sidebar {
+    
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 80%;
+    background-color: lavender;
+    border-radius: 8px;
+    box-shadow: 4px 6px 5px 3px rgba(0, 0, 0, 0.1);
+    min-width: 130px;
+    max-width: 130px;
+    flex-flow: column nowrap;
+    margin: 10px 0 0 10px;
+  }
+
+  &__tab-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-flow: column nowrap;
+    width: 100%;
+    gap: 5px;
+    height: 90%;
+  }
+
+  &__tab {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 3px;
+    width: 100%;
+    border: 1px solid white;
+    height: 40px;
+    color: black;
+    background-color: rgb(187, 151, 194);
+    cursor: pointer;
+    border-radius: 7px;
+    font-size: 1rem;
+  }
+
+  &__tab:first-of-type {
+    margin-top: 10px;
+    &:hover {
+      background-color: rgb(149, 114, 156);
+    }
+  }
+}
diff --git a/src/styles/custom-calendar.css b/src/styles/custom-calendar.css
deleted file mode 100644
index 23a169f..0000000
--- a/src/styles/custom-calendar.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.rbc-toolbar {
-  background-color: var(--color-toolbar-bg);
-  color: var(--color-toolbar-label);
-  padding: 1rem;
-  font-size: 1.2rem;
-  border-radius: 9px;
-}
-
-.rbc-event {
-  border-radius: 8px;
-  padding: 4px;
-  font-size: 0.9rem;
-  background-color: var(--color-event-bg);
-  color: var(--color-event-text);
-}
-
-.rbc-today {
-  border: 1px solid var(--color-today-border);
-}
-
-.rbc-month-view {
-  border-radius: 9px;
-}
-
-.rbc-month-row:last-of-type .rbc-row-bg .rbc-day-bg:first-of-type {
-  border-bottom-left-radius: 9px;
-}
-
-.rbc-month-row:last-of-type .rbc-row-bg .rbc-day-bg:last-of-type {
-  border-bottom-right-radius: 9px;
-}
-
-.rbc-day-bg {
-  background-color: var(--color-calendar-bg);
-  border: 1px solid var(--color-calendar-border);
-}
-
-.rbc-calendar {
-  border-radius: 9px;
-}
-
-.rbc-header {
-  background-color: var(--color-header-bg);
-}
-
-.rbc-toolbar button {
-  background-color: var(--color-toolbar-button);
-  color: var(--color-toolbar-label);
-  border: 1px solid #ccc;
-  padding: 6px 12px;
-  transition: background-color 0.2s ease;
-}
-
-.rbc-toolbar button.rbc-active {
-  background-color: var(--color-toolbar-button-active);
-  color: var(--color-toolbar-label);
-  font-weight: 600;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-}
-
-.rbc-toolbar button.rbc-active:hover,
-.rbc-toolbar button:hover {
-  background-color: var(--color-toolbar-button-hover);
-  color: var(--color-toolbar-label);
-}
-
-.rbc-toolbar-label {
-  font-size: 1.6rem;
-  font-weight: 700;
-}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..91f9335
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,10 @@
+@import './common/_header.scss';
+@import './common/_button.scss';
+@import './common/_calendar.scss';
+@import './common/_contacts.scss';
+@import './common/_event_modal.scss';
+@import './common/_login.scss';
+@import './common/_register.scss';
+@import './common/_searchbar.scss';
+@import './common/_sidebar.scss';
+@import './_custom-calendar.scss';