diff --git a/client/src/assets/images/github-logo.svg b/client/src/assets/images/github-logo.svg
new file mode 100644
index 00000000..be76cff9
--- /dev/null
+++ b/client/src/assets/images/github-logo.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M8 0.387817C3.58 0.387817 0 3.96782 0 8.38782C0 11.9278 2.29 14.9178 5.47 15.9778C5.87 16.0478 6.02 15.8078 6.02 15.5978C6.02 15.4078 6.01 14.7778 6.01 14.1078C4 14.4778 3.48 13.6178 3.32 13.1678C3.23 12.9378 2.84 12.2278 2.5 12.0378C2.22 11.8878 1.82 11.5178 2.49 11.5078C3.12 11.4978 3.57 12.0878 3.72 12.3278C4.44 13.5378 5.59 13.1978 6.05 12.9878C6.12 12.4678 6.33 12.1178 6.56 11.9178C4.78 11.7178 2.92 11.0278 2.92 7.96782C2.92 7.09782 3.23 6.37782 3.74 5.81782C3.66 5.61782 3.38 4.79782 3.82 3.69782C3.82 3.69782 4.49 3.48782 6.02 4.51782C6.66 4.33782 7.34 4.24782 8.02 4.24782C8.7 4.24782 9.38 4.33782 10.02 4.51782C11.55 3.47782 12.22 3.69782 12.22 3.69782C12.66 4.79782 12.38 5.61782 12.3 5.81782C12.81 6.37782 13.12 7.08782 13.12 7.96782C13.12 11.0378 11.25 11.7178 9.47 11.9178C9.76 12.1678 10.01 12.6478 10.01 13.3978C10.01 14.4678 10 15.3278 10 15.5978C10 15.8078 10.15 16.0578 10.55 15.9778C12.1382 15.4418 13.5183 14.4212 14.496 13.0596C15.4737 11.698 15.9997 10.0641 16 8.38782C16 3.96782 12.42 0.387817 8 0.387817Z" fill="black"/>
+</svg>
diff --git a/client/src/assets/styles/components/Button.scss b/client/src/assets/styles/components/Button.scss
new file mode 100644
index 00000000..b21570cb
--- /dev/null
+++ b/client/src/assets/styles/components/Button.scss
@@ -0,0 +1,24 @@
+.Button {
+  outline: none;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 6px;
+
+  a {
+    color: inherit;
+    font-size: 19px;
+    font-weight: 500;
+  }
+
+  &--primary {
+    background-color: var(--primary-100);
+    color: var(--grey-900);
+  }
+
+  &--dark {
+    background-color: var(--primary-900);
+    color: var(--grey-50);
+  }
+
+  // TODO: Add more button styles and maybe sizes
+}
diff --git a/client/src/assets/styles/components/FancyBlobs.scss b/client/src/assets/styles/components/FancyBlobs.scss
new file mode 100644
index 00000000..7d2054bc
--- /dev/null
+++ b/client/src/assets/styles/components/FancyBlobs.scss
@@ -0,0 +1,113 @@
+.FancyBlobs {
+  width: 100vw;
+  height: 120vh;
+  overflow-x: clip;
+  position: absolute;
+  top: 20vh;
+  left: 0;
+  z-index: -1;
+
+  > * {
+    position: absolute;
+    bottom: 0;
+    transition: all 0.5s ease-in-out;
+  }
+
+  .Blob-1 {
+    transform: rotate(11.588deg);
+    fill: linear-gradient(82deg, #8900c9 38.7%, #fcf 76.51%);
+    filter: blur(150px);
+    top: -167px;
+    animation: BlobMove1 10s ease-in-out infinite forwards;
+  }
+
+  .Blob-2 {
+    fill: #ff29a8;
+    filter: blur(125px);
+    top: 66px;
+    left: -71px;
+    animation: BlobMove2 10s ease-in-out infinite forwards;
+  }
+
+  .Blob-3 {
+    width: 292.12px;
+    height: 286.919px;
+    border-radius: 292.12px;
+    background: #ff4473;
+    filter: blur(150px);
+    top: 460px;
+    left: 0;
+    animation: BlobMove3 10s ease-in-out infinite forwards;
+  }
+
+  .Blob-4 {
+    width: 420.837px;
+    height: 293.732px;
+    border-radius: 420.837px;
+    background: #fb0;
+    filter: blur(150px);
+    top: 503px;
+    left: 150px;
+    animation: BlobMove4 10s ease-in-out infinite forwards;
+  }
+}
+
+@keyframes BlobMove1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes BlobMove2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(-100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes BlobMove3 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes BlobMove4 {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(-100px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
diff --git a/client/src/assets/styles/components/Footer.scss b/client/src/assets/styles/components/Footer.scss
new file mode 100644
index 00000000..824625cf
--- /dev/null
+++ b/client/src/assets/styles/components/Footer.scss
@@ -0,0 +1,35 @@
+.Footer {
+  padding: 2rem 20px;
+  text-align: center;
+  position: relative;
+  box-sizing: content-box;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #150a25;
+    z-index: -1;
+    filter: blur(100px);
+  }
+
+  p {
+    color: var(--grey-400, #9ca3af);
+    line-height: normal;
+  }
+
+  a {
+    padding: 5px;
+    background-color: var(--primary-50);
+    color: var(--grey-900);
+    font-size: 13.33px;
+    font-weight: 700;
+    display: inline-flex;
+    gap: 5px;
+    align-items: center;
+  }
+}
diff --git a/client/src/components/common/Button.jsx b/client/src/components/common/Button.jsx
new file mode 100644
index 00000000..0d501194
--- /dev/null
+++ b/client/src/components/common/Button.jsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+import { PropTypes } from "prop-types";
+
+// Styles
+import "../../assets/styles/components/Button.scss";
+
+export default function Button(props) {
+  const { children, className, linkTo, ...rest } = props;
+
+  return (
+    <button className={`Button ${className}`} {...rest}>
+      {linkTo ? <Link to={linkTo}>{children}</Link> : <>{children}</>}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  linkTo: PropTypes.string,
+};
diff --git a/client/src/components/common/Footer.jsx b/client/src/components/common/Footer.jsx
new file mode 100644
index 00000000..704001a2
--- /dev/null
+++ b/client/src/components/common/Footer.jsx
@@ -0,0 +1,25 @@
+// style
+import "../../assets/styles/components/Footer.scss";
+
+// GitHub icon
+import GitHubLogo from "../../assets/images/github-logo.svg";
+
+export default function Footer() {
+  return (
+    <footer className="Footer">
+      <p>
+        أعمال التصميم والتطوير تمت بواسطة فريق من طلاب هندسة القاهرة قسم حاسبات.
+        للمزيد من المعلومات
+      </p>
+
+      <a
+        target="_blank"
+        rel="noreferrer"
+        href="https://github.com/CMP26Projects/ScoutManagementSystem"
+      >
+        <img src={GitHubLogo} alt="github logo" />
+        <span>github</span>
+      </a>
+    </footer>
+  );
+}
diff --git a/client/src/components/landingpage/FancyBlobs.jsx b/client/src/components/landingpage/FancyBlobs.jsx
new file mode 100644
index 00000000..1d1e54da
--- /dev/null
+++ b/client/src/components/landingpage/FancyBlobs.jsx
@@ -0,0 +1,100 @@
+import "./../../assets/styles/components/FancyBlobs.scss";
+
+export default function FancyBlobs() {
+  return (
+    <div className="FancyBlobs">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="360"
+        height="882"
+        viewBox="0 0 360 882"
+        fill="none"
+        className="Blob-1"
+      >
+        <g filter="url(#filter0_f_71_1543)">
+          <path
+            d="M28.9326 444.67C60.0433 380.541 123.206 346.94 204.633 328.13C304.305 305.105 556.184 268.938 604.43 352.549C637.644 410.111 556.454 449.215 489.196 458.174C301.06 483.234 184.43 595.077 93.8789 580.368C29.6292 569.931 -1.13528 506.649 28.9326 444.67Z"
+            fill="url(#paint0_linear_71_1543)"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_71_1543"
+            x="-282.665"
+            y="0.232281"
+            width="1194.78"
+            height="881.463"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="150"
+              result="effect1_foregroundBlur_71_1543"
+            />
+          </filter>
+          <linearGradient
+            id="paint0_linear_71_1543"
+            x1="68.8451"
+            y1="481.485"
+            x2="478.203"
+            y2="477.608"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0.422952" stopColor="#8900c9" />
+            <stop offset="1" stopColor="#FFCCFF" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="360"
+        height="684"
+        viewBox="0 0 360 684"
+        fill="none"
+        className="Blob-2"
+      >
+        <g filter="url(#filter0_f_71_1544)">
+          <ellipse
+            cx="180.615"
+            cy="342.099"
+            rx="93.6478"
+            ry="91.6021"
+            fill="#FF29A8"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_71_1544"
+            x="-163.033"
+            y="0.49646"
+            width="687.296"
+            height="683.204"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              stdDeviation="125"
+              result="effect1_foregroundBlur_71_1544"
+            />
+          </filter>
+        </defs>
+      </svg>
+      <div className="Blob-3"></div>
+      <div className="Blob-4"></div>
+    </div>
+  );
+}
diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx
index f0c006e6..478f5f19 100644
--- a/client/src/components/landingpage/LandingPage.jsx
+++ b/client/src/components/landingpage/LandingPage.jsx
@@ -1,9 +1,21 @@
 import Nav from "../common/nav";
+import Button from "../common/Button";
+import Footer from "../common/Footer";
+
+import FancyBlobs from "./FancyBlobs";
 
 export default function LandingPage() {
   return (
     <>
       <Nav showIcons={true} />
+      <FancyBlobs />
+      <Button className="Button--primary" linkTo="/login">
+        تسجيل الدخول
+      </Button>
+      <Button className="Button--dark" linkTo="/signUp">
+        إنشاء حساب
+      </Button>
+      <Footer />
     </>
   );
 }
diff --git a/client/src/components/module_OR_PAGE/DELETEME.txt b/client/src/components/module_OR_PAGE/DELETEME.txt
deleted file mode 100644
index e69de29b..00000000