diff --git a/src/AppContainer.tsx b/src/AppContainer.tsx
index d446ec014..26b2cdf30 100644
--- a/src/AppContainer.tsx
+++ b/src/AppContainer.tsx
@@ -4,15 +4,9 @@ import { useLocation } from "react-router-dom";
 import { Footer } from "./components/Layout/Footer";
 import { NavigationBar, leftNavItems, rightNavItems } from "./components/Layout/NavigationBar";
 import { Routes, routes } from "./routes";
-import styled from "@emotion/styled";
 import { useProviderContext } from "./common/contexts/provider";
 import { getChainInfo } from "./common/utils/chain-utils";
 
-const Main = styled.main`
-  background-image: url("/static/images/common/wave-lines.png");
-  background-size: cover;
-`;
-
 const AppContainer = (): React.ReactElement => {
   const location = useLocation();
   const [toggleNavBar, setToggleNavBar] = useState(false);
@@ -36,9 +30,12 @@ const AppContainer = (): React.ReactElement => {
         leftItems={leftNavItems}
         rightItems={rightNavItems}
       />
-      <Main className="bg-cerulean-50 flex-1">
+      <main
+        className="bg-cerulean-50 flex-1 bg-cover"
+        style={{ backgroundImage: "url('/static/images/common/wave-lines.png')" }}
+      >
         <Routes routes={routes} />
-      </Main>
+      </main>
       <Footer />
       <Overlay />
     </div>
diff --git a/src/common/utils/getDropzoneBoxUi.ts b/src/common/utils/getDropzoneBoxUi.ts
index f6a2f0ff8..15587d0dc 100644
--- a/src/common/utils/getDropzoneBoxUi.ts
+++ b/src/common/utils/getDropzoneBoxUi.ts
@@ -1,7 +1,7 @@
 enum DropzoneBoxUiState {
   DRAG_REJECT = "border-red-400 bg-red-100",
-  DRAG_ACTIVE = "border-green-400 bg-green-50",
-  DRAG_ACCEPT = "border-green-400 bg-green-50",
+  DRAG_ACTIVE = "border-emerald-400 bg-emerald-50",
+  DRAG_ACCEPT = "border-emerald-400 bg-emerald-50",
   VERIFICATION_PENDING = "border-cloud-100 bg-white",
   VERIFICATION_ERROR = "border-red-400 bg-red-100",
   ACTION_ERROR = "border-red-400 bg-red-100",
diff --git a/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx b/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx
index 662629369..0866b403a 100644
--- a/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx
+++ b/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx
@@ -7,28 +7,6 @@ import { EndorsementChain, TitleEscrowEvent } from "../../../types";
 import { TooltipIcon } from "../../UI/SvgIcon";
 import { EndorsementChainError } from "./EndorsementChainError";
 import { EndorsementChainLoading } from "./EndorsementChainLoading";
-import styled from "@emotion/styled";
-
-const EndorsementChainDataStyle = styled.div`
-  & > *:first-of-type {
-    .dot-path {
-      bottom: 0;
-      height: 50%;
-    }
-  }
-
-  & > *:last-of-type {
-    // for desktop screen
-    .dot-path {
-      height: 50%;
-    }
-
-    // for mobile screen
-    .path {
-      height: 0;
-    }
-  }
-`;
 
 interface EndorsementChainLayout {
   endorsementChain?: EndorsementChain;
@@ -191,7 +169,7 @@ const DetailsEntity: React.FunctionComponent<DetailsEntityProps> = ({ title, add
   return (
     <div className="w-full lg:w-1/3" data-testid={`row-event-${title}`}>
       <div className="flex flex-nowrap pr-8">
-        <div className="relative flex-shrink-0 lg:hidden" style={{ width: "40px" }}>
+        <div className="relative shrink-0 lg:hidden" style={{ width: "40px" }}>
           <div className="absolute left-0 right-0 mx-auto h-full">
             <div className="absolute top-0 left-1/2 h-full border-l border-dashed border-cerulean path" />
           </div>
@@ -222,10 +200,10 @@ const EndorsementChainData: React.FunctionComponent<any> = ({ index, data }) =>
     <div className="flex flex-wrap items-center" data-testid={`row-event-${index}`}>
       <div className="w-full lg:w-1/3">
         <div className="flex flex-nowrap">
-          <div className="relative flex-shrink-0 lg:order-2" style={{ width: "40px" }}>
+          <div className="relative shrink-0 lg:order-2" style={{ width: "40px" }}>
             <div className="absolute left-0 right-0 mx-auto h-full">
               <div className="absolute left-1/2 h-full border-l border-dashed border-cerulean dot-path" />
-              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-cerulean h-3 w-3" />
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cerulean h-3 w-3" />
             </div>
           </div>
           <div className="lg:ml-auto lg:order-1">
@@ -276,11 +254,11 @@ export const EndorsementChainLayout: FunctionComponent<EndorsementChainLayout> =
 
         {pending && !endorsementChain && !error && <EndorsementChainLoading />}
         {!pending && endorsementChain && !error && (
-          <EndorsementChainDataStyle>
+          <div className="endorsement-chain">
             {historyChain.map((item, key) => (
               <EndorsementChainData index={key} data={item} key={key} />
             ))}
-          </EndorsementChainDataStyle>
+          </div>
         )}
         {!pending && !endorsementChain && error && <EndorsementChainError error={error} />}
       </div>
diff --git a/src/components/EtaPageContent/EtaPageContent.tsx b/src/components/EtaPageContent/EtaPageContent.tsx
index 317f2b104..d5b6c632d 100644
--- a/src/components/EtaPageContent/EtaPageContent.tsx
+++ b/src/components/EtaPageContent/EtaPageContent.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from "react";
 import { Link } from "react-router-dom";
 import { Button } from "@govtechsg/tradetrust-ui-components";
-import styled from "@emotion/styled";
 
 const SectionMap = () => {
   return (
@@ -70,17 +69,12 @@ const SectionMap = () => {
   );
 };
 
-const AmendedEta = styled.div`
-  background-image: url("/static/images/common/wave-lines-light.png");
-  background-size: cover;
-`;
-
 const SectionAmendedEta = () => {
   return (
     <section className="bg-white relative z-10">
-      <AmendedEta className="bg-cerulean rounded-lg text-white p-8 text-center lg:absolute left-0 right-0 max-w-4xl mx-auto transform lg:-translate-y-1/2">
+      <div className="bg-wave-lines-light bg-cover bg-cerulean rounded-lg text-white p-8 text-center lg:absolute left-0 right-0 max-w-4xl mx-auto lg:-translate-y-1/2">
         <h2>The amended ETA supports and complements the government’s trade digitalization initiatives.</h2>
-      </AmendedEta>
+      </div>
     </section>
   );
 };
diff --git a/src/components/Guidelines/GuidelinesContent.tsx b/src/components/Guidelines/GuidelinesContent.tsx
index 5c4857c12..3ca78b850 100644
--- a/src/components/Guidelines/GuidelinesContent.tsx
+++ b/src/components/Guidelines/GuidelinesContent.tsx
@@ -34,7 +34,7 @@ export const GuidelinesContent: FunctionComponent = () => {
             accordionIndex={index}
             setOpenIndex={setOpenIndex}
           >
-            <ReactMarkdown components={{ p: ({ ...props }) => <p style={{ marginBottom: "1rem" }} {...props} /> }}>
+            <ReactMarkdown components={{ p: ({ ...props }) => <p className={"mb-4"} {...props} /> }}>
               {guideline.body}
             </ReactMarkdown>
           </AccordionItem>
diff --git a/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx b/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx
index b689a4a68..3d4f67969 100644
--- a/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx
+++ b/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx
@@ -4,13 +4,6 @@ import { useOverlayContext, OverlayContent } from "@govtechsg/tradetrust-ui-comp
 import { PersonaProps } from "../../../types";
 import { Steps } from "./Steps";
 import { ContentType } from "../../../types";
-import styled from "@emotion/styled";
-
-const ModalBackground = styled.div`
-  background-image: url("/static/images/common/wave-lines-light-2.png");
-  background-size: cover;
-  margin: 0 -1.25rem;
-`;
 
 export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, details }) => {
   const { setOverlayVisible, showOverlay } = useOverlayContext();
@@ -37,7 +30,10 @@ export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, de
   return (
     <section id="persona-modal">
       <OverlayContent title="" className="max-h-9/10 text-white bg-cerulean rounded-xl">
-        <ModalBackground className="relative flex flex-col text-white flex p-5 overflow-auto h-auto">
+        <div
+          className="mx-5 my-0 bg-cover relative flex flex-col text-white p-5 overflow-auto h-auto"
+          style={{ backgroundImage: "url('/static/images/common/wave-lines-light-2.png')" }}
+        >
           <div className="flex flex-col justify-center">
             <div className="relative flex justify-center w-full">
               <h3 className="font-normal text-center">{details.learnMore.title}</h3>
@@ -97,7 +93,7 @@ export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, de
           >
             <h3 className="font-normal text-2xl">Get in Touch Now</h3>
           </Link>
-        </ModalBackground>
+        </div>
       </OverlayContent>
     </section>
   );
diff --git a/src/components/HomePageContent/HowItWorksSection/index.tsx b/src/components/HomePageContent/HowItWorksSection/index.tsx
index 0a9891e21..a9fdb3f64 100644
--- a/src/components/HomePageContent/HowItWorksSection/index.tsx
+++ b/src/components/HomePageContent/HowItWorksSection/index.tsx
@@ -3,12 +3,6 @@ import { Link } from "react-router-dom";
 import { DocumentContent } from "./DocumentContent";
 import { DocumentTypeContent } from "../../../types";
 import { DocumentTypeDetails } from "./DocumentTypeDetails";
-import styled from "@emotion/styled";
-
-const GetInTouchBackground = styled.div`
-  background-image: url("/static/images/common/wave-lines-light.png");
-  background-size: cover;
-`;
 
 enum DocumentType {
   VERIFIABLE_DOCUMENT = "Verifiable Documents",
@@ -71,11 +65,11 @@ export const HowItWorksSection: FunctionComponent = () => {
         <DocumentTypeDetails documentTypeContent={selectedDocumentTypeContent} />
 
         <div className="flex flex-col h-96 justify-center">
-          <GetInTouchBackground className="flex w-full h-64 mx-auto bg-cerulean rounded-xl text-white text-center justify-center items-center">
+          <div className="bg-wave-lines-light bg-cover flex w-full h-64 mx-auto bg-cerulean rounded-xl text-white text-center justify-center items-center">
             <h3 className="font-ubuntu text-4.5xl lg:mx-72">
               Ready to learn how TradeTrust can benefit your business?
             </h3>
-          </GetInTouchBackground>
+          </div>
           <Link
             to="/contact"
             className="px-4 py-2 mx-auto -mt-4 rounded-xl text-white bg-tangerine hover:bg-tangerine-600 hover:text-gray-200"
diff --git a/src/components/HomePageContent/MainBenefitsSection.tsx b/src/components/HomePageContent/MainBenefitsSection.tsx
index f3fbb28fa..31e79d62d 100644
--- a/src/components/HomePageContent/MainBenefitsSection.tsx
+++ b/src/components/HomePageContent/MainBenefitsSection.tsx
@@ -1,14 +1,9 @@
-import styled from "@emotion/styled";
 import React, { FunctionComponent } from "react";
 
-const Background = styled.div`
-  background-repeat: no-repeat;
-  background-size: 1920px auto; // assuming screens will not be wider than 1920px, otherwise this bg pattern needs to be repeatable-x
-  background-position: center 160px;
-  @media screen and (min-width: 1024px) {
-    background-image: url("/static/images/home/mainBenefits/single-wave.png");
-  }
-`;
+const backgroundStyling = {
+  backgroundSize: "1920px auto",
+  backgroundPosition: "center 160px",
+};
 
 interface MainBenefitsProps {
   details: MainBenefits;
@@ -80,7 +75,7 @@ const MainBenefitsElement: React.FunctionComponent<MainBenefitsProps> = ({ detai
 export const MainBenefitsSection: FunctionComponent = () => {
   return (
     <section id="main-benefits" className="bg-white text-gray-700 py-16">
-      <Background>
+      <div className="bg-no-repeat lg:bg-single-wave" style={backgroundStyling}>
         <div className="container">
           <div className="text-center">
             <h1 className="font-ubuntu text-cloud leading-none text-4xl lg:text-5xl">Main Benefits</h1>
@@ -94,7 +89,7 @@ export const MainBenefitsSection: FunctionComponent = () => {
             ))}
           </div>
         </div>
-      </Background>
+      </div>
     </section>
   );
 };
diff --git a/src/components/HomePageContent/WelcomeSection.tsx b/src/components/HomePageContent/WelcomeSection.tsx
index e90dd9d8e..752849667 100644
--- a/src/components/HomePageContent/WelcomeSection.tsx
+++ b/src/components/HomePageContent/WelcomeSection.tsx
@@ -1,11 +1,6 @@
 import React, { FunctionComponent, useContext } from "react";
 import { Link } from "react-router-dom";
 import { OverlayContext, Youtube } from "@govtechsg/tradetrust-ui-components";
-import styled from "@emotion/styled";
-
-const Background = styled.div`
-  background-image: url("/static/images/home/welcome/map.png");
-`;
 
 const DescriptionSection: FunctionComponent = () => {
   const { showOverlay } = useContext(OverlayContext);
@@ -14,7 +9,10 @@ const DescriptionSection: FunctionComponent = () => {
   };
   return (
     <section id="welcome" className="bg-cerulean-50 h-full text-gray-700 md:pt-16 mb-4">
-      <Background className="relative bg-135% bg-right-bottom bg-no-repeat py-16 md:bg-auto md:h-full md:bg-right-top">
+      <div
+        className="relative bg-135% bg-right-bottom bg-no-repeat py-16 md:bg-auto md:h-full md:bg-right-top"
+        style={{ backgroundImage: "url('/static/images/home/welcome/map.png')" }}
+      >
         <div className="container md:h-140">
           <div className="md:w-6/12">
             <div className="w-5/5 text-center md:py-8 md:text-left">
@@ -43,7 +41,7 @@ const DescriptionSection: FunctionComponent = () => {
             </div>
           </div>
         </div>
-      </Background>
+      </div>
     </section>
   );
 };
diff --git a/src/components/Layout/NetworkSelect/NetworkSelect.tsx b/src/components/Layout/NetworkSelect/NetworkSelect.tsx
index a1cfac0af..7cd90c65a 100644
--- a/src/components/Layout/NetworkSelect/NetworkSelect.tsx
+++ b/src/components/Layout/NetworkSelect/NetworkSelect.tsx
@@ -4,9 +4,9 @@ import {
   DropdownProps,
   OverlayContext,
   showDocumentTransferMessage,
+  IconError,
 } from "@govtechsg/tradetrust-ui-components";
 import React, { FunctionComponent, useContext } from "react";
-import styled from "@emotion/styled";
 import { ChainId, ChainInfoObject } from "../../../constants/chain-info";
 import { useProviderContext } from "../../../common/contexts/provider";
 import { getChainInfo } from "../../../common/utils/chain-utils";
@@ -33,7 +33,7 @@ interface DropdownItemLabelProps {
 const WrappedDropdown = (props: DropdownProps) => {
   const { children, className, ...rest } = props;
   return (
-    <div className={className}>
+    <div className={className} style={{ minWidth: "12.5em" }}>
       <Dropdown className="rounded-md py-1 pl-4 p-2 border border-gray-300 bg-white" {...rest}>
         {children}
       </Dropdown>
@@ -41,66 +41,21 @@ const WrappedDropdown = (props: DropdownProps) => {
   );
 };
 
-const StyledDropdown = styled(WrappedDropdown)`
-  display: inline-block;
-  min-width: 12.5rem;
-  font-size: 0.87rem;
-
-  span.select-msg {
-    padding: 0.25rem 0.7rem;
-    color: darkgrey;
-    cursor: default;
-  }
-`;
-
 /**
  * Label for the items of the dropdown list
  */
 const DropdownItemLabel: FunctionComponent<DropdownItemLabelProps> = ({ className, active, network }) => {
   return (
-    <div className={className} data-testid={`network-select-dropdown-label-${network.chainId}`}>
-      <img className="network-icon" src={network.iconImage} alt={network.label} />
-      <span className="label">{network.label}</span>
-      {active ? <span className="active" /> : null}
+    <div className={className}>
+      <div className="flex items-center" data-testid={`network-select-dropdown-label-${network.chainId}`}>
+        <img className="mr-2 w-5 h-5 rounded-full" src={network.iconImage} alt={network.label} />
+        <span className="w-full">{network.label}</span>
+        {active ? <span className="m-1 p-1 bg-emerald-500 rounded-lg justify-self-end" /> : null}
+      </div>
     </div>
   );
 };
 
-const StyledDropdownItemLabel = styled(DropdownItemLabel)`
-  display: flex;
-  align-items: center;
-
-  & img.network-icon {
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
-    margin-right: 0.5rem;
-  }
-
-  & span.label {
-    width: 100%;
-  }
-
-  & span.active {
-    padding: 0.25rem;
-    background-color: #27ae60;
-    border-radius: 0.5rem;
-    justify-self: flex-end;
-  }
-`;
-
-/**
- * Dropdown item label specially for unsupported networks
- */
-const DropdownUnsupportedLabel = styled.div`
-  color: #bb2323;
-
-  &::before {
-    content: "❌";
-    margin-right: 0.5rem;
-  }
-`;
-
 /**
  * Item component for the dropdown list
  */
@@ -109,7 +64,7 @@ const NetworkSelectDropdownItem = (props: NetworkSelectDropdownItemProps) => {
   return (
     <div className={className}>
       <DropdownItem {...rest}>
-        <StyledDropdownItemLabel network={network} active={active} />
+        <DropdownItemLabel network={network} active={active} />
       </DropdownItem>
     </div>
   );
@@ -132,22 +87,31 @@ const NetworkSelectView: FunctionComponent<NetworkSelectViewProps> = ({ onChange
     );
   });
 
-  let selectedLabel: React.ReactNode = <DropdownUnsupportedLabel>Unsupported Network</DropdownUnsupportedLabel>;
+  let selectedLabel: React.ReactNode = (
+    <div className="bg-white">
+      <IconError className="mr-2 w-5 h-5 rounded-full" />
+      Unsupported Network
+    </div>
+  );
   try {
     if (currentChainId) {
-      selectedLabel = <StyledDropdownItemLabel network={getChainInfo(currentChainId)} />;
+      selectedLabel = <DropdownItemLabel network={getChainInfo(currentChainId)} />;
     }
   } catch (e: any) {
     console.log(e.message);
   }
 
   return (
-    <StyledDropdown dropdownButtonText={selectedLabel} classNameShared="w-full max-w-xs">
+    <WrappedDropdown
+      dropdownButtonText={selectedLabel}
+      className="inline-block text-sm"
+      classNameShared="w-full max-w-xs"
+    >
       <div>
-        <span className="select-msg">Select a Network</span>
+        <span className="text-cloud-500 p-3 pr-8 cursor-default">Select a Network</span>
         {itemsList}
       </div>
-    </StyledDropdown>
+    </WrappedDropdown>
   );
 };
 
diff --git a/src/components/QrReader/qrReader.tsx b/src/components/QrReader/qrReader.tsx
index 56281cf1e..522582cdb 100644
--- a/src/components/QrReader/qrReader.tsx
+++ b/src/components/QrReader/qrReader.tsx
@@ -21,7 +21,7 @@ const QrReaderZone = ({ handleQrScanned }: QrReaderZoneProps): React.ReactElemen
       <video
         data-testid="qr-code-reader"
         ref={scannerRef}
-        className={"top-0 left-0 block absolute overflow-hidden w-full h-full object-cover transform scale-x-0"}
+        className={"top-0 left-0 block absolute overflow-hidden w-full h-full object-cover scale-x-0"}
       />
     </div>
   );
diff --git a/src/components/UI/Accordion/AccordionItem.tsx b/src/components/UI/Accordion/AccordionItem.tsx
index ef5d10646..370f58ce0 100644
--- a/src/components/UI/Accordion/AccordionItem.tsx
+++ b/src/components/UI/Accordion/AccordionItem.tsx
@@ -41,9 +41,7 @@ export const AccordionItem: FunctionComponent<AccordionItemProps> = ({
         {headingTag === "h5" && <h5>{heading}</h5>}
         <svg
           data-testid="accordion-icon"
-          className={`transition-transform duration-200 transform${
-            isOpen ? " rotate-180" : " rotate-0"
-          } min-w-min min-h-min`}
+          className={`transition-transform duration-200 ${isOpen ? " rotate-180" : " rotate-0"} min-w-min min-h-min`}
           width="24"
           height="24"
           viewBox="0 0 24 24"
diff --git a/src/components/UI/Banner/Banner.tsx b/src/components/UI/Banner/Banner.tsx
index e65db584e..110519f2d 100644
--- a/src/components/UI/Banner/Banner.tsx
+++ b/src/components/UI/Banner/Banner.tsx
@@ -13,10 +13,7 @@ export const Banner: FunctionComponent<BannerProps> = ({ className, title, butto
   return (
     <div className={`${className ? className : ""}`}>
       <div className="container">
-        <div
-          className="rounded-xl bg-cerulean bg-cover"
-          style={{ backgroundImage: "url('/static/images/common/wave-lines-light.png')" }}
-        >
+        <div className="rounded-xl bg-cerulean bg-cover bg-wave-lines-light">
           <div className="flex flex-wrap items-center px-4 py-6 text-white">
             <div className="px-2 w-full lg:w-2/3 mb-2 lg:mb-0">
               <h3 data-testid="banner-title">{title}</h3>
diff --git a/src/components/UI/LoaderSkeleton/LoaderSkeleton.tsx b/src/components/UI/LoaderSkeleton/LoaderSkeleton.tsx
index faa8de810..f7eddd3cb 100644
--- a/src/components/UI/LoaderSkeleton/LoaderSkeleton.tsx
+++ b/src/components/UI/LoaderSkeleton/LoaderSkeleton.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import React from "react";
 
 interface LoaderProps {
@@ -6,21 +5,6 @@ interface LoaderProps {
   width?: string;
 }
 
-const Loader = ({ className, ...props }: LoaderProps) => {
-  return <div className={`skeleton-loading ${className}`} {...props} />;
+export const LoaderSkeleton: React.FunctionComponent<LoaderProps> = ({ className, ...props }: LoaderProps) => {
+  return <div className={`skeleton-loading skeleton ${className}`} {...props} />;
 };
-
-export const LoaderSkeleton = styled(Loader)`
-  &:empty {
-    &::after {
-      content: "";
-      display: block;
-      background-repeat: no-repeat;
-      background-color: #e5e5e5;
-      background-image: linear-gradient(to left, #e5e5e5 0%, #f5f5f5 50%, #e5e5e5 100%);
-      background-size: 50% 100%;
-      height: 24px;
-      border-radius: 2px;
-    }
-  }
-`;
diff --git a/src/components/UI/ResourceWebinar/ResourceWebinar.tsx b/src/components/UI/ResourceWebinar/ResourceWebinar.tsx
index 6b11edeca..8030cdc91 100644
--- a/src/components/UI/ResourceWebinar/ResourceWebinar.tsx
+++ b/src/components/UI/ResourceWebinar/ResourceWebinar.tsx
@@ -70,7 +70,7 @@ export const ResourceWebinar: FunctionComponent<ResourceWebinarProps> = ({ title
                 return (
                   <DropdownItem
                     key={i}
-                    className={"break-words overflow-clip whitespace-normal text-cloud-900 "}
+                    className={"break-words text-clip whitespace-normal text-cloud-900 "}
                     data-testid="video-chapters-dropdown"
                     onClick={() => setCurrentTimeStamp(videoChapter.timeStamp)}
                   >
diff --git a/src/components/VerifyPageContent/DropZoneSection.tsx b/src/components/VerifyPageContent/DropZoneSection.tsx
index b223fa9d6..7623a0db4 100644
--- a/src/components/VerifyPageContent/DropZoneSection.tsx
+++ b/src/components/VerifyPageContent/DropZoneSection.tsx
@@ -35,8 +35,7 @@ const DraggableDemoCertificate: FunctionComponent<DraggableDemoCertificateProps>
             >
               <a href={getDemoCert(props.chainId)} download="demo.tt" rel="noindex nofollow" className="cursor-default">
                 <img
-                  className="absolute cursor-grab active:cursor-grabbing"
-                  style={{ top: "-40%" }}
+                  className="-top-2/5 absolute cursor-grab active:cursor-grabbing"
                   src="/static/images/dropzone/certificate.svg"
                 />
               </a>
diff --git a/src/pages/event/event.tsx b/src/pages/event/event.tsx
index 65ef5f01e..9b6b9a6d6 100644
--- a/src/pages/event/event.tsx
+++ b/src/pages/event/event.tsx
@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import React, { FunctionComponent, useState } from "react";
 import { isFuture, isPast } from "date-fns";
 import { Helmet } from "react-helmet";
@@ -7,20 +6,6 @@ import { Pagination, getPaginatedPosts, getPaginatedPagesTotal } from "@govtechs
 import { Page } from "../../components/Layout/Page";
 import { events } from ".";
 
-const CategoryFilter = styled.div`
-  h5 {
-    color: #b4bcc2;
-
-    &:hover {
-      color: #454b50;
-    }
-
-    &.active {
-      color: #454b50;
-    }
-  }
-`;
-
 enum Categories {
   ALL = "All",
   UPCOMING_EVENT = "Upcoming Event",
@@ -58,10 +43,12 @@ export const EventPage: FunctionComponent = () => {
         <title>TradeTrust - Events</title>
       </Helmet>
       <Page title="Event">
-        <CategoryFilter className="mt-2 mb-1">
+        <div className="mt-2 mb-1">
           {categories.map((item, index) => (
             <h5
-              className={`inline-block text-xl mr-4 cursor-pointer ${item === category ? "active" : ""}`}
+              className={`text-cloud-300 hover:text-cloud-900 inline-block text-xl mr-4 cursor-pointer ${
+                item === category ? "text-cloud-900" : ""
+              }`}
               key={index}
               data-testid="filter-category"
               onClick={() => {
@@ -73,7 +60,7 @@ export const EventPage: FunctionComponent = () => {
               {item}
             </h5>
           ))}
-        </CategoryFilter>
+        </div>
         <div className="flex flex-wrap py-4 -mx-4">
           <div className="w-full px-4 lg:w-9/12">
             {paginatedPosts.map((event, index) => (
diff --git a/src/tailwind.css b/src/tailwind.css
index 2b83b6c05..18b9980d9 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -117,6 +117,28 @@
     @apply py-2;
     @apply px-4;
   }
+
+  .skeleton:empty::after {
+    @apply block;
+    @apply bg-no-repeat;
+    content: '';
+    background-color: #e5e5e5;
+    background-image: linear-gradient(to left, #e5e5e5 0%, #f5f5f5 50%, #e5e5e5 100%);
+    background-size: 50% 100%;
+    height: 24px;
+    border-radius: 2px;
+  }
+
+  .endorsement-chain > *:first-of-type .dot-path {
+    bottom: 0;
+    height: 50%;
+  }
+  .endorsement-chain > *:last-of-type .dot-path {
+    height: 50%;
+  }
+  .endorsement-chain > *:last-of-type .path {
+    height: 0;
+  }
 }
 
 @tailwind utilities;
diff --git a/src/tailwind.js b/src/tailwind.js
index e42a4a76f..cff6ab9f3 100644
--- a/src/tailwind.js
+++ b/src/tailwind.js
@@ -8,6 +8,10 @@ const localConfig = {
     "./node_modules/@govtechsg/tradetrust-ui-components/src/**/*.{ts,tsx,js,jsx}",
   ],
   theme: {
+    backgroundImage: {
+      "single-wave": "url('/static/images/home/mainBenefits/single-wave.png')",
+      "wave-lines-light": "url('/static/images/common/wave-lines-light.png')",
+    },
     fontFamily: {
       roboto: ["Roboto", "sans-serif"],
       ubuntu: ["Ubuntu", "sans-serif"],
@@ -23,6 +27,7 @@ const localConfig = {
         7: "1.75rem",
         8: "2rem",
         "-24": "-6rem",
+        "-2/5": "-40%",
         "50%": "50%",
       },
       fontSize: {
diff --git a/webpack.config.js b/webpack.config.js
index 07095e0d5..183118599 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -30,7 +30,9 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: [
+          { loader: "style-loader" },
+          { loader: "css-loader", options: { url: false } }],
       },
       {
         test: /\.md$/,
@@ -60,17 +62,17 @@ module.exports = {
     }),
     ...(!IS_DEV_SERVER
       ? [
-          new CompressionPlugin({ test: /\.(js|css|html|svg)$/ }),
-          new BrotliPlugin({ test: /\.(js|css|html|svg)$/ }),
-          new CopyWebpackPlugin({
-            patterns: [
-              { from: "public/static/images", to: "static/images" },
-              { from: "public/static/demo", to: "static/demo" },
-              { from: "public/static/uploads", to: "static/uploads" },
-              { from: "public/admin", to: "admin" },
-            ],
-          }),
-        ]
+        new CompressionPlugin({ test: /\.(js|css|html|svg)$/ }),
+        new BrotliPlugin({ test: /\.(js|css|html|svg)$/ }),
+        new CopyWebpackPlugin({
+          patterns: [
+            { from: "public/static/images", to: "static/images" },
+            { from: "public/static/demo", to: "static/demo" },
+            { from: "public/static/uploads", to: "static/uploads" },
+            { from: "public/admin", to: "admin" },
+          ],
+        }),
+      ]
       : []),
   ],
   optimization: {