diff --git a/client/src/App.jsx b/client/src/App.jsx
index 4c0210df..bc19c01b 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,9 +1,17 @@
-import "./theme.scss";
+import React from "react";
+import Alert from "./components/common/Alerts";
 
 function App() {
   return (
     <>
-      <h1> 🚀 Sanity Check</h1>
+      <Alert
+        title="عنوان"
+        info="نص الرسالة"
+        buttontext="تمت المعاينة"
+        showRightBox={false}
+        Onclick={() => console.log("clicked")}
+        color="yellow"
+      />
     </>
   );
 }
diff --git a/client/src/assets/styles/_vars.scss b/client/src/assets/styles/_vars.scss
index e69de29b..acdc3eb9 100644
--- a/client/src/assets/styles/_vars.scss
+++ b/client/src/assets/styles/_vars.scss
@@ -0,0 +1,5 @@
+$--grey-800: #1F2A37;
+$--grey-300: #D1D5DB;
+$--Teal-500: #0694A2;
+$--Red-700: #C81E1E;
+$--Yellow-500: #C27803;
\ No newline at end of file
diff --git a/client/src/assets/styles/components/Alert.scss b/client/src/assets/styles/components/Alert.scss
new file mode 100644
index 00000000..156bc8a7
--- /dev/null
+++ b/client/src/assets/styles/components/Alert.scss
@@ -0,0 +1,142 @@
+@import "../_vars.scss";
+
+.alert-item {
+    display: flex;
+    flex-direction: column;
+
+    width: 340px;
+    height: fit-content;
+    flex-shrink: 0;
+    border-radius: 15px;
+    background: $--grey-800;
+
+    padding: 15px 15px;
+    justify-content: center;
+    align-items: end;
+
+    gap: 10px;
+}
+
+.top-bar {
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+    height: fit-content;
+
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-items: center;
+    height: fit-content;
+}
+
+.right-box {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+    border-radius: 2px;
+    margin-left: 10px;
+
+    &.red {
+        background: var(--Red-700, #C81E1E);
+    }
+
+    &.main {
+        background: $--grey-300;
+    }
+
+    &.mint-green {
+        background: $--Teal-500;
+    }
+
+    &.yellow {
+        background: $--Yellow-500;
+    }
+
+}
+
+.title {
+    text-align: right;
+    font-family: Noto Kufi Arabic;
+    font-size: 19.2px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    &.main {
+        color: $--grey-300;
+    }
+
+    &.mint-green {
+        color: $--Teal-500;
+    }
+
+    &.red {
+        color: $--Red-700;
+
+    }
+
+    &.yellow {
+
+        color: $--Yellow-500;
+    }
+}
+
+.alert-info {
+    height: 65%;
+    text-align: right;
+    color: $--grey-300;
+    font-family: Noto Kufi Arabic;
+    font-size: 13.33px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.alert-btn {
+    display: flex;
+    width: 100px;
+    height: 25px;
+    justify-content: center;
+    align-items: center;
+    gap: 7px;
+    flex-shrink: 0;
+
+    float: right;
+    border-radius: 5px;
+
+    color: $--grey-800;
+
+    font-family: Noto Kufi Arabic;
+    font-size: 13.33px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+
+    &.red {
+        background: var(--Red-700, #C81E1E);
+    }
+
+    &.main {
+        background: $--grey-300;
+    }
+
+    &.mint-green {
+        background: $--Teal-500;
+    }
+
+    &.yellow {
+        background: $--Yellow-500;
+    }
+}
+
+
+.hide {
+    display: none;
+}
\ No newline at end of file
diff --git a/client/src/components/common/Alerts.jsx b/client/src/components/common/Alerts.jsx
new file mode 100644
index 00000000..1d25b7d2
--- /dev/null
+++ b/client/src/components/common/Alerts.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import "../../assets/styles/components/Alert.scss";
+
+const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
+  return (
+    <div className="alert-item">
+      <div className="top-bar">
+        <svg
+          className={"exit-btn " + color}
+          xmlns="http://www.w3.org/2000/svg"
+          width="21"
+          height="20"
+          viewBox="0 0 21 20" 
+        >
+          <path
+            d="M6.78033 5.21967C6.48744 4.92678 6.01256 4.92678 5.71967 5.21967C5.42678 5.51256 5.42678 5.98744 5.71967 6.28033L9.43934 10L5.71967 13.7197C5.42678 14.0126 5.42678 14.4874 5.71967 14.7803C6.01256 15.0732 6.48744 15.0732 6.78033 14.7803L10.5 11.0607L14.2197 14.7803C14.5126 15.0732 14.9874 15.0732 15.2803 14.7803C15.5732 14.4874 15.5732 14.0126 15.2803 13.7197L11.5607 10L15.2803 6.28033C15.5732 5.98744 15.5732 5.51256 15.2803 5.21967C14.9874 4.92678 14.5126 4.92678 14.2197 5.21967L10.5 8.93934L6.78033 5.21967Z"
+            fill="#D1D5DB"
+          />
+        </svg>
+
+        <div className="title-box">
+          <text className={"title " + color}>{title}</text>
+          <div
+            className={
+              showRightBox ? "right-box " + color : "right-box hide " + color
+            }
+          />
+        </div>
+      </div>
+      <text className="alert-info">{info}</text>
+      <button className={"alert-btn " + color} onClick={Onclick}>
+        {buttontext}
+      </button>
+    </div> 
+  );
+};
+
+export default Alert;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..f759843e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "ScoutManagementSystem",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}