diff --git a/components/Background/index.jsx b/components/Background/index.jsx
new file mode 100644
index 0000000..252f4e6
--- /dev/null
+++ b/components/Background/index.jsx
@@ -0,0 +1,25 @@
+export default function Background() {
+  return (
+    <div className="wrap overflow-hidden opacity-30 select-none block">
+      <object className="shape x1" data="/images/props/shapes_3.svg" />
+      <object className="shape x2" data="/images/props/shapes_2.svg" />
+      <object
+        className="shape x3 hidden sm:block"
+        data="/images/props/shapes_1.svg"
+      />
+      <object className="shape x4" data="/images/props/shapes_3.svg" />
+      <object
+        className="shape x5 hidden sm:block"
+        data="/images/props/shapes_2.svg"
+      />
+      <object
+        className="shape x6 hidden sm:block"
+        data="/images/props/shapes_3.svg"
+      />
+      <object className="shape x7" data="/images/props/shapes_2.svg" />
+      <object className="shape x8" data="/images/props/shapes_1.svg" />
+      <object className="shape x9" data="/images/props/shapes_3.svg" />
+      <object className="shape x10" data="/images/props/shapes_2.svg" />
+    </div>
+  );
+}
diff --git a/components/Faq/index.jsx b/components/Faq/index.jsx
index 97e4be4..de74ccf 100644
--- a/components/Faq/index.jsx
+++ b/components/Faq/index.jsx
@@ -12,7 +12,7 @@ export default function Faq({ faq }) {
   return (
     <div
       onClick={toggleFaq}
-      className="cursor-pointer rounded-lg bg-gray1 border border-gray2 shadow-sm hover:border-purple px-4 py-6"
+      className="cursor-pointer rounded-lg bg-gray1 border border-gray2 shadow-sm hover:border-primary transition duration-200 ease-in-out px-4 py-6"
     >
       <div>
         {isOpen ? (
diff --git a/components/Navbar/index.jsx b/components/Navbar/index.jsx
index e39df5d..596ba80 100644
--- a/components/Navbar/index.jsx
+++ b/components/Navbar/index.jsx
@@ -27,11 +27,11 @@ export default function Navbar({ current_page, children }) {
               <div className="flex row ml-6 cursor-pointer opacity-70 hover:opacity-100">
                 {/* eslint-disable @next/next/no-img-element */}
                 <img
-                  className="w-[60px] h-[60px] pt-2"
+                  className="w-[40px] h-[40px] mr-2 self-center"
                   src="/images/logos/codeweek-icon-white.svg"
                   alt=""
                 />
-                <a className="text-white text-md font-semibold sm:text-lg sm:font-bold px-1 py-5">
+                <a className="text-white text-md font-ocr uppercase font-semibold sm:text-lg sm:font-bold px-1 py-5">
                   Code Week
                 </a>
               </div>
@@ -44,9 +44,9 @@ export default function Navbar({ current_page, children }) {
                     href={item.slug}
                     className={classNames(
                       current_page == item.name
-                        ? "border-purple text-white"
+                        ? "border-primary text-white"
                         : "border-transparent text-white text-opacity-50 hover:text-opacity-100",
-                      "whitespace-nowrap py-7 px-1 border-b text-sm font-bold"
+                      "whitespace-nowrap py-7 px-1 border-b text-base font-bold font-ocr"
                     )}
                   >
                     {item.name}
@@ -108,7 +108,7 @@ export default function Navbar({ current_page, children }) {
                       current_page == item.name
                         ? " "
                         : "  text-opacity-50 hover:text-opacity-100",
-                      "block whitespace-nowrap py-4 px-2 text-center text-xl font-bold uppercase text-white"
+                      "block whitespace-nowrap py-4 px-2 font-ocr text-center text-xl font-bold uppercase text-white"
                     )}
                   >
                     {item.name}
diff --git a/components/PersonCard/index.jsx b/components/PersonCard/index.jsx
index c37e194..2195b17 100644
--- a/components/PersonCard/index.jsx
+++ b/components/PersonCard/index.jsx
@@ -8,7 +8,7 @@ export default function PersonCard({ person, isSpeakers }) {
   function RenderOverlayOrganization() {
     if (!isSpeakers) {
       return (
-        <div className="hidden group-hover:block absolute top-0 left-0 right-0 z-40 bg-gradient-to-b from-purple p-2">
+        <div className="opacity-0 group-hover:block absolute top-0 left-0 right-0 z-40 bg-gradient-to-b from-primary p-2 transition duration-200 ease-in-out group-hover:opacity-100">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             className="w-12 sm:w-20"
@@ -21,7 +21,7 @@ export default function PersonCard({ person, isSpeakers }) {
   }
   return (
     <div className="h-full">
-      <div className="h-full space-y-4 cursor-pointer group relative rounded-lg border border-gray-300 bg-gray1 border-gray2 shadow-sm hover:border-purple overflow-hidden">
+      <div className="h-full space-y-4 cursor-pointer group relative rounded-lg border border-gray-300 bg-gray1 border-gray2 shadow-sm transition duration-200 ease-in-out hover:border-primary overflow-hidden">
         <div>
           <RenderOverlayOrganization />
 
diff --git a/pages/_app.js b/pages/_app.js
index 269b2dc..21892f3 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -3,6 +3,7 @@ import { config } from "@fortawesome/fontawesome-svg-core";
 config.autoAddCss = false; /* eslint-disable import/first */
 
 import "../styles/globals.css";
+import "../styles/background.css";
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
diff --git a/pages/activity/[slug].js b/pages/activity/[slug].js
index 3f9acf8..bf5aef5 100644
--- a/pages/activity/[slug].js
+++ b/pages/activity/[slug].js
@@ -68,7 +68,7 @@ export default function Activity() {
               {activity.speakers &&
                 activity.speakers.map((speaker) => (
                   <div
-                    className="cursor-pointer group w-3/4 relative rounded-lg border border-gray-300 bg-gray1 border-gray2 px-6 py-5 shadow-sm hover:border-purple"
+                    className="cursor-pointer group w-3/4 relative rounded-lg border border-gray-300 bg-gray1 border-gray2 px-6 py-5 shadow-sm hover:border-primary transition duration-200 ease-in-out"
                     key={speaker}
                   >
                     <div className="flex items-center space-x-3 rounded-sm border-gray3">
diff --git a/pages/faqs.js b/pages/faqs.js
index 0d134bd..ad992be 100644
--- a/pages/faqs.js
+++ b/pages/faqs.js
@@ -17,7 +17,9 @@ export default function FAQs() {
 
       <main className="flex w-full flex-1 flex-col bg-black my-auto">
         <div className="px-10 mb-10">
-          <p className="text-white text-[40px] mt-14 font-extrabold">FAQs</p>
+          <p className="text-white text-[40px] mt-14 font-extrabold font-ocr uppercase">
+            FAQs
+          </p>
           <p className="text-gray3 text-md mt-4">
             Have all your questions answered.
           </p>
diff --git a/pages/index.js b/pages/index.js
index 930f79a..b201f6a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,7 @@
 import Head from "next/head";
 
 import Navbar from "/components/Navbar";
+import Background from "/components/Background";
 
 function Home() {
   return (
@@ -11,28 +12,23 @@ function Home() {
       </Head>
 
       <Navbar>
-        <main className="flex w-full flex-1 flex-col items-center justify-center text-center bg-black my-auto ">
-          <div className="space">
-            <div className="stars" />
-            <div className="stars" />
-            <div className="stars" />
-            <div className="stars" />
-            <div className="stars" />
-          </div>
-          <div className="md:max-w-[700px] px-4">
-            <p className="text-white text-5xl font-bold sm:text-6xl sm:font-extrabold">
-              EU Code Week 2022 @ University of Minho
-            </p>
-            <div className="grid grid-cols-3 p-6">
-              <p className="text-purple text-lg sm:text-2xl self-center">
-                October 17 - 21, 2022
+        <main className="flex w-full flex-1 flex-col items-center justify-center bg-black text-center my-auto ">
+          <div className="md:max-w-[700px] px-4 select-none">
+            <object
+              data="images/logos/codeweek-2023.svg"
+              className="w-full sm:mx-0 sm:w-[300px]"
+              alt="Code Week 2023"
+            />
+            <div>
+              <p className="text-white uppercase font-ocr text-lg sm:text-2xl mt-4 text-left">
+                16 - 20 October
               </p>
-              <p className="flex text-white text-xl border-r-2 h-[70px] self-center justify-self-center" />
-              <p className="text-purple text-lg sm:text-2xl self-center p-4">
-                Building 7, Gualtar Campus
+              <p className="text-primary uppercase font-ocr text-lg sm:text-xl self-center text-left mt-2">
+                Building 7, <br /> Gualtar Campus
               </p>
             </div>
           </div>
+          <Background />
         </main>
       </Navbar>
     </div>
diff --git a/pages/schedule.js b/pages/schedule.js
index 9d026d1..b573ef9 100644
--- a/pages/schedule.js
+++ b/pages/schedule.js
@@ -18,7 +18,7 @@ export default function Schedule() {
 
       <main className="flex w-full flex-1 flex-col bg-black my-auto">
         <div className="px-10 mb-10">
-          <p className="text-white text-[40px] mt-14 font-extrabold">
+          <p className="text-white text-[40px] mt-14 font-extrabold font-ocr uppercase">
             Schedule
           </p>
           <p className="text-gray3 text-md mt-4">
@@ -30,8 +30,10 @@ export default function Schedule() {
 
         {schedule.map((day, i0) => (
           <div className="sm:flex border-t border-gray2 sm:py-4" key={day}>
-            <div className="px-10 py-4 sm:py-0 sm:p-10 flex-shrink-0 sm:mr-4">
-              <p className="text-purple text-4xl font-extrabold">{day.date}</p>
+            <div className="px-10 py-4 sm:py-0 sm:p-10 flex-shrink-0">
+              <p className="text-primary text-4xl font-extrabold font-ocr uppercase">
+                {day.date}
+              </p>
             </div>
             <div className="px-10 overflow-x-auto flex gap-4 pb-4 sm:pb-0 sm:py-4">
               {day.activities.map((activity, i1) => (
@@ -41,7 +43,7 @@ export default function Schedule() {
                   </div>
                   <>
                     <Link href={`/activity/${i1}?day_id=${i0}`}>
-                      <div className="cursor-pointer group w-80 mt-2 relative rounded-lg border border-gray-300 bg-gray1 border-gray2 px-6 py-5 shadow-sm hover:border-purple">
+                      <div className="cursor-pointer group w-80 mt-2 relative rounded-lg border border-gray-300 bg-gray1 border-gray2 px-6 py-5 shadow-sm hover:border-primary transition duration-200 ease-in-out">
                         <div className="flex justify-between items-center">
                           <p className="text-white text-xl font-bold">
                             {activity.title}
diff --git a/pages/speakers.js b/pages/speakers.js
index 388de9b..834b4ec 100644
--- a/pages/speakers.js
+++ b/pages/speakers.js
@@ -16,7 +16,7 @@ export default function Speakers() {
       <Navbar current_page="Speakers">
         <main className="flex w-full flex-1 flex-col bg-black my-auto">
           <div className="px-10 mb-10">
-            <p className="text-white text-[40px] mt-14 font-extrabold">
+            <p className="text-white text-[40px] mt-14 font-extrabold font-ocr uppercase">
               Speakers
             </p>
             <p className="text-gray3 text-md mt-4">
diff --git a/pages/team.js b/pages/team.js
index fdb1d26..ee589ba 100644
--- a/pages/team.js
+++ b/pages/team.js
@@ -15,7 +15,9 @@ export default function Team() {
       <Navbar current_page="Team">
         <main className="flex w-full flex-1 flex-col bg-black my-auto">
           <div className="px-10 mb-10">
-            <p className="text-white text-[40px] mt-14 font-extrabold">Team</p>
+            <p className="text-white text-[40px] mt-14 font-extrabold font-ocr uppercase">
+              Team
+            </p>
             <p className="text-gray3 text-md mt-4">
               CeSIUM and NECC joined forces and became almost as strong as a
               semicolon in C. Look at us: hard working people, code enthusiasts,
diff --git a/public/fonts/OCRAEXT.TTF b/public/fonts/OCRAEXT.TTF
new file mode 100644
index 0000000..0e77e20
Binary files /dev/null and b/public/fonts/OCRAEXT.TTF differ
diff --git a/public/images/logos/codeweek-2023.svg b/public/images/logos/codeweek-2023.svg
new file mode 100644
index 0000000..3aca3ce
--- /dev/null
+++ b/public/images/logos/codeweek-2023.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326.63 363.57"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#ff499e;stroke-miterlimit:10;stroke-width:5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M35.51,81.53H56.86a6,6,0,0,1,4.27,1.72,5.74,5.74,0,0,1,0,8.35,6,6,0,0,1-4.26,1.72H34.75A17.15,17.15,0,0,1,26,90.65a16.11,16.11,0,0,1-6.27-6L6.09,58.35A26.5,26.5,0,0,1,3.35,46.7,23.81,23.81,0,0,1,6,35.25l13.8-26a18.38,18.38,0,0,1,6.13-6.43,14.51,14.51,0,0,1,8-2.77H57.29a5.67,5.67,0,0,1,4.19,1.76A5.72,5.72,0,0,1,63.21,5.9a5.93,5.93,0,0,1-1.73,4.25,5.6,5.6,0,0,1-4.19,1.79H34.77q-2.82,0-4.58,3.3L17.07,39.67a14,14,0,0,0-1.54,6.81,15.08,15.08,0,0,0,1.68,7.31l12.52,24A6,6,0,0,0,35.51,81.53Z"/><path class="cls-1" d="M134,8.64l13,26.47a26.22,26.22,0,0,1,0,23.38l-13,26.2q-4.15,8.63-14.08,8.63a15.18,15.18,0,0,1-8.49-2.46,16,16,0,0,1-5.67-6.17L92.65,58.49A25.29,25.29,0,0,1,90,46.84a25.75,25.75,0,0,1,2.61-11.73L105.74,8.64Q110.18,0,119.9,0T134,8.64Zm-18,5.9L103.7,39.39A17.74,17.74,0,0,0,102,46.7a16.89,16.89,0,0,0,1.69,7.37l12.61,25.14a3.59,3.59,0,0,0,3.59,2.32,3.76,3.76,0,0,0,3.45-2.32L136,54.07a17.19,17.19,0,0,0,1.76-7.37A15.89,15.89,0,0,0,136,39.39l-12.4-24.85a3.93,3.93,0,0,0-3.73-2.74A4.31,4.31,0,0,0,116,14.54Z"/><path class="cls-1" d="M183.07,0h23.38a16.38,16.38,0,0,1,8.91,3,18.12,18.12,0,0,1,6.37,7l11.7,23.59a28.76,28.76,0,0,1,3.31,13.35,28.91,28.91,0,0,1-3.52,13.27L221.45,83.42a17.92,17.92,0,0,1-6.47,7.2,17.19,17.19,0,0,1-9.44,2.7H182.93a5.92,5.92,0,0,1-5.91-5.9,5.9,5.9,0,0,1,1.72-4.24,5.59,5.59,0,0,1,4.19-1.8h6.2V11.94h-6.06a5.62,5.62,0,0,1-4.19-1.79,5.92,5.92,0,0,1-1.72-4.25,5.71,5.71,0,0,1,1.72-4.14A5.67,5.67,0,0,1,183.07,0ZM201,11.94V81.53l4.14,0a6.31,6.31,0,0,0,5.9-3.86l11.7-23.17a18.89,18.89,0,0,0,2.2-7.65,15.76,15.76,0,0,0-1.76-7.3L211,15.52a6.48,6.48,0,0,0-6.19-3.58Z"/><path class="cls-1" d="M318.08,11.94H276.25V40.66h18a6,6,0,0,1,5.92,5.9,5.89,5.89,0,0,1-1.73,4.28,5.64,5.64,0,0,1-4.19,1.75h-18V81.53h42a5.73,5.73,0,0,1,4.15,1.72,5.8,5.8,0,0,1,0,8.35,6,6,0,0,1-4.26,1.72H264.41V0h53.67a5.85,5.85,0,0,1,4.26,1.79A5.78,5.78,0,0,1,324.13,6a5.58,5.58,0,0,1-1.79,4.14A5.9,5.9,0,0,1,318.08,11.94Z"/><path class="cls-1" d="M38.84,170.46v39.25l3.45,5.76h4.93l3.59-5.9V140a6.13,6.13,0,0,1,6.06-6A5.69,5.69,0,0,1,61,135.7a5.63,5.63,0,0,1,1.76,4.14v71.63a8,8,0,0,1-1.47,3.72l-5.5,9.06a5.52,5.52,0,0,1-5.14,3H39.54q-5.28,0-6.76-4.78-1.62,4.78-6.48,4.78H15.88q-4.5,0-6.48-3.3l-5.07-8.5a8.08,8.08,0,0,1-1.41-4V140a5.8,5.8,0,0,1,1.8-4.25A5.85,5.85,0,0,1,9,133.94a5.46,5.46,0,0,1,4,1.79A5.92,5.92,0,0,1,14.75,140v69.87l3.46,5.62h5.07l3.73-5.9V170.46a5.87,5.87,0,0,1,5.91-5.9,5.89,5.89,0,0,1,5.92,5.9Z"/><path class="cls-1" d="M143.84,145.88H102V174.6h18a6,6,0,0,1,5.92,5.9,5.87,5.87,0,0,1-1.73,4.28,5.67,5.67,0,0,1-4.19,1.76H102v28.93h42a5.73,5.73,0,0,1,4.15,1.72,5.81,5.81,0,0,1,0,8.36,6,6,0,0,1-4.27,1.72H90.18V133.94h53.66a6.11,6.11,0,0,1,6.06,6,5.64,5.64,0,0,1-1.79,4.15A5.9,5.9,0,0,1,143.84,145.88Z"/><path class="cls-1" d="M231,145.88H189.13V174.6h18a6,6,0,0,1,5.91,5.9,5.86,5.86,0,0,1-1.72,4.28,5.67,5.67,0,0,1-4.19,1.76h-18v28.93h42a5.75,5.75,0,0,1,4.16,1.72,5.64,5.64,0,0,1,1.76,4.18,5.57,5.57,0,0,1-1.8,4.18,6,6,0,0,1-4.26,1.72H177.3V133.94H231a6.13,6.13,0,0,1,6.06,6,5.62,5.62,0,0,1-1.8,4.15A5.89,5.89,0,0,1,231,145.88Z"/><path class="cls-1" d="M264.27,221.37V140A5.89,5.89,0,0,1,266,135.7a5.65,5.65,0,0,1,4.19-1.76,5.89,5.89,0,0,1,5.91,5.91v27.89L314,135.49a6.56,6.56,0,0,1,4.44-1.55,5.47,5.47,0,0,1,4.16,1.81,5.91,5.91,0,0,1,1.69,4.15,5.22,5.22,0,0,1-1.94,4l-42.93,36.38,43,37a4.65,4.65,0,0,1,1.74,3.8,6.15,6.15,0,0,1-1.72,4.23,5.55,5.55,0,0,1-4.26,1.9,6.46,6.46,0,0,1-4.3-1.62L276.1,193.24v28.13a5.68,5.68,0,0,1-1.72,4.18,5.93,5.93,0,0,1-8.35,0A5.64,5.64,0,0,1,264.27,221.37Z"/><path class="cls-2" d="M56.73,361.07H2.92V320.34a11.53,11.53,0,0,1,3.49-8.43,11.33,11.33,0,0,1,8.34-3.51H50.67V279.68H8.42a5.9,5.9,0,1,1,0-11.79H50.67a11.62,11.62,0,0,1,8.45,3.47,11.27,11.27,0,0,1,3.52,8.32V308.4a11.44,11.44,0,0,1-3.52,8.47,11.62,11.62,0,0,1-8.45,3.47H14.75v28.93h42A5.77,5.77,0,0,1,60.88,351a5.84,5.84,0,0,1,0,8.36A5.73,5.73,0,0,1,56.73,361.07Z"/><path class="cls-2" d="M89.9,349.69V279.12a11.53,11.53,0,0,1,11.41-11.37h36.9a10.77,10.77,0,0,1,7.92,3.37,11,11,0,0,1,3.35,8v70.57a11.42,11.42,0,0,1-11.41,11.38H101.31A11.35,11.35,0,0,1,89.9,349.69Zm47.89-.42V279.68H101.73v69.59Z"/><path class="cls-2" d="M231,361.07h-53.8V320.34a11.56,11.56,0,0,1,3.48-8.43A11.37,11.37,0,0,1,189,308.4H224.9V279.68H182.65a5.68,5.68,0,0,1-4.23-1.72,6,6,0,0,1,0-8.35,5.68,5.68,0,0,1,4.23-1.72H224.9a11.64,11.64,0,0,1,8.46,3.47,11.31,11.31,0,0,1,3.52,8.32V308.4a11.48,11.48,0,0,1-3.52,8.47,11.64,11.64,0,0,1-8.46,3.47H189v28.93h42a5.79,5.79,0,0,1,4.16,1.72,5.84,5.84,0,0,1,0,8.36A5.75,5.75,0,0,1,231,361.07Z"/><path class="cls-2" d="M324,279.68V301.8q0,7.72-4.79,12.5a17.49,17.49,0,0,1,4.93,11.94v23a11.26,11.26,0,0,1-3.52,8.32,11.57,11.57,0,0,1-8.45,3.48H270.33a5.9,5.9,0,1,1,0-11.8H312v-23A5.92,5.92,0,0,0,310.3,322a5.62,5.62,0,0,0-4.19-1.79H282.3a5.79,5.79,0,0,1-4.19-1.68,6,6,0,0,1,0-8.4,5.74,5.74,0,0,1,4.19-1.72h23.95a5.73,5.73,0,0,0,4.15-1.72,5.61,5.61,0,0,0,1.76-4.17V279.68H269.91a5.9,5.9,0,1,1,0-11.79h42.25A11.81,11.81,0,0,1,324,279.68Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/logos/codeweek-icon-purple.svg b/public/images/logos/codeweek-icon-purple.svg
index 9dbb786..46e603a 100644
--- a/public/images/logos/codeweek-icon-purple.svg
+++ b/public/images/logos/codeweek-icon-purple.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.25 747.32"><defs><style>.cls-1{fill:none;stroke:#845ef7;stroke-miterlimit:10;stroke-width:35px;}</style></defs><title>logo-codeweek-purple</title><line class="cls-1" x1="171.83" y1="173.95" x2="262.34" y2="264.46"/><polyline class="cls-1" points="459.27 162.99 321.03 24.75 24.75 321.03 162.99 459.27"/><path class="cls-1" d="M268.16,633.5,394.73,760.07c81.82,81.82,214.46,81.82,296.28,0h0c81.81-81.81,81.81-214.46,0-296.27L564.44,337.22" transform="translate(-71.94 -141)"/><path class="cls-1" d="M739.8,784.11l54,54a111.61,111.61,0,0,0,157.83,0L1019.81,770" transform="translate(-71.94 -141)"/></svg>
\ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.25 747.32"><defs><style>.cls-1{fill:none;stroke:#845ef7;stroke-miterlimit:10;stroke-width:35px;}</style></defs><title>logo-codeweek-primary</title><line class="cls-1" x1="171.83" y1="173.95" x2="262.34" y2="264.46"/><polyline class="cls-1" points="459.27 162.99 321.03 24.75 24.75 321.03 162.99 459.27"/><path class="cls-1" d="M268.16,633.5,394.73,760.07c81.82,81.82,214.46,81.82,296.28,0h0c81.81-81.81,81.81-214.46,0-296.27L564.44,337.22" transform="translate(-71.94 -141)"/><path class="cls-1" d="M739.8,784.11l54,54a111.61,111.61,0,0,0,157.83,0L1019.81,770" transform="translate(-71.94 -141)"/></svg>
\ No newline at end of file
diff --git a/public/images/props/shapes_1.svg b/public/images/props/shapes_1.svg
new file mode 100644
index 0000000..d63369f
--- /dev/null
+++ b/public/images/props/shapes_1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.86 80.86"><defs><style>.cls-1{fill:none;stroke:#ff499e;stroke-miterlimit:10;stroke-width:5px;}</style></defs><g id="Layer_1-2"><circle class="cls-1" cx="40.43" cy="40.43" r="37.93"/></g></svg>
\ No newline at end of file
diff --git a/public/images/props/shapes_2.svg b/public/images/props/shapes_2.svg
new file mode 100644
index 0000000..86bb50f
--- /dev/null
+++ b/public/images/props/shapes_2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140.23 93.55"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:5px;}.cls-1{stroke:#ff499e;}.cls-2{stroke:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M86.89,55.73A42.5,42.5,0,1,1,75.06,18.5a41.35,41.35,0,0,1,3.53,4,30.48,30.48,0,0,0,7.07,32.06C86.06,55,86.47,55.36,86.89,55.73Z"/><path class="cls-2" d="M128.8,54.57a30.5,30.5,0,0,1-41.91,1.16c-.42-.37-.83-.76-1.23-1.16a30.5,30.5,0,1,1,43.14,0Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/props/shapes_3.svg b/public/images/props/shapes_3.svg
new file mode 100644
index 0000000..c5e0fc5
--- /dev/null
+++ b/public/images/props/shapes_3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.36 122.66"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:5px;}.cls-1{stroke:#ff499e;}.cls-2{stroke:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M52.74,68.05q.24,1.19.57,2.34A35.64,35.64,0,1,1,73.1,31.22a36.37,36.37,0,0,1,.65,5.34A26.82,26.82,0,0,0,52.74,68.05Z"/><path class="cls-2" d="M84.24,89.14a25.77,25.77,0,0,1-3.33.44A19.26,19.26,0,0,0,61.62,82q-.54.1-1,.24a26.78,26.78,0,0,1-7.26-11.89q-.33-1.15-.57-2.34a26.82,26.82,0,0,1,21-31.49l.09,0a26.81,26.81,0,0,1,10.4,52.6Z"/><path class="cls-1" d="M69.09,119.79a19.24,19.24,0,0,1-8.52-37.51q.51-.14,1-.24a19.24,19.24,0,0,1,7.47,37.75Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index fbf0e25..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>
\ No newline at end of file
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index 765ef8f..0000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 4rem 0;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-}
-
-.footer a {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  font-size: 4rem;
-  line-height: 1.15;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  font-size: 1.5rem;
-  line-height: 1.5;
-}
-
-.code {
-  padding: 0.75rem;
-  font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono",
-    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-  font-size: 1.1rem;
-  background: #fafafa;
-  border-radius: 5px;
-}
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  max-width: 800px;
-}
-
-.card {
-  max-width: 300px;
-  padding: 1.5rem;
-  margin: 1rem;
-  color: inherit;
-  text-align: left;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    flex-direction: column;
-    width: 100%;
-  }
-}
diff --git a/styles/background.css b/styles/background.css
new file mode 100644
index 0000000..d731c5d
--- /dev/null
+++ b/styles/background.css
@@ -0,0 +1,226 @@
+.wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.shape {
+  position: absolute;
+  height: 300px;
+}
+
+@-webkit-keyframes animateShape {
+  0% {
+    margin-top: 1000px;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
+
+@-moz-keyframes animateShape {
+  0% {
+    margin-top: 1000px;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
+
+@keyframes animateShape {
+  0% {
+    margin-top: 1000px;
+  }
+  100% {
+    margin-top: -100%;
+  }
+}
+
+@-webkit-keyframes sideWays {
+  0% {
+    margin-left: 0px;
+  }
+  100% {
+    margin-left: 50px;
+  }
+}
+
+@-moz-keyframes sideWays {
+  0% {
+    margin-left: 0px;
+  }
+  100% {
+    margin-left: 50px;
+  }
+}
+
+@keyframes sideWays {
+  0% {
+    margin-left: 0px;
+  }
+  100% {
+    margin-left: 50px;
+  }
+}
+
+.x1 {
+  top: 5%;
+
+  left: -5%;
+
+  -webkit-transform: scale(0.6);
+  -moz-transform: scale(0.6);
+  transform: scale(0.6);
+  -webkit-animation: animateShape 25s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  -moz-animation: animateShape 25s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  animation: animateShape 25s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+}
+
+.x2 {
+  top: 80%;
+
+  left: 5%;
+
+  -webkit-transform: scale(0.4);
+  -moz-transform: scale(0.4);
+  transform: scale(0.4);
+  -webkit-animation: animateShape 20s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+  -moz-animation: animateShape 20s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+  animation: animateShape 20s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+}
+
+.x3 {
+  top: 40%;
+
+  left: 10%;
+
+  -webkit-transform: scale(0.7);
+  -moz-transform: scale(0.7);
+  transform: scale(0.7);
+  -webkit-animation: animateShape 28s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  -moz-animation: animateShape 28s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  animation: animateShape 28s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+}
+
+.x4 {
+  top: 0;
+
+  left: 20%;
+
+  -webkit-transform: scale(0.3);
+  -moz-transform: scale(0.3);
+  transform: scale(0.3);
+  -webkit-animation: animateShape 22s linear infinite,
+    sideWays 3s ease-in-out infinite alternate;
+  -moz-animation: animateShape 22s linear infinite,
+    sideWays 3s ease-in-out infinite alternate;
+  animation: animateShape 22s linear infinite,
+    sideWays 3s ease-in-out infinite alternate;
+}
+
+.x5 {
+  top: 50%;
+
+  left: 30%;
+
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-animation: animateShape 29s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+  -moz-animation: animateShape 29s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+  animation: animateShape 29s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+}
+
+.x6 {
+  top: 0;
+
+  left: 50%;
+
+  -webkit-transform: scale(0.8);
+  -moz-transform: scale(0.8);
+  transform: scale(0.8);
+  -webkit-animation: animateShape 21s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  -moz-animation: animateShape 21s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  animation: animateShape 21s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+}
+
+.x7 {
+  top: 70%;
+
+  left: 65%;
+
+  -webkit-transform: scale(0.4);
+  -moz-transform: scale(0.4);
+  transform: scale(0.4);
+  -webkit-animation: animateShape 20s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  -moz-animation: animateShape 20s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  animation: animateShape 20s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+}
+
+.x8 {
+  top: 10%;
+
+  left: 80%;
+
+  -webkit-transform: scale(0.3);
+  -moz-transform: scale(0.3);
+  transform: scale(0.3);
+  -webkit-animation: animateShape 22s linear infinite,
+    sideWays 3s ease-in-out infinite alternate;
+  -moz-animation: animateShape 22s linear infinite,
+    sideWays 3s ease-in-out infinite alternate;
+  animation: animateShape 22s linear infinite,
+    sideWays 3s ease-in-out infinite alternate;
+}
+
+.x9 {
+  top: 50%;
+
+  left: 90%;
+
+  -webkit-transform: scale(0.6);
+  -moz-transform: scale(0.6);
+  transform: scale(0.6);
+  -webkit-animation: animateShape 29s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+  -moz-animation: animateShape 29s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+  animation: animateShape 29s linear infinite,
+    sideWays 4s ease-in-out infinite alternate;
+}
+
+.x10 {
+  top: 80%;
+
+  left: 80%;
+
+  -webkit-transform: scale(0.3);
+  -moz-transform: scale(0.3);
+  transform: scale(0.3);
+  -webkit-animation: animateShape 26s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  -moz-animation: animateShape 26s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+  animation: animateShape 26s linear infinite,
+    sideWays 2s ease-in-out infinite alternate;
+}
diff --git a/styles/globals.css b/styles/globals.css
index 2d4852a..20d053b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,72 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.space,
-.stars {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  max-width: 100%;
-  max-height: 100%;
-  overflow: hidden;
-}
-.stars {
-  width: auto;
-  max-width: 100%;
-  max-height: 100%;
-  background-image: radial-gradient(
-      2px 2px at 20px 30px,
-      #eee,
-      rgba(0, 0, 0, 0)
-    ),
-    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
-    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0, 0, 0, 0)),
-    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
-    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
-    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0, 0, 0, 0));
-  background-repeat: repeat;
-  background-size: 100px 100px;
-  opacity: 0;
-  animation: zoom 5s infinite;
-}
-
-.stars:nth-child(1) {
-  background-position: 50% 50%;
-  animation-delay: 0s;
-}
-.stars:nth-child(2) {
-  background-position: 20% 60%;
-  animation-delay: 2s;
-}
-.stars:nth-child(3) {
-  background-position: -20% -30%;
-  animation-delay: 3s;
-}
-.stars:nth-child(4) {
-  background-position: 40% -80%;
-  animation-delay: 4s;
-}
-.stars:nth-child(5) {
-  background-position: -20% 30%;
-  animation-delay: 5s;
-}
-
-@keyframes zoom {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-    animation-timing-function: ease-in;
-  }
-  85% {
-    opacity: 1;
-    transform: scale(2.8);
-    animation-timing-function: linear;
-  }
-  100% {
-    opacity: 0;
-    transform: scale(3.5);
-  }
+@font-face {
+  font-family: "OCR A Extended";
+  src: url("../public/fonts/OCRAEXT.TTF") format("truetype");
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 8965f38..f28b312 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
   ],
   theme: {
     colors: {
+      primary: "#ff499e",
       transparent: "transparent",
       white: "#ffffff",
       black: "#000000",
@@ -13,6 +14,9 @@ module.exports = {
       gray3: "#8a8f98",
       purple: "#845ef7",
     },
+    fontFamily: {
+      ocr: "OCR A Extended",
+    },
     extend: {},
   },
   plugins: [],