diff --git a/backend/.gitignore b/backend/.gitignore
new file mode 100644
index 0000000..f9c5df2
--- /dev/null
+++ b/backend/.gitignore
@@ -0,0 +1,5 @@
+/venv
+app/__pycache__/
+attachment/__pycache__/
+app/migrations/
+zbackup.txt
\ No newline at end of file
diff --git a/backend/app/__init__.py b/backend/app/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/app/__pycache__/__init__.cpython-37.pyc b/backend/app/__pycache__/__init__.cpython-37.pyc
new file mode 100644
index 0000000..c7e9a84
Binary files /dev/null and b/backend/app/__pycache__/__init__.cpython-37.pyc differ
diff --git a/backend/app/__pycache__/admin.cpython-37.pyc b/backend/app/__pycache__/admin.cpython-37.pyc
new file mode 100644
index 0000000..70d8b19
Binary files /dev/null and b/backend/app/__pycache__/admin.cpython-37.pyc differ
diff --git a/backend/app/__pycache__/apps.cpython-37.pyc b/backend/app/__pycache__/apps.cpython-37.pyc
new file mode 100644
index 0000000..5edc992
Binary files /dev/null and b/backend/app/__pycache__/apps.cpython-37.pyc differ
diff --git a/backend/app/__pycache__/models.cpython-37.pyc b/backend/app/__pycache__/models.cpython-37.pyc
new file mode 100644
index 0000000..2e00a92
Binary files /dev/null and b/backend/app/__pycache__/models.cpython-37.pyc differ
diff --git a/backend/app/__pycache__/serializers.cpython-37.pyc b/backend/app/__pycache__/serializers.cpython-37.pyc
new file mode 100644
index 0000000..fdf63fc
Binary files /dev/null and b/backend/app/__pycache__/serializers.cpython-37.pyc differ
diff --git a/backend/app/__pycache__/urls.cpython-37.pyc b/backend/app/__pycache__/urls.cpython-37.pyc
new file mode 100644
index 0000000..10a56c3
Binary files /dev/null and b/backend/app/__pycache__/urls.cpython-37.pyc differ
diff --git a/backend/app/__pycache__/views.cpython-37.pyc b/backend/app/__pycache__/views.cpython-37.pyc
new file mode 100644
index 0000000..bdb5c65
Binary files /dev/null and b/backend/app/__pycache__/views.cpython-37.pyc differ
diff --git a/backend/app/admin.py b/backend/app/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/backend/app/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/backend/app/apps.py b/backend/app/apps.py
new file mode 100644
index 0000000..ed327d2
--- /dev/null
+++ b/backend/app/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AppConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app'
diff --git a/backend/app/forms.py b/backend/app/forms.py
new file mode 100644
index 0000000..ad4a901
--- /dev/null
+++ b/backend/app/forms.py
@@ -0,0 +1,53 @@
+from django import forms
+from django.contrib.auth.forms import UserCreationForm
+from .models import *
+
+
+class CustomUserCreationForm(UserCreationForm):
+    class Meta:
+        model = User
+        fields = [ 'user_type', 'email', 'username']
+        
+    USER_TYPES = (
+
+        ('employer', "Employer"),
+        ('supervisor', "Supervisor"),
+        ('student', "Student"),
+    )
+    user_type = forms.ChoiceField(widget=forms.Select(attrs={
+        'class': "input-field",
+    }
+        ), choices=USER_TYPES)
+    
+    email = forms.Field(widget=forms.EmailInput(attrs={
+        'class': "input-field",
+        "placeholder": "Enter Email",
+    }), label='')
+    username = forms.Field(widget=forms.TextInput(attrs={
+        'class': "input-field",
+        "placeholder": "Enter username"
+    }), label='')
+    password1 = forms.Field(widget=forms.PasswordInput(attrs={
+        'class': "input-field",
+        "placeholder": "Enter password",
+    }), label='')
+    password2 = forms.Field(widget=forms.PasswordInput(attrs={
+        'class': "input-field",
+        "placeholder": "confirm password",
+
+    }), label='')
+
+
+    def clean_password2(self):
+        password1 = self.cleaned_data.get("password1")
+        password2 = self.cleaned_data.get("password2")
+        if password1 and password2 and password1 != password2:
+            raise forms.ValidationError("Passwords don't match")
+        return password2
+    
+    def save(self, commit=True):
+        user = super().save(commit=False)
+        user.set_password(self.cleaned_data["password1"])
+        if commit:
+            user.save()
+        return user
\ No newline at end of file
diff --git a/backend/app/migrations/0001_initial.py b/backend/app/migrations/0001_initial.py
new file mode 100644
index 0000000..b762adf
--- /dev/null
+++ b/backend/app/migrations/0001_initial.py
@@ -0,0 +1,30 @@
+# Generated by Django 3.2.16 on 2022-12-27 07:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='User',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('password', models.CharField(max_length=128, verbose_name='password')),
+                ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
+                ('email', models.EmailField(max_length=100, unique=True)),
+                ('username', models.CharField(max_length=100)),
+                ('user_type', models.CharField(max_length=10)),
+                ('is_active', models.BooleanField(default=True)),
+                ('is_admin', models.BooleanField(default=False)),
+            ],
+            options={
+                'abstract': False,
+            },
+        ),
+    ]
diff --git a/backend/app/migrations/__init__.py b/backend/app/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/app/migrations/__pycache__/0001_initial.cpython-37.pyc b/backend/app/migrations/__pycache__/0001_initial.cpython-37.pyc
new file mode 100644
index 0000000..40d966c
Binary files /dev/null and b/backend/app/migrations/__pycache__/0001_initial.cpython-37.pyc differ
diff --git a/backend/app/migrations/__pycache__/__init__.cpython-37.pyc b/backend/app/migrations/__pycache__/__init__.cpython-37.pyc
new file mode 100644
index 0000000..7099b5c
Binary files /dev/null and b/backend/app/migrations/__pycache__/__init__.cpython-37.pyc differ
diff --git a/backend/app/models.py b/backend/app/models.py
new file mode 100644
index 0000000..7c3a36b
--- /dev/null
+++ b/backend/app/models.py
@@ -0,0 +1,158 @@
+from django.db import models
+import datetime
+from django.contrib.auth.models import (BaseUserManager, AbstractBaseUser)
+# Create your models here.
+
+
+class UserManager(BaseUserManager):
+
+    def create_user(self, username, email, user_type, password=None):
+        if username is None:
+            raise TypeError('Users must have a username')
+        if email is None:
+            raise TypeError('Users must have a Email')
+
+        user = self.model(
+
+            username=username,
+            user_type=user_type,
+            email=self.normalize_email(email)
+
+        )
+        user.set_password(password)
+        user.save()
+        return user
+
+    def create_superuser(self, email, user_type, username, password=None):
+
+        user = self.create_user(
+
+            email,
+            user_type=user_type,
+            username=username,
+            password=password,
+
+        )
+
+        user.is_admin = True
+        user.is_superuser = True
+        user.is_staff = True
+        user.save(using=self._db)
+        return user
+
+
+class User(AbstractBaseUser):
+
+    USER_TYPE_CHOICES = (
+
+        ('employer', "Employer"),
+        ('supervisor', "Supervisor"),
+        ('student', "Student"),
+    )
+
+    email = models.EmailField(max_length=100, unique=True)
+    username = models.CharField(max_length=100)
+    user_type = models.CharField(max_length=10)
+    is_active = models.BooleanField(default=True)
+    is_admin = models.BooleanField(default=False)
+    date_joined = models.DateTimeField(auto_now_add=True)
+    last_login = models.DateTimeField(auto_now_add=True)
+    updated_profile = models.BooleanField(default=False)
+    USERNAME_FIELD = 'email'
+    REQUIRED_FIELDS = ['username', 'user_type']
+
+    objects = UserManager()
+
+    def __str__(self):
+        return self.email
+
+
+class Student(models.Model):
+
+    admission_no = models.CharField(max_length=100, unique=True)
+    name = models.CharField(max_length=255)
+    course = models.CharField(max_length=255)
+    year = models.IntegerField(blank=True, null=True)
+    photo_url = models.ImageField(upload_to="images/")
+    assessed_by_employer = models.BooleanField(default=False)
+    user = models.OneToOneField(
+        User, primary_key=True, on_delete=models.CASCADE)
+
+    @classmethod
+    def get_profile_info(cls, email):
+        profile_info = cls.objects.filter(email=email).first()
+        return profile_info
+
+    @classmethod
+    def update_profile(cls, id, admission_no, name, course):
+        cls.objects.filter(pk=id).update(
+            admission_no=admission_no, name=name, course=course)
+        new_name_object = cls.objects.get(admission_no=admission_no)
+        new_name = new_name_object.admission_no
+        return new_name
+
+
+class Attachment(models.Model):
+    attachment_name = models.CharField(max_length=100)
+    department_name = models.CharField(max_length=100)
+    start_date = models.DateField(default=datetime.date.today)
+    end_date = models.DateField(default=datetime.date.today)
+    student = models.OneToOneField(
+        Student, primary_key=True, on_delete=models.CASCADE)
+
+    @classmethod
+    def get_profile_info(cls, email):
+        attachment_info = cls.objects.get(email=email).first()
+        return attachment_info
+
+
+class LogBook(models.Model):
+    date = models.DateField(auto_now=False)
+    activity = models.CharField(max_length=1000)
+    status = models.BooleanField(default=False)
+    student = models.ForeignKey(Student, on_delete=models.CASCADE, )
+
+    def verify(self):
+        self.verified = True
+        return True
+
+
+class Supervisor(models.Model):
+    name = models.CharField(max_length=255)
+    postion = models.CharField(max_length=255)
+    phone = models.CharField(max_length=20)
+    photo_url = models.ImageField(upload_to="images/")
+    user = models.OneToOneField(
+        User, primary_key=True, on_delete=models.CASCADE)
+
+
+class Comments(models.Model):
+    comment = models.CharField(max_length=1000)
+    supervisor = models.ForeignKey(Supervisor, on_delete=models.CASCADE)
+    logbook = models.ForeignKey(LogBook, on_delete=models.CASCADE)
+
+    @classmethod
+    def get_comments(cls, id):
+        comments = cls.objects.filter(update__id=id)
+        return comments
+
+    def save_comment(self):
+        self.save()
+
+    def __str__(self):
+        return self.comment
+
+
+class Employer(models.Model):
+    name = models.CharField(max_length=255)
+    organisation = models.CharField(max_length=255)
+    postion = models.CharField(max_length=255)
+    phone = models.CharField(max_length=20)
+    photo_url = models.ImageField(upload_to="images/")
+    user = models.OneToOneField(
+        User, primary_key=True, on_delete=models.CASCADE)
+
+
+class EmployerComment(models.Model):
+    comment = models.CharField(max_length=1000)
+    student = models.OneToOneField(Student, on_delete=models.CASCADE)
diff --git a/backend/app/serializers.py b/backend/app/serializers.py
new file mode 100644
index 0000000..01a2a6f
--- /dev/null
+++ b/backend/app/serializers.py
@@ -0,0 +1,94 @@
+from rest_framework import serializers
+from .models import *
+from django.contrib.auth import authenticate
+from rest_framework.exceptions import AuthenticationFailed
+
+class RegisterSerializer(serializers.ModelSerializer):
+    
+    password = serializers.CharField(max_length=68, min_length=6, write_only=True)
+    class Meta:
+        model = User
+        fields = ['email', 'username', 'user_type', 'password']
+        
+        
+    def validate(self, attrs):
+        email = attrs.get('email', '')
+        username = attrs.get('username', '')
+        user_type = attrs.get('user_type', '')
+        
+        if not email:
+            raise serializers.ValidationError('Users should have an Email.')
+        
+        return attrs
+    def create(self, validated_data):
+        
+        return User.objects.create_user(**validated_data)
+    
+    
+    
+class LoginSerializer(serializers.ModelSerializer):
+    
+    email = serializers.EmailField(max_length=255, min_length=3 )
+    password=serializers.CharField(max_length=68, min_length=6, write_only=True)
+    username =serializers.CharField(max_length=255, min_length=3, read_only=True)
+    user_type =serializers.CharField(max_length=255, min_length=3, read_only=True)
+    authenticated = serializers.BooleanField(read_only=True)
+    class Meta:
+        model=User
+        fields = ['email',  'password', 'username', 'user_type', 'authenticated']
+    
+    def validate(self, attrs):
+        email =attrs.get('email', '')
+        password= attrs.get('password', '')
+        
+        
+        user = authenticate(email=email, password=password)
+        
+        if not user:
+            raise AuthenticationFailed('Invalid credetinals')
+        
+        if not user.is_active:
+                raise AuthenticationFailed('Account disabled contact Admin.')
+                
+        return {
+            
+            'email': user.email,
+            'username': user.username,
+            'user_type': user.user_type, 
+            'authenticated': user
+        }
+        
+        
+        
+class StudentSerializer(serializers.ModelSerializer):
+    
+    admission_no = serializers.CharField(max_length=100)
+    name = serializers.CharField(max_length=255)
+    course = serializers.CharField(max_length=255)
+    department = serializers.CharField(max_length=255)
+    photo_url = serializers.ImageField(required=False)
+    user = serializers.ReadOnlyField(source='user.email')
+  
+    
+    class Meta:
+        model = Student
+        fields = ['admission_no', 'name', 'course', 'department', 'photo_url', 'user']
+
+    def validate(self, attrs):
+        admission =attrs.get('admission_no', '')
+        
+        if not admission:
+            raise ValueError("Student must have admission number")
+        
+        return attrs
+    def create(self, validated_data):
+        user = self.context
+        return Student.objects.create(**validated_data, user = user)
+        
+        
+        
+        
+        
+        
+    
+      
\ No newline at end of file
diff --git a/backend/app/static/css/Card.css b/backend/app/static/css/Card.css
new file mode 100644
index 0000000..3a9910a
--- /dev/null
+++ b/backend/app/static/css/Card.css
@@ -0,0 +1,49 @@
+
+  .card{
+
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 1px 3px 10px #e9ecef;
+    padding: 15px;
+   
+  
+  }
+
+ 
+.toggle-btn{
+  padding: 10px 30px;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: none;
+  position: relative;
+}
+
+#btn {
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 110px;
+  height: 100%;
+  background: linear-gradient(to right, green,peru);
+  border-radius: 30px;
+  transition: .5s;
+  }
+
+  .button-box{
+    width: 200px;
+    margin: 35px auto;
+    position: relative;
+    box-shadow: 0 0 24px 5px lightgreen;
+    border-radius: 30px;
+    display: flex;
+    height: 41px;
+    
+}
+
+#view{
+  left: 50px;
+}
+#editform{
+  left: 450px;
+}
\ No newline at end of file
diff --git a/backend/app/static/css/index.css b/backend/app/static/css/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/backend/app/static/css/profile.css b/backend/app/static/css/profile.css
new file mode 100644
index 0000000..e219a6a
--- /dev/null
+++ b/backend/app/static/css/profile.css
@@ -0,0 +1,186 @@
+
+.helptext {
+  display: none;
+}
+.my_warapper {
+  height: auto;
+  width: 100%;
+  position: absolute;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+  url(../images/profile.jpg);
+  background-size: cover;
+  background-position: center;
+}
+
+.form-box {
+  width: 400px;
+  height: 75vh;
+  position: relative;
+  margin: 6% auto;
+  background: white;
+  padding: 5px;
+  overflow: hidden;
+  box-shadow: 7px 4px 8px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  overflow-y: scroll;
+  
+}
+
+.form-box::-webkit-scrollbar {
+    width: 10px;
+    
+  }
+
+  .form-box::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+  }
+
+  .form-box::-webkit-scrollbar-thumb {
+    background: #888;
+  }
+
+.button-box {
+  width: 200px;
+  margin: 20px auto;
+  position: relative;
+  box-shadow: 0 0 20px 9px whitesmoke;
+  border-radius: 30px;
+}
+
+.toggle-btn {
+  padding: 10px 30px;
+  cursor: pointer;
+  background: transparent;
+  outline: none;
+  position: relative;
+}
+
+#btn {
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 110px;
+  height: 100%;
+  background: linear-gradient(to right, green, peru);
+  border-radius: 30px;
+  transition: 0.5s;
+}
+
+h1 {
+  margin-top: 17px;
+  padding: 0 0 20px;
+  text-align: center;
+  font-size: 12px;
+  color: green;
+}
+
+.input-group {
+  top: 100px;
+  position: absolute;
+  width: 280px;
+  transition: 0.5s;
+}
+
+.input-field {
+  width: 100%;
+  padding: 10px 0;
+  margin: 5px 0;
+  border-left: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  outline: none;
+  background: transparent;
+}
+
+.submit-btn {
+  width: 75%;
+  padding: 10px 30px;
+  cursor: pointer;
+  display: block;
+  margin: auto;
+  background: green;
+  border: 0;
+  outline: none;
+  color: #fff;
+  border-radius: 20px;
+  margin-top: 26px;
+  margin-bottom: 4px;
+}
+
+.submit-btn:hover {
+  cursor: pointer;
+  background: green;
+  color: black;
+}
+
+.chech-box {
+  margin: 30px 10px 30px 0;
+}
+
+span {
+  color: #777;
+  font-size: 12px;
+  bottom: 64px;
+  position: absolute;
+}
+
+#login {
+  left: 50px;
+  margin-top: 20px;
+}
+#signup {
+  left: 450px;
+}
+
+#logo {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 17px;
+  width: 31%;
+}
+
+#logoLogin {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 31%;
+}
+
+
+#card {
+    box-shadow: 7px 4px 8px 0 rgba(0, 0, 0, 0.2);
+    max-width: 300px;
+    margin: auto;
+    text-align: center;
+  }
+  
+  .title {
+    color: grey;
+    font-size: 18px;
+  }
+  
+  #cardbtn {
+    border: none;
+    outline: 0;
+    display: inline-block;
+    padding: 8px;
+    color: white;
+    background-color: #000;
+    text-align: center;
+    cursor: pointer;
+    width: 100%;
+    font-size: 18px;
+  }
+  
+  #card a {
+    text-decoration: none;
+    font-size: 22px;
+    color: black;
+  }
+  
+  #cardbtn:hover, #card a:hover {
+    opacity: 0.7;
+  }
\ No newline at end of file
diff --git a/backend/app/static/css/style.css b/backend/app/static/css/style.css
new file mode 100644
index 0000000..fd50a2b
--- /dev/null
+++ b/backend/app/static/css/style.css
@@ -0,0 +1,166 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
+* {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+.helptext {
+  display: none;
+}
+.hero {
+  height: 650px;
+  width: 100%;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    url(../images/TUK1.jpg);
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+}
+
+.form-box {
+  width: 400px;
+  height: 550px;
+  position: relative;
+  margin: 6% auto;
+  background: white;
+  padding: 5px;
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+.button-box {
+  width: 200px;
+  margin: 35px auto;
+  position: relative;
+  box-shadow: 0 0 20px 9px lightgreen;
+  border-radius: 30px;
+}
+
+.toggle-btn {
+  padding: 10px 30px;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: none;
+  position: relative;
+}
+
+#btn {
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 110px;
+  height: 100%;
+  background: linear-gradient(to right, green, peru);
+  border-radius: 30px;
+  transition: 0.5s;
+}
+
+h1 {
+  margin-top: 17px;
+  padding: 0 0 20px;
+  text-align: center;
+  font-size: 12px;
+  color: green;
+}
+
+.input-group {
+  top: 180px;
+  position: absolute;
+  width: 280px;
+  transition: 0.5s;
+}
+
+.input-field {
+  width: 100%;
+  padding: 10px 0;
+  margin: 5px 0;
+  border-left: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  outline: none;
+  background: transparent;
+}
+
+.submit-btn {
+  width: 75%;
+  padding: 10px 30px;
+  cursor: pointer;
+  display: block;
+  margin: auto;
+  background: green;
+  border: 0;
+  outline: none;
+  color: #fff;
+  border-radius: 20px;
+  margin-top: 26px;
+  margin-bottom: 4px;
+}
+
+.submit-btn:hover {
+  cursor: pointer;
+  background: green;
+  color: black;
+}
+
+.chech-box {
+  margin: 30px 10px 30px 0;
+}
+
+span {
+  color: #777;
+  font-size: 12px;
+  bottom: 64px;
+  position: absolute;
+}
+
+#login {
+  left: 50px;
+  margin-top: 20px;
+}
+#signup {
+  left: 450px;
+}
+
+
+#logo{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 17px;
+  width: 31%
+}
+
+#logoLogin{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 31%
+}
+
+#toLogin{
+
+  text-decoration: none;
+  font-size: 10.6px;
+  text-align: center;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 15px;
+  width: 55%;
+  color: green
+}
+
+#toRegister{
+  text-decoration: none;
+  font-size: 11px;
+  text-align: center;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
+  width: 55%;
+  color: green
+}
\ No newline at end of file
diff --git a/backend/app/static/css/style2.css b/backend/app/static/css/style2.css
new file mode 100644
index 0000000..00f7a50
--- /dev/null
+++ b/backend/app/static/css/style2.css
@@ -0,0 +1,294 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .logo-details{
+    height: 80px;
+    width:  100%;
+    display: flex;
+    align-items: center;
+}
+
+
+.sidebar .logo-details i{
+    font-size: 28px;
+    font-weight: 500;
+    color:transparent;
+    min-width: 60px;
+    text-align: center;
+
+}
+.sidebar .logo-details .logo_name{
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+}
+
+.sidebar .nav-links{
+    margin-top: 16px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+
+
+.home-section nav .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background: #f5f6fa;
+    border: 2px solid #efeef1;
+    border-radius: 6px;
+    padding: 0 15px 0 2px;
+}
+
+nav .profile-details img{
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+nav .profile-details .admin_name{
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 10px;
+    white-space: norwap;
+}
+
+nav .profile-details i{
+    color: #333;
+    font-size: 25px;
+}
+
+.comment-box {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: 500px;
+}
+.comment-box h2 {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 15px;
+}
+.comment-box input {
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    border: 1px solid #86b0b6;
+}
+.comment-box input:focus {
+    border: 1px solid #000;
+    outline: 0;
+}
+.comment-box textarea {
+    width: 100%;
+    height: 150px;
+    padding: 15px 20px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid #86b0b6 ;
+}
+.comment-box textarea:focus {
+    border: 1px solid #000;
+    outline: 0;
+}
+.comment-box button {
+    border: 0;
+    padding: 10px 30px;
+    background: green;
+    font-size: 18px;
+    border-radius: 5px;
+    color: whitesmoke;
+}
+.comment-box button:hover {
+    background-color: peru;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 60px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .comment-box {
+        flex-direction: column;
+    }
+    .home-section .comment-box h2{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .comment-box input{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .comment-box input{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .comment-box  {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .comment-box input{
+        width: 500px;
+    }
+   
+}
\ No newline at end of file
diff --git a/backend/app/static/css/style3.css b/backend/app/static/css/style3.css
new file mode 100644
index 0000000..77536e8
--- /dev/null
+++ b/backend/app/static/css/style3.css
@@ -0,0 +1,234 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .logo-details{
+    height: 80px;
+    width:  100%;
+    display: flex;
+    align-items: center;
+}
+
+
+.sidebar .logo-details i{
+    font-size: 28px;
+    font-weight: 500;
+    color:transparent;
+    min-width: 60px;
+    text-align: center;
+
+}
+.sidebar .logo-details .logo_name{
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+}
+
+.sidebar .nav-links{
+    margin-top: 16px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+
+
+.home-section nav .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background: #f5f6fa;
+    border: 2px solid #efeef1;
+    border-radius: 6px;
+    padding: 0 15px 0 2px;
+}
+
+nav .profile-details img{
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+nav .profile-details .admin_name{
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 10px;
+    white-space: norwap;
+}
+
+nav .profile-details i{
+    color: #333;
+    font-size: 25px;
+}
+
+
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 60px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .interns-boxes {
+        flex-direction: column;
+    }
+    .home-section .interns-boxes .box{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .interns-boxes .workshops-intern{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .overview-boxes .box{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .overview-boxes .box{
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .interns-boxes .interns-details{
+        width: 590px;
+    }
+}
\ No newline at end of file
diff --git a/backend/app/static/css/styles.css b/backend/app/static/css/styles.css
new file mode 100644
index 0000000..57dd455
--- /dev/null
+++ b/backend/app/static/css/styles.css
@@ -0,0 +1,341 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background:green;
+    border-radius: 50%;
+    padding: 0 15px 0 2px;
+    justify-content: center;
+    margin-top: 40px;
+     
+    
+}
+
+.sidebar .profile-details img{
+    height: 80px;
+    width: 80px;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+
+
+
+
+.sidebar .nav-links{
+    margin-top: 50px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.submit-btn {
+    width: 55%;
+    padding: 10px 30px;
+    cursor: pointer;
+    display: block;
+    margin: auto;
+    background:green;
+    border: 0;
+    outline: none;
+    color: whitesmoke;
+    border-radius: 2px;
+    margin-top: 80px;
+    font-weight: 400;
+    font-size: 15px;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.submit-btn:hover {
+    cursor:pointer;
+    background:whitesmoke;
+    color: black;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+
+.home-section .home-content{
+    position: relative;
+    padding-top: 20px;
+}
+
+
+
+
+.home-section .interns-boxes{
+    display: flex;
+    justify-content: space-between;
+    padding: 1px;
+   
+}
+
+.home-section .interns-boxes .recent-intern{
+    width: 100%;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    padding: 110px;
+}
+
+
+
+.home-section .interns-boxes .interns-details{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.home-section .interns-boxes .box .title{
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section .interns-boxes .box .topic{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.home-section .interns-boxes .box li{
+    list-style: none;
+    margin: 10px 0;
+    padding: 2px 12px;
+    margin-top: 4px;
+}
+
+.interns-boxes .box li a{
+    color: #333;
+    font-size: 18px;
+    font-weight: 400;
+    text-decoration: none;
+   
+}
+
+.home-section .interns-boxes .box .button li{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+   
+   
+    
+}
+
+.interns-boxes .box .button li a{
+    font-size: 18px;
+    font-weight: 400;
+    
+    color: #fff;
+    background:#008000;
+    padding: 2px 12px;
+    margin-top: 4px;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+.interns-boxes .box .button a:hover{
+    background: peru;
+
+}
+
+/*right side*/
+.home-section .interns-boxes .workshops-intern{
+    width: 35%;
+    margin-left: 20px;
+    background: #fff;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+    border-radius: 12px;
+}
+
+.interns-boxes .workshops-intern li{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.interns-boxes .workshops-intern li a{
+    display: flex;
+    align-items: center;
+}
+
+.interns-boxes .workshops-intern img{
+    margin-right: 8px;
+    height: 40px;
+    width: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+}
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 220px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .interns-boxes {
+        flex-direction: column;
+    }
+    .home-section .interns-boxes .box{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .interns-boxes .workshops-intern{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .overview-boxes .box{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .overview-boxes .box{
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .interns-boxes .interns-details{
+        width: 590px;
+    }
+}
+
diff --git a/backend/app/static/css/styles1.css b/backend/app/static/css/styles1.css
new file mode 100644
index 0000000..fc6ab62
--- /dev/null
+++ b/backend/app/static/css/styles1.css
@@ -0,0 +1,296 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+
+
+.sidebar .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background:green;
+    border-radius: 50%;
+    padding: 0 15px 0 2px;
+    justify-content: center;
+    margin-top: 40px;
+     
+    
+}
+
+.sidebar .profile-details img{
+    height: 80px;
+    width: 80px;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+
+
+.sidebar .nav-links{
+    margin-top: 50px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.submit-btn{
+    width: 55%;
+    padding: 10px 30px;
+    cursor: pointer;
+    display: block;
+    margin: auto;
+    background:green;
+    border: 0;
+    outline: none;
+    color: whitesmoke;
+    border-radius: 2px;
+    margin-top: 80px;
+    font-weight: 400;
+    font-size: 15px;
+    align-items: center;
+}
+
+.submit-btn:hover{
+    cursor:pointer;
+    background:whitesmoke;
+    color: black;
+}
+
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+
+
+
+
+
+
+
+.comment-box {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: 500px;
+}
+.comment-box h2 {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 15px;
+}
+.comment-box input {
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    border: 1px solid #86b0b6;
+}
+.comment-box input:focus {
+    border: 1px solid #000;
+    outline: 0;
+}
+.comment-box textarea {
+    width: 100%;
+    height: 150px;
+    padding: 15px 20px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid #86b0b6 ;
+}
+.comment-box textarea:focus {
+    border: 1px solid #000;
+    outline: 0;
+}
+.comment-box button {
+    border: 0;
+    padding: 10px 30px;
+    background: green;
+    font-size: 18px;
+    border-radius: 5px;
+    color: whitesmoke;
+    margin-top: 20px;
+}
+.comment-box button:hover {
+    background-color: peru;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 220px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .comment-box {
+        flex-direction: column;
+    }
+    .home-section .comment-box h2{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .comment-box input{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .comment-box input{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .comment-box  {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .comment-box input{
+        width: 500px;
+    }
+   
+}
\ No newline at end of file
diff --git a/backend/app/static/css/supervisor.css b/backend/app/static/css/supervisor.css
new file mode 100644
index 0000000..e69de29
diff --git a/backend/app/static/css/sytle1.css b/backend/app/static/css/sytle1.css
new file mode 100644
index 0000000..5c09ab6
--- /dev/null
+++ b/backend/app/static/css/sytle1.css
@@ -0,0 +1,464 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .logo-details{
+    height: 80px;
+    width:  100%;
+    display: flex;
+    align-items: center;
+}
+
+
+.sidebar .logo-details i{
+    font-size: 28px;
+    font-weight: 500;
+    color:transparent;
+    min-width: 60px;
+    text-align: center;
+
+}
+.sidebar .logo-details .logo_name{
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+}
+
+.sidebar .nav-links{
+    margin-top: 16px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+.home-section nav .search-box{
+    height: 50px;
+    width: 550px;
+    margin: 0 20px;
+    position: relative;
+}
+nav .search-box input{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    padding: 0 15px;
+    font-size: 17px;
+    color: black;
+    background: #f5f6fa;
+    border: 2px solid peru;
+    outline: none;
+}
+
+nav .search-box .fa-search{
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 40px;
+    width: 40px;
+    background: green;
+    border-radius: 6px;
+    color: #fff;
+    font-size: 22px;
+    line-height: 40px;
+    text-align: center;
+}
+
+.home-section nav .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background: #f5f6fa;
+    border: 2px solid #efeef1;
+    border-radius: 6px;
+    padding: 0 15px 0 2px;
+}
+
+nav .profile-details img{
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+nav .profile-details .admin_name{
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 10px;
+    white-space: norwap;
+}
+
+nav .profile-details i{
+    color: #333;
+    font-size: 25px;
+}
+
+.home-section .home-content{
+    position: relative;
+    padding-top: 100px;
+}
+
+.home-content .overview-boxes{
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 20px;
+    flex-wrap: wrap;
+}
+
+.home-content .overview-boxes .box{
+    width: calc(100% / 4 - 15px);
+    display: flex;
+    justify-content: center;
+    padding: 15px 14px;
+    align-items: center;
+    background: #fff;
+    border-radius: 15px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+.home-content .overview-boxes .box_topic{
+    font-size: 20px;
+    font-weight: 500;
+   
+}
+
+.home-content .overview-boxes .number{
+    font-size: 35px;
+    font-weight: 500;
+    margin-top: -5px;
+    display: inline-block;
+}
+
+.overview-boxes .indicater{
+    display: flex;
+    align-items: center;
+}
+
+.overview-boxes .indicater i{
+    height: 20px;
+    width: 20px;
+    background:#008000;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 20px;
+    margin-right: 5px;
+}
+
+.overview-boxes .indicater .text{
+    font-size: 12px;
+}
+
+.overview-boxes .box .building{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background: lightgreen;
+    color: #008000;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.overview-boxes .box .user{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background: palegoldenrod;
+    color: peru;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.overview-boxes .box .user2{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background:lightblue;
+    color:blue;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.overview-boxes .box .p{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background:lightcoral;
+    color:red;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.home-section .interns-boxes{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
+.home-section .interns-boxes .recent-intern{
+    width: 75%;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+
+
+.home-section .interns-boxes .interns-details{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.home-section .interns-boxes .box .title{
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section .interns-boxes .box .topic{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.home-section .interns-boxes .box li{
+    list-style: none;
+    margin: 10px 0;
+}
+
+.interns-boxes .box li a{
+    color: #333;
+    font-size: 18px;
+    font-weight: 400;
+    text-decoration: none;
+}
+
+.interns-boxes .button{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.interns-boxes .button a{
+    font-size: 15px;
+    font-weight: 400;
+    color: #fff;
+    background:#008000;
+    padding: 4px 12px;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+.interns-boxes .button a:hover{
+    background: peru;
+
+}
+
+/*right side*/
+.home-section .interns-boxes .workshops-intern{
+    width: 35%;
+    margin-left: 20px;
+    background: #fff;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+    border-radius: 12px;
+}
+
+.interns-boxes .workshops-intern li{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.interns-boxes .workshops-intern li a{
+    display: flex;
+    align-items: center;
+}
+
+.interns-boxes .workshops-intern img{
+    margin-right: 8px;
+    height: 40px;
+    width: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+}
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 60px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .interns-boxes {
+        flex-direction: column;
+    }
+    .home-section .interns-boxes .box{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .interns-boxes .workshops-intern{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .overview-boxes .box{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .overview-boxes .box{
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .interns-boxes .interns-details{
+        width: 590px;
+    }
+}
+
diff --git a/backend/app/static/images/TUK1.jpg b/backend/app/static/images/TUK1.jpg
new file mode 100644
index 0000000..8b2ff27
Binary files /dev/null and b/backend/app/static/images/TUK1.jpg differ
diff --git a/backend/app/static/images/tuk-logo.jpg b/backend/app/static/images/tuk-logo.jpg
new file mode 100644
index 0000000..e4d256f
Binary files /dev/null and b/backend/app/static/images/tuk-logo.jpg differ
diff --git a/backend/app/tests.py b/backend/app/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/backend/app/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/backend/app/urls.py b/backend/app/urls.py
new file mode 100644
index 0000000..f88e96f
--- /dev/null
+++ b/backend/app/urls.py
@@ -0,0 +1,33 @@
+from django.urls import path
+from .views import *
+from django.conf import settings
+from django.conf.urls.static import static
+urlpatterns = [
+    ## authentication paths
+    path('register/', register, name='register'),
+    path('login/', login_view, name='login'),
+     path('logout/', logout_view, name='logout'),
+    ## student paths
+    path('add_attachment/', add_attachment, name="add_attachment"),
+    path('view_attachments/', view_attachments, name='view_attachments'),
+    path('student_profile/', student_profile, name="student_profile"),
+    path('add_logbook/', add_logbook, name="add_logbook"),
+    path('search_logbook/', search_logbook, name="search_logbook"),
+    
+   ## supervisor paths
+   path('supervisor_dashboard/', supervisor_dashboard, name="supervisor_dashboard"),
+   path('supervisor_feedback/<str:email>', supervisor_feedback, name="supervisor_feedback"),
+   path('log_feed/<int:log_id>', logbook_comment, name="logbook_comment"),
+   path('supervisor_profile/', supervisor_profile, name='supervisor_profile'),
+   
+   path('employer_dashboard/', employer_dashboard, name="employer_dashboard"),
+   path('employer_comment/<str:email>', employer_comment, name="employer_comment"),
+   path('employer_profile/', employer_profile, name = "employer_profile" )
+   
+   
+]
+
+
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL,
+                          document_root=settings.MEDIA_ROOT)
diff --git a/backend/app/views.py b/backend/app/views.py
new file mode 100644
index 0000000..50d8fad
--- /dev/null
+++ b/backend/app/views.py
@@ -0,0 +1,301 @@
+from django.shortcuts import redirect, render
+from django.contrib import messages
+from django.contrib.auth import login, logout, authenticate
+from django.contrib.auth.decorators import login_required
+from django.shortcuts import render, redirect, HttpResponse, HttpResponseRedirect, get_object_or_404
+from django.utils.http import is_safe_url
+from django.urls import reverse
+from .forms import *
+
+# # Authentication Views ##
+
+
+def register(request):
+    form = CustomUserCreationForm()
+    if request.method == 'POST':
+        form = CustomUserCreationForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(
+                request, f'{form.cleaned_data["email"]} registered successfullly')
+            return redirect('login')
+    context = {'form': form}
+    return render(request, 'app/register.html', context)
+
+
+def login_view(request):
+    email = ""
+    if request.method == 'POST':
+        email = request.POST.get('email')
+        password = request.POST.get('password')
+        remember_me = request.POST.get('remember_me')
+        user = authenticate(request, email=email, password=password)
+        if user is not None:
+            login(request, user)
+            messages.success(
+                request, f'{user.username} logged in successfully.')
+            if user.user_type == "supervisor":
+                return redirect('supervisor_dashboard')
+            if user.user_type == "employer":
+                return redirect('employer_dashboard')
+            if user.user_type == "student":
+                return redirect('add_attachment')
+            
+            messages.success(request, 'Logged In successfully.')
+
+        else:
+            messages.warning(request, 'password or email is incorrect.')
+    return render(request, 'app/login.html', context={"email": email})
+
+
+def logout_view(request):
+    print(request.user.user_type)
+    messages.success(request, 'Logged out In successfully.')
+    logout(request)
+    return redirect('login')
+
+
+# # Student Views ##
+@login_required(login_url='/attachment/login/')
+def add_attachment(request):
+    current_user = request.user
+    if not request.user.updated_profile:
+        messages.success(
+            request, f'update your profile detail')
+        return redirect('student_profile')
+
+    if request.method == 'POST':
+        attachment_name = request.POST.get('attachment')
+        department_name = request.POST.get('department')
+        start_date = request.POST.get("start")
+        end_date = request.POST.get('end')
+        attachment = Attachment.objects.create(
+
+            attachment_name=attachment_name,
+            department_name=department_name,
+            start_date=start_date,
+            end_date=end_date,
+            student=request.user.student
+
+        )
+        attachment.save()
+
+    return render(request, 'app/attachment.html', locals())
+
+
+@login_required(login_url='/attachment/login/')
+def view_attachments(request):
+    attachments = Attachment.objects.all()[::-1]
+    return render(request, "app/view-attachment.html", locals())
+
+
+@login_required(login_url='/attachment/login/')
+def student_profile(request):
+    current_user = request.user
+    profile = Student.objects.filter(user=current_user)
+
+    if request.method == 'POST':
+        name = request.POST.get('name')
+        admission_no = request.POST.get('admission_no')
+        course = request.POST.get("course")
+        print(type(request.POST.get('year')))
+        level = int(request.POST.get('year'))
+        pic = request.FILES.get('pic')
+
+        if not current_user.updated_profile:
+            profile = Student.objects.create(
+
+                admission_no=admission_no,
+                name=name,
+                course=course,
+                year=level,
+                photo_url=pic,
+                user=current_user
+
+            )
+            profile.user.updated_profile = True
+            current_user.save()
+        else:
+            student = Student.objects.get(
+                admission_no=current_user.student.admission_no)
+            student.admission_no = admission_no
+            student.name = name
+            student.course = course
+            student.year = level
+            student.photo_url = pic
+            student.save()
+    return render(request, 'app/student_profile.html', locals())
+
+
+@login_required(login_url='/attachment/login/')
+def add_logbook(request):
+    current_user = request.user
+    if request.method == 'POST':
+        activity = request.POST.get('activity')
+        date = request.POST.get('date')
+
+        log_book = LogBook.objects.create(
+
+            activity=activity,
+            date=date,
+            student=request.user.student
+        )
+
+    return render(request, 'app/add-logbook.html', locals())
+
+
+@login_required(login_url='/attachment/login/')
+def search_logbook(request):
+    current_user = request.user
+    print(current_user.student.photo_url.url)
+    log_books = None
+    if request.method == 'POST':
+        from_date = request.POST.get('from')
+        to_date = request.POST.get('to')
+        log_books = LogBook.objects.filter(date__range=(
+            from_date, to_date), student=current_user.student)
+        return render(request, "app/view-logbooks.html", locals())
+    return render(request, "app/view-logbooks.html", locals())
+
+
+def view_comments(request):
+    pass
+
+# Supervisor views
+
+
+def supervisor_dashboard(request):
+    supervisor = request.user.supervisor
+    if not request.user.updated_profile:
+        messages.success(
+            request, f'update your profile detail')
+        return redirect('supervisor_profile')
+    students = User.objects.filter(user_type='student')[::-1]
+    return render(request, "app/supervisor-dashboard.html", locals())
+
+
+@login_required(login_url='/attachment/login/')
+def supervisor_profile(request):
+    current_user = request.user
+    profile = Supervisor.objects.filter(user=current_user)
+
+    if request.method == 'POST':
+        name = request.POST.get('name')
+        position = request.POST.get('position')
+        phone = request.POST.get("phone")
+        pic = request.FILES.get('pic')
+
+        if not current_user.updated_profile:
+            profile = Supervisor.objects.create(
+
+                name=name,
+                postion=position,
+                phone=phone,
+                photo_url=pic,
+                user=current_user
+
+            )
+            profile.user.updated_profile = True
+            current_user.save()
+        else:
+            supervisor = Supervisor.objects.get(
+                pk=current_user.pk)
+
+            supervisor.name = name
+            supervisor.postion = position
+            supervisor.phone = phone
+            supervisor.photo_url = pic
+            supervisor.save()
+    return render(request, 'app/supervisor_profile.html', locals())
+
+
+def supervisor_feedback(request, email):
+    student = User.objects.get(email=email).student
+    log_books = None
+    if request.method == 'POST':
+        from_date = request.POST.get('from')
+        to_date = request.POST.get('to')
+        print(f'from {from_date} , end {to_date} {student}')
+        log_books = LogBook.objects.filter(
+            date__range=(from_date, to_date), student=student)
+    return render(request, "app/logbook_feedback.html", locals())
+
+
+def logbook_comment(request, log_id):
+    supervisor = request.user.supervisor
+    logbook = get_object_or_404(LogBook, pk=log_id)
+    if request.method == 'POST':
+        comment = Comments.objects.create(
+
+            comment=request.POST.get('comment'),
+            logbook=logbook,
+            supervisor=supervisor
+        )
+        logbook.status = True
+        logbook.save()
+        next_url = request.POST.get('next')
+        # if not next_url or not is_safe_url(url=next_url, allowed_hosts=request.get_host()):
+        #     next_url = reverse('supervisor_dashboard')
+        return HttpResponseRedirect(next_url)
+
+
+def employer_dashboard(request):
+    current_user = request.user
+    if not request.user.updated_profile:
+        messages.success(
+            request, f'update your profile detail')
+        return redirect('employer_profile')
+    students = User.objects.filter(user_type='student')[::-1]
+
+    return render(request, "app/employer_dashboard.html", locals())
+
+
+@login_required(login_url='/attachment/login/')
+def employer_profile(request):
+    current_user = request.user
+    profile = Employer.objects.filter(user=current_user)
+
+    if request.method == 'POST':
+        name = request.POST.get('name')
+        organisation = request.POST.get('organisation')
+        position = request.POST.get('position')
+        phone = request.POST.get("phone")
+        pic = request.FILES.get('pic')
+
+        if not current_user.updated_profile:
+            profile = Employer.objects.create(
+
+                name=name,
+                postion=position,
+                organisation=organisation,
+                phone=phone,
+                photo_url=pic,
+                user=current_user
+
+            )
+            profile.user.updated_profile = True
+            current_user.save()
+        else:
+            employer = Employer.objects.get(
+                pk=current_user.pk)
+
+            employer.name = name
+            employer.organisation=organisation
+            employer.postion = position
+            employer.phone = phone
+            employer.photo_url = pic
+            employer.save()
+    return render(request, 'app/employer_profile.html', locals())
+
+
+def employer_comment(request, email):
+    current_user = request.user
+    student = User.objects.get(email=email).student
+    if request.method == 'POST':
+        comment = EmployerComment.objects.create(
+
+            comment=request.POST.get('feedback'),
+            student = student
+        )
+        return redirect('employer_dashboard')
+    return render(request, "app/employer_comment.html", locals())
diff --git a/backend/attachment/__init__.py b/backend/attachment/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/attachment/__pycache__/__init__.cpython-37.pyc b/backend/attachment/__pycache__/__init__.cpython-37.pyc
new file mode 100644
index 0000000..8b68d1a
Binary files /dev/null and b/backend/attachment/__pycache__/__init__.cpython-37.pyc differ
diff --git a/backend/attachment/__pycache__/settings.cpython-37.pyc b/backend/attachment/__pycache__/settings.cpython-37.pyc
new file mode 100644
index 0000000..9710074
Binary files /dev/null and b/backend/attachment/__pycache__/settings.cpython-37.pyc differ
diff --git a/backend/attachment/__pycache__/urls.cpython-37.pyc b/backend/attachment/__pycache__/urls.cpython-37.pyc
new file mode 100644
index 0000000..7f7e0d0
Binary files /dev/null and b/backend/attachment/__pycache__/urls.cpython-37.pyc differ
diff --git a/backend/attachment/__pycache__/wsgi.cpython-37.pyc b/backend/attachment/__pycache__/wsgi.cpython-37.pyc
new file mode 100644
index 0000000..1ec1edd
Binary files /dev/null and b/backend/attachment/__pycache__/wsgi.cpython-37.pyc differ
diff --git a/backend/attachment/asgi.py b/backend/attachment/asgi.py
new file mode 100644
index 0000000..a60efb2
--- /dev/null
+++ b/backend/attachment/asgi.py
@@ -0,0 +1,16 @@
+"""
+ASGI config for attachment project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'attachment.settings')
+
+application = get_asgi_application()
diff --git a/backend/attachment/settings.py b/backend/attachment/settings.py
new file mode 100644
index 0000000..7106f84
--- /dev/null
+++ b/backend/attachment/settings.py
@@ -0,0 +1,157 @@
+"""
+Django settings for attachment project.
+
+Generated by 'django-admin startproject' using Django 3.2.16.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/3.2/ref/settings/
+"""
+
+from pathlib import Path
+import os
+from django.contrib.messages import constants as messages
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure-2#2n-phd2ed7lr@&h3$77pv995g@w^8e2afw5kevcgp70*s3f5'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = ['*']
+
+AUTH_USER_MODEL = 'app.User'
+LOGIN_URL = 'login'
+LOGOUT_URL = 'logout'
+LOGOUT_REDIRECT_URL = 'login'
+
+# Application definition
+
+INSTALLED_APPS = [
+    
+    'app',
+    'rest_framework',
+    'corsheaders',
+    'crispy_forms',
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+     'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+CORS_ALLOWED_ORIGINS = [
+    'http://localhost:3000',
+]
+
+CORS_ALLOW_CREDENTIALS = True
+
+ROOT_URLCONF = 'attachment.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'attachment.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+# Internationalization
+# https://docs.djangoproject.com/en/3.2/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'Africa/Nairobi'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/3.2/howto/static-files/
+
+STATIC_URL = '/static/'
+
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static"),
+]
+
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+MEDIA_URL = '/media/'
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
+
+MESSAGE_TAGS = {
+        messages.DEBUG: 'alert-secondary',
+        messages.INFO: 'alert-info',
+        messages.SUCCESS: 'alert-success',
+        messages.WARNING: 'alert-warning',
+        messages.ERROR: 'alert-danger',
+ }
\ No newline at end of file
diff --git a/backend/attachment/urls.py b/backend/attachment/urls.py
new file mode 100644
index 0000000..3081acd
--- /dev/null
+++ b/backend/attachment/urls.py
@@ -0,0 +1,22 @@
+"""attachment URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/3.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path, include
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('attachment/',include('app.urls') ),
+]
diff --git a/backend/attachment/wsgi.py b/backend/attachment/wsgi.py
new file mode 100644
index 0000000..644fbf6
--- /dev/null
+++ b/backend/attachment/wsgi.py
@@ -0,0 +1,16 @@
+"""
+WSGI config for attachment project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/3.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'attachment.settings')
+
+application = get_wsgi_application()
diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
new file mode 100644
index 0000000..8fb75c8
Binary files /dev/null and b/backend/db.sqlite3 differ
diff --git a/backend/manage.py b/backend/manage.py
new file mode 100644
index 0000000..d18d498
--- /dev/null
+++ b/backend/manage.py
@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'attachment.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/backend/templates/app/add-logbook.html b/backend/templates/app/add-logbook.html
new file mode 100644
index 0000000..5986220
--- /dev/null
+++ b/backend/templates/app/add-logbook.html
@@ -0,0 +1,164 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div class="container mt-5">
+      <div>
+        <br />
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-4">
+              <div
+                class="d-flex flex-column flex-shrink-0 p-3"
+                style="width: 280px"
+              >
+                <a
+                  href="#"
+                  class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
+                  style="
+                    display: block;
+                    margin-left: 40px;
+                    margin-right: auto;
+                    margin-top: 17px;
+                    width: 31%;
+                  "
+                >
+                  {% if current_user.student.photo_url%}
+                  <img
+                    class="rounded-circle me-2"
+                    src="..{{current_user.student.photo_url.url}}"
+                    height="75"
+                    width="75"
+                    alt="Avatar"
+                  />
+                  {% else %}
+                  <img
+                    class="d-flex rounded-circle avatar z-depth-1-half mr-3"
+                    src=".././media/images/image.JPG"
+                    width="100px"
+                    alt="Avattar"
+                  />
+                  {% endif %}
+                </a>
+                <hr />
+                <ul class="nav nav-pills flex-column mb-auto mt-auto">
+                  <li class="nav-item">
+                    <a
+                      href="{%url 'add_attachment'%}"
+                      class="nav-link active bg-success"
+                      aria-current="page"
+                      ><i class="fa-solid fa-gauge"></i>
+                      &nbsp;&nbsp; Dashboard
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="{%url 'search_logbook'%}"
+                      class="nav-link link-dark text-success"
+                    >
+                      <i class="fa-solid fa-book"></i>
+                      &nbsp;&nbsp; Logbooks
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="{%url 'student_profile'%}"
+                      class="nav-link link-dark text-success"
+                    >
+                      <i class="fa-solid fa-user"></i>
+                      &nbsp;&nbsp; Profile
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="{%url 'logout'%}"
+                      class="nav-link link-dark text-success"
+                    >
+                      <i class="fa-solid fa-right-from-bracket"></i>
+                      &nbsp;&nbsp; Logout
+                    </a>
+                  </li>
+                </ul>
+                <hr />
+              </div>
+            </div>
+            <div class="card col-md-7 bg-light">
+              <div class="card-body">
+                <h3 class="text-center">UPDATE LOGBOOK</h3>
+                <hr />
+                <form method="post">
+                  {% csrf_token %}
+                  <div class="form-group">
+                    <label> Date</label>
+                    <input
+                      type="date"
+                      placeholder="date"
+                      name="date"
+                      class="form-control"
+                      id="date"
+                    />
+                  </div>
+                  <div class="form-group">
+                    <label> Activity: </label>
+                    <textarea
+                      placeholder="Activity"
+                      name="activity"
+                      class="form-control"
+                    ></textarea>
+                  </div>
+
+                  <button class="btn btn-sm btn-success" type="submit">
+                    Submit
+                  </button>
+                  <a
+                    href="{%url 'search_logbook'%}"
+                    class="btn btn-sm btn-warning"
+                    style="margin-left: 10px"
+                  >
+                    Cancel
+                  </a>
+                </form>
+              </div>
+              <div class="col-md-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- jQuery CDN - Slim version (=without AJAX) -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        document.getElementById("date").valueAsDate = new Date();
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/attachment.html b/backend/templates/app/attachment.html
new file mode 100644
index 0000000..8597e58
--- /dev/null
+++ b/backend/templates/app/attachment.html
@@ -0,0 +1,159 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="{% static 'css/index.css'%}" />
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="row mt-4">
+        <div class="col-md-3">
+          <div
+            class="d-flex flex-column flex-shrink-0 p-3 bg-light"
+            style="width: 280px"
+          >
+            <a
+              href="/"
+              class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
+              style="
+                display: block;
+                margin-left: 40px;
+                margin-right: auto;
+                margin-top: 17px;
+                width: 31%;
+              "
+            >
+              <img
+                src="..{{current_user.student.photo_url.url}}"
+                alt=""
+                width="75"
+                height="75"
+                class="rounded-circle me-2"
+              />
+            </a>
+            <hr />
+            <ul class="nav nav-pills flex-column mb-auto mt-auto">
+              <li class="nav-item">
+                <a
+                  href="{%url 'add_attachment'%}"
+                  class="nav-link active bg-success"
+                  aria-current="page"
+                  ><i class="fa-solid fa-gauge"></i>
+                  &nbsp;&nbsp; Dashboard
+                </a>
+              </li>
+              <li>
+                <a
+                  href="{%url 'search_logbook'%}"
+                  class="nav-link link-dark text-success"
+                >
+                  <i class="fa-solid fa-book"></i>
+                  &nbsp;&nbsp; Logbooks
+                </a>
+              </li>
+              <li>
+                <a
+                  href="{%url 'student_profile'%}"
+                  class="nav-link link-dark text-success"
+                >
+                  <i class="fa-solid fa-user"></i>
+                  &nbsp;&nbsp; Profile
+                </a>
+              </li>
+              <li>
+                <a
+                  href="{%url 'logout'%}"
+                  class="nav-link link-dark text-success"
+                >
+                  <i class="fa-solid fa-right-from-bracket"></i>
+                  &nbsp;&nbsp; Logout
+                </a>
+              </li>
+            </ul>
+            <hr />
+          </div>
+        </div>
+        <div class="col-md-7">
+          <div class="row">
+            <div class="col-md-1"></div>
+            <div class="col-md-8">
+              <form method="post">
+                {% csrf_token %}
+                <div class="form-group" controlId="form.Name">
+                  <label for="attachment">ATTACHMENT</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="attachment name"
+                    name="attachment"
+                    id="attachment"
+                    required
+                  />
+                </div>
+                <div class="form-group" controlId="form.Name">
+                  <label for="attachment">DEPARTMENT</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="department name"
+                    name="department"
+                    id="department"
+                    required
+                  />
+                </div>
+                <div class="form-group">
+                  <label for="start">START DATE</label>
+                  <input
+                    type="date"
+                    class="form-control"
+                    placeholder="start date"
+                    name="start"
+                    id="start"
+                    required
+                  />
+                </div>
+                <div class="form-group">
+                  <label for="end">END DATE</label>
+                  <input
+                    type="date"
+                    class="form-control"
+                    placeholder="end date"
+                    name="end"
+                    id="end"
+                    required
+                  />
+                </div>
+                <br />
+                <button type="submit" class="btn btn-sm btn-success">
+                  Add Attachment
+                </button>
+                &nbsp;&nbsp;&nbsp;
+                <a
+                  class="btn btn-sm btn-warning"
+                  href="{% url 'view_attachments' %}"
+                  >Cancel</a
+                >
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+  </body>
+</html>
diff --git a/backend/templates/app/employer_comment.html b/backend/templates/app/employer_comment.html
new file mode 100644
index 0000000..9adb954
--- /dev/null
+++ b/backend/templates/app/employer_comment.html
@@ -0,0 +1,109 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <title>Employer Dashboard</title>
+    <link rel="stylesheet" href="{% static 'css/styles1.css'%}" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <div class="sidebar">
+      <div class="profile-details">
+        {%if current_user.employer.photo_url %}
+        <img src="..{{current_user.employer.photo_url.url}}" alt="" />
+        {% else %}
+        <img
+          src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png"
+          alt=""
+        />
+        {% endif %}
+      </div>
+      <ul class="nav-links">
+        <li>
+          <a href="{% url 'employer_dashboard'%}">
+            <i class="fas fa-bars"></i>
+            <span class="link_name">Dashboard</span>
+          </a>
+        </li>
+        <li>
+          <a href="{% url 'employer_profile'%}">
+            <i class="fas fa-user"></i>
+            <span class="link_name">Profile</span>
+          </a>
+        </li>
+
+        <li>
+          <a href="{% url 'logout'%}">
+            <i class="fa-solid fa-right-from-bracket"></i>
+            <span class="link_name">Logout</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <section class="home-section">
+      <nav>
+        <div class="sidebar-button">
+          <i class="fas fa-bars sidebarBtn" style="color: green"></i>
+          <span class="dashboard"></span>
+        </div>
+      </nav>
+
+      <div class="comment-box">
+        <h6><b>FEEDBACK</b>:</h6>
+        <form action="#" method="post">
+            {% csrf_token %}
+          <textarea
+            name="feedback"
+            placeholder="Type your feedback here..."
+          ></textarea>
+          <button type="submit" class="btn btn-sm">Submit Feedback</button>
+        </form>
+      </div>
+    </section>
+
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        let sidebar = document.querySelector(".sidebar");
+        let sidebarBtn = document.querySelector(".sidebarBtn");
+
+        sidebarBtn.onclick = function () {
+          sidebar.classList.toggle("active");
+        };
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/employer_dashboard.html b/backend/templates/app/employer_dashboard.html
new file mode 100644
index 0000000..93deb3f
--- /dev/null
+++ b/backend/templates/app/employer_dashboard.html
@@ -0,0 +1,161 @@
+{%load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    <title>Employer Dashboard</title>
+    <link rel="stylesheet" href="{% static 'css/styles.css'%}" />
+  </head>
+  <body>
+    <div class="sidebar">
+      <div class="profile-details">
+        {%if current_user.employer.photo_url %}
+        <img src="..{{current_user.employer.photo_url.url}}" alt="" />
+        {% else %}
+        <img
+          src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png"
+          alt=""
+        />
+        {% endif %}
+      </div>
+
+      <ul class="nav-links">
+        <li>
+          <a href="{% url 'employer_dashboard'%}">
+            <i class="fas fa-bars"></i>
+            <span class="link_name">Dashboard</span>
+          </a>
+        </li>
+        <li>
+          <a href="{% url 'employer_profile'%}">
+            <i class="fas fa-user"></i>
+            <span class="link_name">Profile</span>
+          </a>
+        </li>
+        <li>
+          <a href="{% url 'logout'%}">
+            <i class="fa-solid fa-right-from-bracket"></i>
+            <span class="link_name">Logout</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <section class="home-section">
+      <nav>
+        <div class="sidebar-button">
+          <i class="fas fa-bars sidebarBtn " style="color: green; cursor:pointer"></i>
+          <span class="dashboard">Dashboard</span>
+        </div>
+      </nav>
+
+      <!--interns-content-->
+      <div class="interns-boxes">
+        <table class="table align-middle mb-0 bg-white w-auto ml-3 mr-2" style="margin-top: 79px;">
+          <thead class="bg-light">
+            <tr>
+              <th>Student Registration</th>
+              <th>Student Name</th>
+              <th>Department</th>
+              <th>Status</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {%for student in students %} {%if student.student.photo_url %}
+            <tr key="index">
+              <td>
+                <div class="d-flex align-items-center">
+                  <img
+                    src="..{{student.student.photo_url.url}}"
+                    alt=""
+                    style="width: 45px; height: 45px"
+                    class="rounded-circle"
+                  />&nbsp;&nbsp;
+                  <div class="ms-3">
+                    <p class="fw-bold mb-1"></p>
+                    <p class="text-muted mb-0">{{student.student.admission_no}}</p>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <p class="text-muted mb-0">{{student.student.name}}</p>
+              </td>
+              <td>
+                <div class="d-flex align-items-center">
+                  <p class="fw-normal mb-1">
+                    {{student.student.attachment.department_name}}
+                  </p>
+                </div>
+              </td>
+              <td>
+                <p class="fw-normal mb-1">
+                  {% if student.student.employercomment.comment%}
+                  <span class="badge badge-pill badge-success"
+                    ><i class="fa-solid fa-check"></i
+                  ></span>
+                  {% else %}
+                  <span class="badge badge-pill badge-warning p-.5"
+                    >Awaiting Approval ...</span
+                  >
+                  {% endif %}
+                </p>
+              </td>
+              <td>
+                <a
+                  href="{% url 'employer_comment' student.student.user.email%}"
+                  class="badge badge-success rounded-pill d-inline"
+                >
+                  view
+                </a>
+              </td>
+            </tr>
+            {% endif %} {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        let sidebar = document.querySelector(".sidebar");
+        let sidebarBtn = document.querySelector(".sidebarBtn");
+
+        sidebarBtn.onclick = function () {
+          sidebar.classList.toggle("active");
+        };
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/employer_profile.html b/backend/templates/app/employer_profile.html
new file mode 100644
index 0000000..258adb1
--- /dev/null
+++ b/backend/templates/app/employer_profile.html
@@ -0,0 +1,189 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    {% comment %}
+    <link rel="stylesheet" href="{% static 'css/Card.css'%}" />
+    {% endcomment %}
+    <link rel="stylesheet" href="{% static 'css/profile.css'%}" />
+  </head>
+  <body class="bg-light">
+    <div class="my_warapper">
+      <div class="form-box">
+        <div class="button-box">
+          <div id="btn"></div>
+          <a class="badge badge-pill btn-lg toggle-btn" id="myLogin">
+            Profile
+          </a>
+          <a type="button" class="badge badge-pill toggle-btn" id="mySignUp">
+            Edit
+          </a>
+        </div>
+        <div id="login" class="input-group">
+          {%if current_user.employer.photo_url %}
+          <div class="card" id="card" style="width: 100%; position: relative; box-shadow: 0 0 3px 1px lightgreen;">
+            <img
+              src="..{{current_user.employer.photo_url.url}}"
+              alt="John"
+              height="81"
+              width="81"
+              style="
+                border-radius: 50%;
+                border: 2.8px solid lightgreen;
+                -webkit-border-radius: 500px;
+                -moz-border-radius: 500px;
+                position: absolute;
+                top: -40px;
+                right: -10px;
+                left: 98px;
+              "
+            />
+            <div style="margin-top: 61px">
+              <h2 style="margin-top: auto">{{current_user.employer.name}}</h2>
+              <p class="title">{{current_user.employer.postion}}, {{current_user.employer.organisation}} </p>
+              <p>
+                <b>Contact:</b>
+                {{current_user.employer.phone}}
+              </p>
+            </div>
+          </div>
+          {% else %}
+          <div>
+            <h4
+              class="text-center"
+              style="position: absolute; top: 10px; right: 10px; left: 8px"
+            >
+              No profile
+            </h4>
+            <img
+              src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png"
+              alt="John Doe"
+              height="100"
+              width="100"
+              style="
+                border-radius: 50%;
+                position: absolute;
+                top: 55px;
+                right: -10px;
+                left: 98px;
+              "
+            />
+          </div>
+          {% endif %}
+        </div>
+        <form
+          id="signup"
+          class="input-group"
+          method="post"
+          enctype="multipart/form-data"
+        >
+          <h4 class="text-center">UPDATE PROFILE</h4>
+          {% csrf_token %}
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="name"
+              class="form-control"
+              placeholder="name"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="phone"
+              class="form-control"
+              placeholder="phone"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="organisation"
+              class="form-control"
+              placeholder="organisation"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="position"
+              class="form-control"
+              placeholder="position"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="file"
+              accept="image/*"
+              name="pic"
+              class="form-control"
+              style="padding: 20px"
+              required
+            />
+          </div>
+          <button class="btn btn-success btn-sm submit-btn" type="submit">
+            Update
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        var x = document.getElementById("login");
+        var y = document.getElementById("signup");
+        var z = document.getElementById("btn");
+
+        const signup = () => {
+          x.style.left = "-400px";
+          y.style.left = "50px";
+          z.style.left = "110px";
+        };
+        const login = () => {
+          x.style.left = "50px";
+          y.style.left = "450px";
+          z.style.left = "0";
+        };
+
+        $("#myLogin").on("click", () => {
+          login();
+        });
+        $("#mySignUp").on("click", () => {
+          signup();
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/logbook_feedback.html b/backend/templates/app/logbook_feedback.html
new file mode 100644
index 0000000..9a44e0c
--- /dev/null
+++ b/backend/templates/app/logbook_feedback.html
@@ -0,0 +1,258 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>supervisor</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.css"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="{% static 'css/supervisor.css'%}" />
+  </head>
+  <body>
+    <div class="container">
+      <p class="text-center"></p>
+      <div class="row">
+        <div class="col-md-3"></div>
+        <div class="col-md-6">
+          <div class="card">
+            <div class="card-body">
+              <a
+                href="{% url 'supervisor_dashboard'%}"
+                class="badge badge-success rounded-pill"
+                class="btn btn-success btn-floating"
+                style="
+                  position: absolute;
+                  top: -15px;
+                  right: -10px;
+                  padding: 10px;
+                "
+                title="close"
+              >
+                <i class="fas fa-close"></i>
+              </a>
+              <h6 class="card-title"><b>STUDENT NAME:</b>&nbsp;&nbsp;</h6>
+              <h6 class="card-title">
+                <b>COURSE OF STUDY:</b> INFORMATION TECHNOLOGY
+              </h6>
+              <hr />
+              <div id="date-picker" style="display: flex" class="row mb-2">
+                <div class="col-md-12 text-center">
+                  <!-- query form -->
+                  <form style="display: flex" class="mb-3" method="post">
+                    {% csrf_token %}
+                    <label> <b>FROM:</b>&nbsp;&nbsp;&nbsp;</label>
+                    <input
+                      style="width: 40px"
+                      type="date"
+                      placeholder="date"
+                      name="from"
+                      class="form-control"
+                    />
+                    &nbsp; -- &nbsp; <b>TO:</b> &nbsp;
+                    <input
+                      style="width: 40px"
+                      type="date"
+                      placeholder="date"
+                      name="to"
+                      class="form-control"
+                    />
+                    <label> &nbsp;&nbsp;&nbsp;</label> &nbsp;&nbsp;&nbsp;
+                    <button type="submit" class="btn btn-info btn-sm">
+                      <i class="fa-sharp fa-solid fa-magnifying-glass"></i>
+                    </button>
+                  </form>
+                </div>
+              </div>
+              <div class="table-wrapper-scroll-y my-custom-scrollbar">
+                <table
+                  class="table table-bordered align-middle mb-0 bg-white  mb-2"
+                  style=" width: 100%"
+                >
+                  <thead class="">
+                    <tr style="background-color: #e7fbec">
+                      <th><b>DAY</b></th>
+                      <th><b>ACTIVITIES</b></th>
+                      <th><b>STATUS</b></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {% for logbook in log_books %}
+                    <div
+                      class="modal fade"
+                      id="exampleModal{{logbook.id}}"
+                      tabindex="-1"
+                      role="dialog"
+                      aria-labelledby="exampleModalLabel"
+                      aria-hidden="true"
+                    >
+                      <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                          <div class="modal-header">
+                            <div style="display: block">
+                              <h6 class="card-title">
+                                <b><small>STUDENT NAME: {{logbook.student.name}}</small></b>
+                              </h6>
+                              <h6 class="card-title">
+                                <b><small>COURSE OF STUDY:{{logbook.student.course}}</small></b>
+                              </h6>
+                            </div>
+                            {% comment %} <button
+                              type="button"
+                              class="close"
+                              data-dismiss="modal"
+                              aria-label="Close"
+                            >
+                              <span aria-hidden="true">&times;</span>
+                            </button> {% endcomment %}
+                            <button
+                            type="button"
+                            class="badge badge-warning"
+                            data-dismiss="modal"
+                            aria-label="Close"
+                          >
+                          <span aria-hidden="true">&times;</span>
+                          </button>
+                          </div>
+                          <div class="modal-body">
+                            <form
+                              method="post"
+                              action="{% url 'logbook_comment' logbook.pk %}"
+                              class="form-group"
+                              id="feedback"
+                            >
+                              <label for="comment" class="mt-2">
+                                Feedback:
+                              </label>
+                              <input
+                                type="hidden"
+                                name="next"
+                                value="{{ request.get_full_path }}"
+                              />
+
+                              {% csrf_token %}
+                              <div class="form-group">
+                                <textarea
+                                  class="form-control"
+                                  id="comment"
+                                  name="comment"
+                                  rows="3"
+                                ></textarea>
+                              </div>
+                              <button
+                                type="submit"
+                                class="btn badge-success rounded-pill mt-2"
+                                style="background-color: #386a2c; color: white"
+                              >
+                                submit feedback
+                              </button>
+                            </form>
+                            {% comment %}
+                            <p class="text-muted mb-0">{{logbook.activity}}</p>
+                            {% endcomment %}
+                          </div>
+                          <div class="modal-footer">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <tr>
+                      <td>
+                        <p class="fw-normal mb-1">
+                          <b>{{logbook.date | date:"l" }}</b>
+                        </p>
+                      </td>
+                      <td>
+                        <p class="text-muted mb-0">{{logbook.activity}}</p>
+                      </td>
+                      <td style="position: relative">
+                        <a
+                          style="
+                            position: absolute;
+                            top: -3px;
+                            right: -2px;
+                            padding: 10px;
+                           cursor:pointer
+                            
+
+                          "
+                          data-toggle="modal"
+                          data-target="#exampleModal{{logbook.id}}"
+                          title="close"
+                         
+                        >
+                          <i class="fa-solid fa-ellipsis"></i>
+                        </a>
+                        {% if logbook.status%}
+                        <span class="badge badge-pill badge-success"
+                          ><i class="fa-solid fa-check"></i
+                        ></span>
+                        {% else %}
+                        <span class="badge badge-pill badge-warning p-.5"
+                          >pending ...</span
+                        >
+                        {% endif %}
+                      </td>
+                    </tr>
+                    {%endfor %}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-3"></div>
+      </div>
+    </div>
+    <!-- Modal -->
+    <!-- jQuery CDN - Slim version (=without AJAX) -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        $("#addFeedback").on("click", () => {
+          $("#feedback").css("display", "block");
+          $("#addFeedback").css("display", "none");
+          $(document).scrollTop($(document).height());
+        });
+        //$( ".hoverable" )
+        // .mouseenter(function() {
+        // $( ".info" ).show();
+        //  })
+        // .mouseleave(function() {
+        //$(".info").hide();
+        //  });
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/login.html b/backend/templates/app/login.html
new file mode 100644
index 0000000..c5c2bfe
--- /dev/null
+++ b/backend/templates/app/login.html
@@ -0,0 +1,55 @@
+{% load static%}{% load crispy_forms_tags%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Login</title>
+    <link rel="stylesheet" href="{% static 'css/style.css'%}" />
+  </head>
+  <body>
+   
+    <div class="hero">
+      {% if messages %} {% for message in messages %}
+      <div {% if message.tags %} class="{{ message.tags }}"{% endif %} style="width: auto">{{ message }} 
+</div>
+      {% endfor %} {% endif %}
+      <div class="form-box">
+        <h1>ATTACHMENT MANAGEMENT SYSTEM</h1>
+        <img
+          id="logoLogin"
+          height="120px"
+          src="{%static '/images/tuk-logo.jpg'%}"
+        />
+        <form id="login" class="input-group" method="post">
+          {% csrf_token %}
+          <div class="form-outline mb-4">
+            <input
+              type="email"
+              class="input-field"
+              placeholder="Enter email"
+              name="email"
+              required
+            />
+          </div>
+          <div class="form-outline mb-4">
+            <input
+              type="password"
+              class="input-field"
+              placeholder="Enter password"
+              name="password"
+              required
+            />
+          </div>
+          <input type="checkbox" class="chech-box" id="remember" />
+          <label for="remember"><small>Remember me</small></label>
+          <button type="submit" class="submit-btn">Login</button>
+          <a id="toRegister" href="{% url 'register'%}"
+            >Don't have an accoount? Signup</a
+          >
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/app/register.html b/backend/templates/app/register.html
new file mode 100644
index 0000000..195122c
--- /dev/null
+++ b/backend/templates/app/register.html
@@ -0,0 +1,33 @@
+{% load static%} {% load crispy_forms_tags%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Login</title>
+    <link rel="stylesheet" href="{% static 'css/style.css'%}" />
+  </head>
+
+  <body>
+    <div class="container-fluid">
+      {% block content %}
+      <div class="hero">
+        <div class="form-box">
+          <img id="logo" height="120px" src="{%static '/images/tuk-logo.jpg'%}" />
+          <form method="post" id="login" class="input-group">
+            {% csrf_token %} 
+            {{form}}
+            <button type="submit" class="submit-btn">
+                Signup
+              </button>
+              <a id="toLogin" href="{% url 'login'%}">Already have an accoount? Login</a>
+        </form>
+        </div>
+      </div>
+      {% endblock %}
+    </div>
+
+    {% block scripts%} {% endblock %}
+  </body>
+</html>
diff --git a/backend/templates/app/student_profile.html b/backend/templates/app/student_profile.html
new file mode 100644
index 0000000..432eefb
--- /dev/null
+++ b/backend/templates/app/student_profile.html
@@ -0,0 +1,186 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    {% comment %}
+    <link rel="stylesheet" href="{% static 'css/Card.css'%}" />
+    {% endcomment %}
+    <link rel="stylesheet" href="{% static 'css/profile.css'%}" />
+  </head>
+  <body class="bg-light">
+    <div class="my_warapper">
+      <div class="form-box">
+        <div class="button-box">
+          <div id="btn"></div>
+          <a class="badge badge-pill btn-lg toggle-btn" id="myLogin">
+            Profile
+          </a>
+          <a type="button" class="badge badge-pill toggle-btn" id="mySignUp">
+            Edit
+          </a>
+        </div>
+        <div id="login" class="input-group">
+          {%if current_user.student.photo_url %}
+          <div class="card" id="card" style="width: 100%; position: relative">
+            <img
+              src="..{{current_user.student.photo_url.url}}"
+              alt="John"
+              height="81"
+              width="81"
+              style="
+                border-radius: 50%;
+                position: absolute;
+                top: -40px;
+                right: -10px;
+                left: 98px;
+              "
+            />
+            <div style="margin-top: 61px">
+              <h2 style="margin-top: auto">{{current_user.student.name}}</h2>
+              <p class="title">{{current_user.student.admission_no}}</p>
+              <p>
+                {{current_user.student.course}}, Year
+                {{current_user.student.year}}
+              </p>
+            </div>
+          </div>
+          {% else %}
+          <div>
+            <h4
+              class="text-center"
+              style="position: absolute; top: 10px; right: 10px; left: 8px"
+            >
+              No profile
+            </h4>
+            <img
+              src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png"
+              alt="John Doe"
+              height="100"
+              width="100"
+              style="
+                border-radius: 50%;
+                position: absolute;
+                top: 55px;
+                right: -10px;
+                left: 98px;
+              "
+            />
+          </div>
+          {% endif %}
+        </div>
+        <form
+          id="signup"
+          class="input-group"
+          method="post"
+          enctype="multipart/form-data"
+        >
+          <h4 class="text-center">UPDATE PROFILE</h4>
+          {% csrf_token %}
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="name"
+              class="form-control"
+              placeholder="name"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="course"
+              class="form-control"
+              placeholder="course"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="number"
+              name="year"
+              class="form-control"
+              placeholder="year"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="admission_no"
+              class="form-control"
+              placeholder="admission no"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="file"
+              accept="image/*"
+              name="pic"
+              class="form-control"
+              style="padding: 20px"
+              required
+            />
+          </div>
+          <button class="btn btn-success btn-sm submit-btn" type="submit">
+            Update
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        var x = document.getElementById("login");
+        var y = document.getElementById("signup");
+        var z = document.getElementById("btn");
+
+        const signup = () => {
+          x.style.left = "-400px";
+          y.style.left = "50px";
+          z.style.left = "110px";
+        };
+        const login = () => {
+          x.style.left = "50px";
+          y.style.left = "450px";
+          z.style.left = "0";
+        };
+
+        $("#myLogin").on("click", () => {
+          login();
+        });
+        $("#mySignUp").on("click", () => {
+          signup();
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/supervisor-dashboard.html b/backend/templates/app/supervisor-dashboard.html
new file mode 100644
index 0000000..7cfe0de
--- /dev/null
+++ b/backend/templates/app/supervisor-dashboard.html
@@ -0,0 +1,257 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>supervisor</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.css"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="{% static 'css/supervisor.css'%}" />
+  </head>
+  <body>
+    <div class="continer-fluid">
+      <div class="wrapper">
+        <nav id="sidebar">
+          <div class="sidebar-header">
+            <h5>Dashboard</h5>
+          </div>
+
+          <ul class="list-unstyled components">
+            <img
+              id="profile-pic"
+              src="..{{supervisor.photo_url.url}}"
+              alt=""
+              style="width: 45px; height: 45px"
+              class="rounded-circle m-3"
+            />
+            <li>
+              <a href="{%url 'supervisor_profile'%}">
+                <i class="fa-solid fa-user"></i>
+                &nbsp;&nbsp; Profile
+              </a>
+            </li>
+            <li>
+              <a href="{%url 'logout'%}">
+                <i class="fa-solid fa-right-from-bracket"></i>
+                &nbsp;&nbsp; Logout
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div id="content" class="m-3">
+          <nav class="navbar navbar-light bg-light">
+            <div class="container-fluid">
+              <button
+                type="button"
+                id="sidebarCollapse"
+                class="btn badge-success"
+                title="Collapse"
+              >
+                <span>
+                  <i class="fas fa-align-justify"></i>
+                </span>
+              </button>
+              <div class="dropdown">
+                <button
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownMenuButton"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                ></button>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  <button class="dropdown-item" onClick="{logOut}">
+                    <i class="fa fa-sign-out" aria-hidden="true"></i>
+                    &nbsp;&nbsp; Logout
+                  </button>
+                </div>
+              </div>
+            </div>
+          </nav>
+          <h2>Submissions</h2>
+          <table class="table align-middle mb-0 bg-white w-auto">
+            <thead class="bg-light">
+              <tr>
+                <th>Student Admission</th>
+                <th>Student Name</th>
+                <th>Department</th>
+                <th>Logbook</th>
+              </tr>
+            </thead>
+            <tbody>
+              {%for student in students %} {%if student.student.photo_url %}
+              <div
+                class="modal fade"
+                id="exampleModal{{student.id}}"
+                tabindex="-1"
+                role="dialog"
+                aria-labelledby="exampleModalLabel"
+                aria-hidden="true"
+              >
+                <div class="modal-dialog" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="text-center"> Employer's Feedback:</h5>
+                      <button
+                        type="button"
+                        class="badge badge-warning"
+                        data-dismiss="modal"
+                        aria-label="Close"
+                      >
+                     
+                        <span aria-hidden="true">&times;</span>
+                      </button>
+                    </div>
+                    <div class="modal-body">
+                      {%if student.student.employercomment.comment %}
+                      <p>{{student.student.employercomment.comment}}</p>
+                      {% else %}
+                      <p>No comments yet</p>
+                      {%endif%}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <tr key="index">
+                <td>
+                  <div class="d-flex align-items-center">
+                    <img
+                      src="..{{student.student.photo_url.url}}"
+                      alt=""
+                      style="width: 45px; height: 45px"
+                      class="rounded-circle"
+                    />
+                    <div class="ms-3">
+                      <p class="fw-bold mb-1"></p>
+                      <p class="text-muted mb-0">
+                        {{student.student.admission_no}}
+                      </p>
+                      <div class="dropdown">
+                        <span
+                          class="bg-light dropdown-toggle"
+                          id="dropdownMenuButton"
+                          data-toggle="dropdown"
+                          aria-haspopup="true"
+                          aria-expanded="false"
+                        ></span>
+                        <div
+                          class="dropdown-menu"
+                          aria-labelledby="dropdownMenuButton"
+                        >
+                          <button
+                            class="dropdown-item"
+                            data-toggle="modal"
+                            data-target="#exampleModal{{student.id}}"
+                            style="cursor: pointer;"
+                          >
+                            <em>Comment</em>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td>{{student.student.name}}</td>
+                <td>
+                  <div class="d-flex align-items-center">
+                    <p class="fw-normal mb-1">
+                      {{student.student.attachment.department_name}}
+                    </p>
+                  </div>
+                </td>
+                <td>
+                  <a
+                    href="{% url 'supervisor_feedback' student.student.user.email%}"
+                    class="badge badge-success rounded-pill d-inline"
+                  >
+                    view
+                  </a>
+                </td>
+              </tr>
+              {% endif %} {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <button id="back-to-top" class="btn">
+        Back Top &nbsp;
+        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
+      </button>
+    </div>
+    <!-- jQuery CDN - Slim version (=without AJAX) -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        $("#sidebarCollapse").on("click", function () {
+          $("#sidebar").toggleClass("active");
+        });
+
+        $("#addFeedback").on("click", () => {
+          $("#feedback").css("display", "block");
+          $("#addFeedback").css("display", "none");
+          $(document).scrollTop($(document).height());
+        });
+
+        $("#feedback").on("submit", (e) => {
+          e.preventDefault();
+          $("#addFeedback").css("display", "block");
+          $("#feedback").css("display", "none");
+        });
+
+        let backToTopButton = "";
+        window.addEventListener("scroll", () => {
+          if (window.scrollY > 100) {
+            $("#back-to-top").show("slow");
+          } else {
+            $("#back-to-top").hide();
+          }
+        });
+        const scrollup = () => {
+          window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+          });
+        };
+        $("#back-to-top").on("click", () => {
+          scrollup();
+        });
+        $("#myModal").on("shown.bs.modal", function () {
+          $("#myInput").trigger("focus");
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/supervisor_profile.html b/backend/templates/app/supervisor_profile.html
new file mode 100644
index 0000000..46d178a
--- /dev/null
+++ b/backend/templates/app/supervisor_profile.html
@@ -0,0 +1,180 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+    {% comment %}
+    <link rel="stylesheet" href="{% static 'css/Card.css'%}" />
+    {% endcomment %}
+    <link rel="stylesheet" href="{% static 'css/profile.css'%}" />
+  </head>
+  <body class="bg-light">
+    <div class="my_warapper">
+      <div class="form-box">
+        <div class="button-box">
+          <div id="btn"></div>
+          <a class="badge badge-pill btn-lg toggle-btn" id="myLogin">
+            Profile
+          </a>
+          <a type="button" class="badge badge-pill toggle-btn" id="mySignUp">
+            Edit
+          </a>
+        </div>
+        <div id="login" class="input-group">
+          {%if current_user.supervisor.photo_url %}
+          <div class="card" id="card" style="width: 100%; position: relative; ">
+            <img
+              src="..{{current_user.supervisor.photo_url.url}}"
+              alt="John"
+              height="81"
+              width="81"
+              style="
+                border-radius: 50%;
+                border: 2.8px solid whitesmoke;
+                -webkit-border-radius: 500px;
+                -moz-border-radius: 500px;
+                position: absolute;
+                top: -40px;
+                right: -10px;
+                left: 98px;
+              "
+            />
+            <div style="margin-top: 61px">
+              <h2 style="margin-top: auto">{{current_user.supervisor.name}}</h2>
+              <p class="title">{{current_user.supervisor.postion}}</p>
+              <p>
+                <b>Contact:</b>
+                {{current_user.supervisor.phone}}
+              </p>
+            </div>
+          </div>
+          {% else %}
+          <div>
+            <h4
+              class="text-center"
+              style="position: absolute; top: 10px; right: 10px; left: 8px"
+            >
+              No profile
+            </h4>
+            <img
+              src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png"
+              alt="John Doe"
+              height="100"
+              width="100"
+              style="
+                border-radius: 50%;
+                position: absolute;
+                top: 55px;
+                right: -10px;
+                left: 98px;
+              "
+            />
+          </div>
+          {% endif %}
+        </div>
+        <form
+          id="signup"
+          class="input-group"
+          method="post"
+          enctype="multipart/form-data"
+        >
+          <h4 class="text-center">UPDATE PROFILE</h4>
+          {% csrf_token %}
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="name"
+              class="form-control"
+              placeholder="name"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="phone"
+              class="form-control"
+              placeholder="phone"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="text"
+              name="position"
+              class="form-control"
+              placeholder="position"
+              required
+            />
+          </div>
+          <div class="form-group" style="padding: 5px">
+            <input
+              type="file"
+              accept="image/*"
+              name="pic"
+              class="form-control"
+              style="padding: 20px"
+              required
+            />
+          </div>
+          <button class="btn btn-success btn-sm submit-btn" type="submit">
+            Update
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        var x = document.getElementById("login");
+        var y = document.getElementById("signup");
+        var z = document.getElementById("btn");
+
+        const signup = () => {
+          x.style.left = "-400px";
+          y.style.left = "50px";
+          z.style.left = "110px";
+        };
+        const login = () => {
+          x.style.left = "50px";
+          y.style.left = "450px";
+          z.style.left = "0";
+        };
+
+        $("#myLogin").on("click", () => {
+          login();
+        });
+        $("#mySignUp").on("click", () => {
+          signup();
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/templates/app/view-attachment.html b/backend/templates/app/view-attachment.html
new file mode 100644
index 0000000..49bc1d7
--- /dev/null
+++ b/backend/templates/app/view-attachment.html
@@ -0,0 +1,66 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div class="container mt-5">
+      <div class="card">
+        <div class="card-body">
+          <br />
+          <nav>
+            <a
+              class="btn btn-success nav-item active"
+              href="{% url 'add_attachment'%}"
+            >
+              Create New Attachment
+            </a>
+          </nav>
+          <br />
+          <div className="col-md-6">
+            <h4>Attachments List</h4>
+
+            <div class="container">
+              <div class="row">
+                <div class="col-12">
+                  <table class="table table-bordered table-striped">
+                    <thead>
+                      <tr>
+                        <th>Id</th>
+                        <th>Name</th>
+                        <th>Department</th>
+                        <th scope="col">Start</th>
+                        <th>End</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {% for attachment in attachments %}
+                      <tr>
+                        <td scope="row">{{attachment.attachment_id}}</td>
+                        <td>{{attachment.attachment_name}}</td>
+                        <td>{{attachment.department_name}}</td>
+                        <td>{{attachment.start_date}}</td>
+                        <td>{{attachment.end_date}}</td>
+                      </tr>
+                      {%endfor %}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/app/view-logbooks.html b/backend/templates/app/view-logbooks.html
new file mode 100644
index 0000000..9f892dd
--- /dev/null
+++ b/backend/templates/app/view-logbooks.html
@@ -0,0 +1,213 @@
+{% load static%}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Add-attachement</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div class="container mt-5">
+      {% comment %}
+      <div class="card">
+        <div class="card-body">
+          {% endcomment %}
+          <div class="row">
+            <div class="col-md-4">
+              <div
+                class="d-flex flex-column flex-shrink-0 p-3 bg-light"
+                style="width: 280px"
+              >
+                <a
+                  href="#"
+                  class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
+                  style="
+                    display: block;
+                    margin-left: 40px;
+                    margin-right: auto;
+                    margin-top: 17px;
+                    width: 31%;
+                  "
+                >
+                  {% if current_user.student.photo_url%}
+                  <img
+                    class="rounded-circle me-2"
+                    src="..{{current_user.student.photo_url.url}}"
+                    height="75"
+                    width="75"
+                    alt="Avatar"
+                  />
+                  {% else %}
+                  <img
+                    class="d-flex rounded-circle avatar z-depth-1-half mr-3"
+                    src=".././media/images/image.JPG"
+                    width="100px"
+                    alt="Avattar"
+                  />
+                  {% endif %}
+                </a>
+                <hr />
+                <ul class="nav nav-pills flex-column mb-auto mt-auto">
+                  <li class="nav-item">
+                    <a
+                      href="{%url 'add_attachment'%}"
+                      class="nav-link active bg-success"
+                      aria-current="page"
+                      ><i class="fa-solid fa-gauge"></i>
+                      &nbsp;&nbsp; Dashboard
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="{%url 'search_logbook'%}"
+                      class="nav-link link-dark text-success"
+                    >
+                      <i class="fa-solid fa-book"></i>
+                      &nbsp;&nbsp; Logbooks
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="{%url 'student_profile'%}"
+                      class="nav-link link-dark text-success"
+                    >
+                      <i class="fa-solid fa-user"></i>
+                      &nbsp;&nbsp; Profile
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="{%url 'logout'%}"
+                      class="nav-link link-dark text-success"
+                    >
+                      <i class="fa-solid fa-right-from-bracket"></i>
+                      &nbsp;&nbsp; Logout
+                    </a>
+                  </li>
+                </ul>
+                <hr />
+              </div>
+            </div>
+            &nbsp;
+            <div class="col-md-7">
+              <br />
+              <nav>
+                <a
+                  class="btn btn-success nav-item active"
+                  href="{% url 'add_logbook'%}"
+                >
+                  <i class="fa-sharp fa-solid fa-plus"></i> &nbsp; New Entry
+                </a>
+              </nav>
+              <br />
+
+              <h4 class="heading">Logbooks</h4>
+              <div>
+                <form style="display: flex" class="mb-3" method="post">
+                  {% csrf_token %}
+                  <label> <b>FROM:</b>&nbsp;&nbsp;&nbsp;</label>
+                  <input
+                    style="width: 144px"
+                    type="date"
+                    placeholder="date"
+                    name="from"
+                    class="form-control"
+                  />
+                  &nbsp; -- &nbsp; <b>TO:</b> &nbsp;
+                  <input
+                    style="width: 144px"
+                    type="date"
+                    placeholder="date"
+                    name="to"
+                    class="form-control"
+                  />
+                  <label> &nbsp;&nbsp;&nbsp;</label> &nbsp;&nbsp;&nbsp;
+                  <button type="submit" class="btn btn-info">
+                    <i class="fa-sharp fa-solid fa-magnifying-glass"></i>
+                  </button>
+                </form>
+              </div>
+              <table class="table table-bordered table-striped">
+                <thead>
+                  <tr>
+                    <th>Date</th>
+                    <th>Activity</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for logbook in log_books %}
+                  <tr>
+                    <td scope="row">
+                      {{logbook.date | date:"l" }}, {{logbook.date}}
+                    </td>
+                    <td
+                      data-toggle="tooltip"
+                      data-html="true"
+                      title="{% for comment in logbook.comments_set.all %}{{comment}}{% endfor%}"
+                    >
+                      {{logbook.activity}}
+                    </td>
+                    <td>
+                      {% if logbook.status%}
+                      <span class="badge badge-pill badge-success"
+                        ><i class="fa-solid fa-check"></i
+                      ></span>
+                      {% else %}
+                      <span class="badge badge-pill badge-warning p-.5"
+                        >pending ...</span
+                      >
+                      {% endif %}
+                    </td>
+                  </tr>
+                  {%endfor %}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        {% comment %}
+      </div>
+    </div>
+    {% endcomment %}
+    <!-- jQuery CDN - Slim version (=without AJAX) -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Popper.JS -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Bootstrap JS -->
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        $(function () {
+          $('[data-toggle="tooltip"]').tooltip();
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/backend/test.py b/backend/test.py
new file mode 100644
index 0000000..b55de33
--- /dev/null
+++ b/backend/test.py
@@ -0,0 +1,7 @@
+from  datetime import datetime
+
+date_str = '09-19-2022'
+
+date_object = datetime.strptime(date_str).date()
+print(type(date_object))
+print(date_object)  # printed in default format
\ No newline at end of file
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
index 080b59e..abcfa76 100644
--- a/front-end/package-lock.json
+++ b/front-end/package-lock.json
@@ -16,6 +16,8 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@wojtekmaj/react-daterange-picker": "^4.1.0",
+        "bootstrap": "^5.2.3",
+        "mdbreact": "^5.2.0",
         "prop-types": "^15.8.1",
         "ra-data-json-server": "^4.6.1",
         "react": "^18.2.0",
@@ -2503,6 +2505,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -2533,6 +2544,19 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "node_modules/@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "dependencies": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.0.0",
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.0.1.tgz",
@@ -7256,6 +7280,20 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/jss": {
+      "version": "9.5.8",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz",
+      "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==",
+      "dependencies": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
+    "node_modules/@types/jss/node_modules/csstype": {
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -7330,6 +7368,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-text-mask": {
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+      "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -8701,6 +8747,29 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
+    "node_modules/bootstrap-css-only": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-css-only/-/bootstrap-css-only-4.4.1.tgz",
+      "integrity": "sha512-iBgNli7RnedBFwn6sMTQoAZ8WgIwmX4kF1rckfj+pgro5q/Q0DbLtcpfH60XoFnCXzbEJU/khC/B2EQap89mCg=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8721,6 +8790,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/brcast": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.2.tgz",
+      "integrity": "sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA=="
+    },
     "node_modules/broadcast-channel": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
@@ -8903,6 +8977,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw=="
+    },
     "node_modules/char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -8911,6 +8990,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "dependencies": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "node_modules/chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "dependencies": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "node_modules/chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -9005,6 +9110,19 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -9515,6 +9633,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha512-Vx/Vl3zsHj32Z+WTNzGjd2iSbSIJTYHMmyGUT2nzCjj0Xk4qLfwpQ8nF6TQ5oo3Cf0s/An3DTc7LclH1BkAXbQ==",
+      "dependencies": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -9716,6 +9842,11 @@
         "url": "https://opencollective.com/date-fns"
       }
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -10153,6 +10284,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -11098,6 +11237,11 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -11247,6 +11391,34 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "dependencies": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      }
+    },
+    "node_modules/fbjs/node_modules/core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js."
+    },
+    "node_modules/fbjs/node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -11425,6 +11597,15 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/focus-trap": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-4.0.2.tgz",
+      "integrity": "sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==",
+      "dependencies": {
+        "tabbable": "^3.1.2",
+        "xtend": "^4.0.1"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -11912,6 +12093,11 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "node_modules/gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -12249,6 +12435,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -12353,6 +12544,14 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indefinite-observable": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
+      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
+      "dependencies": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -12562,6 +12761,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
+    },
     "node_modules/is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -12635,6 +12839,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -12804,6 +13019,23 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "dependencies": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -14999,6 +15231,93 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2"
+      },
+      "peerDependencies": {
+        "jss": "^9.7.0"
+      }
+    },
+    "node_modules/jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==",
+      "peerDependencies": {
+        "jss": "^9.4.0"
+      }
+    },
+    "node_modules/jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==",
+      "peerDependencies": {
+        "jss": "^9.0.0"
+      }
+    },
+    "node_modules/jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "dependencies": {
+        "warning": "^3.0.0"
+      },
+      "peerDependencies": {
+        "jss": "^9.0.0"
+      }
+    },
+    "node_modules/jss-nested/node_modules/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==",
+      "peerDependencies": {
+        "jss": "^9.0.0"
+      }
+    },
+    "node_modules/jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "dependencies": {
+        "css-vendor": "^0.3.8"
+      },
+      "peerDependencies": {
+        "jss": "^9.0.0"
+      }
+    },
+    "node_modules/jss/node_modules/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -15141,6 +15460,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -15244,6 +15568,555 @@
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
+    "node_modules/mdbreact": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/mdbreact/-/mdbreact-5.2.0.tgz",
+      "integrity": "sha512-QIQ4xtEaZrXq82GKrVapRhTt+8OkVydsvb6Bir7y3AEiT//FvCg3OXzOk3VWPkaeiHnWdgKQTYhYBqsKEYEKYA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.12.0",
+        "@material-ui/core": "3.9.3",
+        "bootstrap-css-only": "4.4.1",
+        "chart.js": "2.9.4",
+        "classnames": "2.2.6",
+        "focus-trap-react": "^6.0.0",
+        "material-ui-pickers": "2.2.4",
+        "perfect-scrollbar": "1.5.0",
+        "popper.js": "^1.16.0",
+        "prop-types": "15.7.2",
+        "raf": "3.4.1",
+        "react": "17.0.1",
+        "react-chartjs-2": "2.9.0",
+        "react-dom": "17.0.1",
+        "react-image-lightbox": "5.1.1",
+        "react-numeric-input": "2.2.3",
+        "react-popper": "^1.3.7",
+        "react-router-dom": "^5.1.2",
+        "react-scroll": "1.7.16",
+        "react-toastify": "5.5.0",
+        "react-transition-group": "4.3.0",
+        "sass-loader": "^8.0.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz",
+      "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==",
+      "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/system": "^3.0.0-alpha.0",
+        "@material-ui/utils": "^3.0.0-alpha.2",
+        "@types/jss": "^9.5.6",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "csstype": "^2.5.2",
+        "debounce": "^1.1.0",
+        "deepmerge": "^3.0.0",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^3.2.1",
+        "is-plain-object": "^2.0.4",
+        "jss": "^9.8.7",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "normalize-scroll-left": "^0.1.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^2.2.1",
+        "recompose": "0.28.0 - 0.30.0",
+        "warning": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0",
+        "react-dom": "^16.3.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core/node_modules/@material-ui/system": {
+      "version": "3.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
+      "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==",
+      "deprecated": "You can now upgrade to @mui/system. See the guide: https://mui.com/guides/migration-v4/",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "deepmerge": "^3.0.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0",
+        "react-dom": "^16.3.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core/node_modules/@material-ui/utils": {
+      "version": "3.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
+      "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.6.3"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0",
+        "react-dom": "^16.3.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core/node_modules/react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core/node_modules/react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "dependencies": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0",
+        "react-dom": ">=15.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core/node_modules/recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/@material-ui/core/node_modules/recompose/node_modules/hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
+    "node_modules/mdbreact/node_modules/@types/react-transition-group": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
+      "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/mdbreact/node_modules/classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
+    "node_modules/mdbreact/node_modules/csstype": {
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+    },
+    "node_modules/mdbreact/node_modules/deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dependencies": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mdbreact/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/focus-trap-react": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-6.0.0.tgz",
+      "integrity": "sha512-mvEYxmP75PMx0vOqoIAmJHO/qUEvdTAdz6gLlEZyxxODnuKQdnKea2RWTYxghAPrV+ibiIq2o/GTSgQycnAjcw==",
+      "dependencies": {
+        "focus-trap": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": "0.14.x || ^15.0.0 || ^16.0.0",
+        "react-dom": "0.14.x || ^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/mdbreact/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/mdbreact/node_modules/json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/mdbreact/node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/material-ui-pickers": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-2.2.4.tgz",
+      "integrity": "sha512-QCQh08Ylmnt+o4laW+rPs92QRAcESv3sPXl50YadLm++rAZAXAOh3K8lreGdynCMYFgZfdyu81Oz9xzTlAZNfw==",
+      "deprecated": "You can now upgrade to @material-ui/pickers. Documentation for v2 can be found at https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/",
+      "dependencies": {
+        "@types/react-text-mask": "^5.4.3",
+        "clsx": "^1.0.2",
+        "react-event-listener": "^0.6.6",
+        "react-text-mask": "^5.4.3",
+        "react-transition-group": "^2.5.3",
+        "tslib": "^1.9.3"
+      },
+      "peerDependencies": {
+        "@material-ui/core": "^3.2.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.3.0",
+        "react-dom": "^16.3.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/material-ui-pickers/node_modules/react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/material-ui-pickers/node_modules/react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "dependencies": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0",
+        "react-dom": ">=15.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/mdbreact/node_modules/prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-chartjs-2": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
+      "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
+      "dependencies": {
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "chart.js": "^2.3",
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-dom": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.1"
+      },
+      "peerDependencies": {
+        "react": "17.0.1"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-image-lightbox": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz",
+      "integrity": "sha512-GprldD8AqpRb2hsOdns3sI7Xeo9hJlcybDxuli4RB+ml1J/GaFaUuRkT/7IrTLv2+4vkR74ahz2LD0HOUHI7wA==",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "react-modal": "^3.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.x",
+        "react-dom": "^16.x"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/mdbreact/node_modules/react-popper": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+      "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "@hypnosphi/create-react-context": "^0.3.1",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-scroll": {
+      "version": "1.7.16",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.7.16.tgz",
+      "integrity": "sha512-f4M5AdL+3cw3MJ7c/T0hPMY2iHCeQLDXV13lRanAFQ6JIt9xyAdHCpTH9mLUQt9SQh4pRarD+Qc7KhU6qMx3Yg==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/mdbreact/node_modules/react-transition-group/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
+    "node_modules/mdbreact/node_modules/react-transition-group/node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/mdbreact/node_modules/sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^4.36.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mdbreact/node_modules/scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/mdbreact/node_modules/schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/mdbreact/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/mdbreact/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -15459,6 +16332,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -15527,6 +16408,23 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "dependencies": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
+    "node_modules/node-fetch/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -15573,6 +16471,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
     "node_modules/normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -15981,6 +16884,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -16144,6 +17052,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.18",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -18016,6 +18934,32 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-numeric-input": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-numeric-input/-/react-numeric-input-2.2.3.tgz",
+      "integrity": "sha512-0hDXY8eznhTNMYfmeXRo/R1Fyx//ub0C/tpXbIeEaTnG72P95MGGMvJbiX5i+mnmiFVT6OCgIR33mke45nNZzQ==",
+      "peerDependencies": {
+        "react": ">=0.14.0 || ^15.6.1 || ^16.0.0"
+      }
+    },
     "node_modules/react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@@ -18178,6 +19122,56 @@
         }
       }
     },
+    "node_modules/react-text-mask": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+      "dependencies": {
+        "prop-types": "^15.5.6"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-toastify": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-5.5.0.tgz",
+      "integrity": "sha512-jsVme7jALIFGRyQsri/g4YTsRuaaGI70T6/ikjwZMB4mwTZaCWqj5NqxhGrRStKlJc5npXKKvKeqTiRGQl78LQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.4.2",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0",
+        "react-dom": ">=15.0.0"
+      }
+    },
+    "node_modules/react-toastify/node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/react-toastify/node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -18430,6 +19424,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -18898,11 +19897,27 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -19507,11 +20522,24 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tabbable": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz",
+      "integrity": "sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.3.tgz",
@@ -19699,6 +20727,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -19870,6 +20903,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -19891,6 +20929,24 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.32",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz",
+      "integrity": "sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -20094,6 +21150,11 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -22727,6 +23788,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -22747,6 +23813,15 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "@hypnosphi/create-react-context": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
+      "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "@internationalized/date": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.0.1.tgz",
@@ -26325,6 +27400,22 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "@types/jss": {
+      "version": "9.5.8",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz",
+      "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==",
+      "requires": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.21",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+          "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+        }
+      }
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -26399,6 +27490,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-text-mask": {
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+      "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -27426,6 +28525,17 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
+    "bootstrap-css-only": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-css-only/-/bootstrap-css-only-4.4.1.tgz",
+      "integrity": "sha512-iBgNli7RnedBFwn6sMTQoAZ8WgIwmX4kF1rckfj+pgro5q/Q0DbLtcpfH60XoFnCXzbEJU/khC/B2EQap89mCg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -27443,6 +28553,11 @@
         "fill-range": "^7.0.1"
       }
     },
+    "brcast": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.2.tgz",
+      "integrity": "sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA=="
+    },
     "broadcast-channel": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
@@ -27566,11 +28681,42 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw=="
+    },
     "char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -27646,6 +28792,16 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -28008,6 +29164,14 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha512-Vx/Vl3zsHj32Z+WTNzGjd2iSbSIJTYHMmyGUT2nzCjj0Xk4qLfwpQ8nF6TQ5oo3Cf0s/An3DTc7LclH1BkAXbQ==",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -28154,6 +29318,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
       "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
     },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -28482,6 +29651,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
     "enhanced-resolve": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -29168,6 +30345,11 @@
         "strip-final-newline": "^2.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -29303,6 +30485,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
+      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.30"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA=="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -29439,6 +30650,15 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "focus-trap": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-4.0.2.tgz",
+      "integrity": "sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==",
+      "requires": {
+        "tabbable": "^3.1.2",
+        "xtend": "^4.0.1"
+      }
+    },
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -29769,6 +30989,11 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -30022,6 +31247,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -30089,6 +31319,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
     },
+    "indefinite-observable": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
+      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -30232,6 +31470,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
+    },
     "is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -30275,6 +31518,14 @@
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
       "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
     },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
     "is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -30390,6 +31641,20 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
+    },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -31999,6 +33264,78 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
       "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
     },
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==",
+      "requires": {}
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==",
+      "requires": {}
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==",
+      "requires": {}
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -32108,6 +33445,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -32194,6 +33536,432 @@
         }
       }
     },
+    "mdbreact": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/mdbreact/-/mdbreact-5.2.0.tgz",
+      "integrity": "sha512-QIQ4xtEaZrXq82GKrVapRhTt+8OkVydsvb6Bir7y3AEiT//FvCg3OXzOk3VWPkaeiHnWdgKQTYhYBqsKEYEKYA==",
+      "requires": {
+        "@fortawesome/fontawesome-free": "^5.12.0",
+        "@material-ui/core": "3.9.3",
+        "bootstrap-css-only": "4.4.1",
+        "chart.js": "2.9.4",
+        "classnames": "2.2.6",
+        "focus-trap-react": "^6.0.0",
+        "material-ui-pickers": "2.2.4",
+        "perfect-scrollbar": "1.5.0",
+        "popper.js": "^1.16.0",
+        "prop-types": "15.7.2",
+        "raf": "3.4.1",
+        "react": "17.0.1",
+        "react-chartjs-2": "2.9.0",
+        "react-dom": "17.0.1",
+        "react-image-lightbox": "5.1.1",
+        "react-numeric-input": "2.2.3",
+        "react-popper": "^1.3.7",
+        "react-router-dom": "^5.1.2",
+        "react-scroll": "1.7.16",
+        "react-toastify": "5.5.0",
+        "react-transition-group": "4.3.0",
+        "sass-loader": "^8.0.2"
+      },
+      "dependencies": {
+        "@material-ui/core": {
+          "version": "3.9.3",
+          "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz",
+          "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==",
+          "requires": {
+            "@babel/runtime": "^7.2.0",
+            "@material-ui/system": "^3.0.0-alpha.0",
+            "@material-ui/utils": "^3.0.0-alpha.2",
+            "@types/jss": "^9.5.6",
+            "@types/react-transition-group": "^2.0.8",
+            "brcast": "^3.0.1",
+            "classnames": "^2.2.5",
+            "csstype": "^2.5.2",
+            "debounce": "^1.1.0",
+            "deepmerge": "^3.0.0",
+            "dom-helpers": "^3.2.1",
+            "hoist-non-react-statics": "^3.2.1",
+            "is-plain-object": "^2.0.4",
+            "jss": "^9.8.7",
+            "jss-camel-case": "^6.0.0",
+            "jss-default-unit": "^8.0.2",
+            "jss-global": "^3.0.0",
+            "jss-nested": "^6.0.1",
+            "jss-props-sort": "^6.0.0",
+            "jss-vendor-prefixer": "^7.0.0",
+            "normalize-scroll-left": "^0.1.2",
+            "popper.js": "^1.14.1",
+            "prop-types": "^15.6.0",
+            "react-event-listener": "^0.6.2",
+            "react-transition-group": "^2.2.1",
+            "recompose": "0.28.0 - 0.30.0",
+            "warning": "^4.0.1"
+          },
+          "dependencies": {
+            "@material-ui/system": {
+              "version": "3.0.0-alpha.2",
+              "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
+              "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==",
+              "requires": {
+                "@babel/runtime": "^7.2.0",
+                "deepmerge": "^3.0.0",
+                "prop-types": "^15.6.0",
+                "warning": "^4.0.1"
+              }
+            },
+            "@material-ui/utils": {
+              "version": "3.0.0-alpha.3",
+              "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
+              "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
+              "requires": {
+                "@babel/runtime": "^7.2.0",
+                "prop-types": "^15.6.0",
+                "react-is": "^16.6.3"
+              }
+            },
+            "react-event-listener": {
+              "version": "0.6.6",
+              "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+              "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+              "requires": {
+                "@babel/runtime": "^7.2.0",
+                "prop-types": "^15.6.0",
+                "warning": "^4.0.1"
+              }
+            },
+            "react-transition-group": {
+              "version": "2.9.0",
+              "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+              "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+              "requires": {
+                "dom-helpers": "^3.4.0",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2",
+                "react-lifecycles-compat": "^3.0.4"
+              }
+            },
+            "recompose": {
+              "version": "0.30.0",
+              "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+              "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+              "requires": {
+                "@babel/runtime": "^7.0.0",
+                "change-emitter": "^0.1.2",
+                "fbjs": "^0.8.1",
+                "hoist-non-react-statics": "^2.3.1",
+                "react-lifecycles-compat": "^3.0.2",
+                "symbol-observable": "^1.0.4"
+              },
+              "dependencies": {
+                "hoist-non-react-statics": {
+                  "version": "2.5.5",
+                  "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+                  "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+                }
+              }
+            }
+          }
+        },
+        "@types/react-transition-group": {
+          "version": "2.9.2",
+          "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
+          "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
+          "requires": {
+            "@types/react": "*"
+          }
+        },
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
+        "csstype": {
+          "version": "2.6.21",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+          "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+        },
+        "deep-equal": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+          "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+          "requires": {
+            "is-arguments": "^1.0.4",
+            "is-date-object": "^1.0.1",
+            "is-regex": "^1.0.4",
+            "object-is": "^1.0.1",
+            "object-keys": "^1.1.1",
+            "regexp.prototype.flags": "^1.2.0"
+          }
+        },
+        "deepmerge": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+          "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
+        },
+        "focus-trap-react": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-6.0.0.tgz",
+          "integrity": "sha512-mvEYxmP75PMx0vOqoIAmJHO/qUEvdTAdz6gLlEZyxxODnuKQdnKea2RWTYxghAPrV+ibiIq2o/GTSgQycnAjcw==",
+          "requires": {
+            "focus-trap": "^4.0.2"
+          }
+        },
+        "history": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "material-ui-pickers": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-2.2.4.tgz",
+          "integrity": "sha512-QCQh08Ylmnt+o4laW+rPs92QRAcESv3sPXl50YadLm++rAZAXAOh3K8lreGdynCMYFgZfdyu81Oz9xzTlAZNfw==",
+          "requires": {
+            "@types/react-text-mask": "^5.4.3",
+            "clsx": "^1.0.2",
+            "react-event-listener": "^0.6.6",
+            "react-text-mask": "^5.4.3",
+            "react-transition-group": "^2.5.3",
+            "tslib": "^1.9.3"
+          },
+          "dependencies": {
+            "react-event-listener": {
+              "version": "0.6.6",
+              "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+              "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+              "requires": {
+                "@babel/runtime": "^7.2.0",
+                "prop-types": "^15.6.0",
+                "warning": "^4.0.1"
+              }
+            },
+            "react-transition-group": {
+              "version": "2.9.0",
+              "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+              "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+              "requires": {
+                "dom-helpers": "^3.4.0",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2",
+                "react-lifecycles-compat": "^3.0.4"
+              }
+            }
+          }
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "prop-types": {
+          "version": "15.7.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.8.1"
+          }
+        },
+        "react": {
+          "version": "17.0.1",
+          "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+          "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        },
+        "react-chartjs-2": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
+          "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
+          "requires": {
+            "lodash": "^4.17.4",
+            "prop-types": "^15.5.8"
+          }
+        },
+        "react-dom": {
+          "version": "17.0.1",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+          "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "scheduler": "^0.20.1"
+          }
+        },
+        "react-image-lightbox": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz",
+          "integrity": "sha512-GprldD8AqpRb2hsOdns3sI7Xeo9hJlcybDxuli4RB+ml1J/GaFaUuRkT/7IrTLv2+4vkR74ahz2LD0HOUHI7wA==",
+          "requires": {
+            "prop-types": "^15.6.2",
+            "react-modal": "^3.8.1"
+          }
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "react-popper": {
+          "version": "1.3.11",
+          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
+          "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
+          "requires": {
+            "@babel/runtime": "^7.1.2",
+            "@hypnosphi/create-react-context": "^0.3.1",
+            "deep-equal": "^1.1.1",
+            "popper.js": "^1.14.4",
+            "prop-types": "^15.6.1",
+            "typed-styles": "^0.0.7",
+            "warning": "^4.0.2"
+          }
+        },
+        "react-router": {
+          "version": "5.3.4",
+          "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+          "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+          "requires": {
+            "@babel/runtime": "^7.12.13",
+            "history": "^4.9.0",
+            "hoist-non-react-statics": "^3.1.0",
+            "loose-envify": "^1.3.1",
+            "path-to-regexp": "^1.7.0",
+            "prop-types": "^15.6.2",
+            "react-is": "^16.6.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0"
+          }
+        },
+        "react-router-dom": {
+          "version": "5.3.4",
+          "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+          "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+          "requires": {
+            "@babel/runtime": "^7.12.13",
+            "history": "^4.9.0",
+            "loose-envify": "^1.3.1",
+            "prop-types": "^15.6.2",
+            "react-router": "5.3.4",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0"
+          }
+        },
+        "react-scroll": {
+          "version": "1.7.16",
+          "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.7.16.tgz",
+          "integrity": "sha512-f4M5AdL+3cw3MJ7c/T0hPMY2iHCeQLDXV13lRanAFQ6JIt9xyAdHCpTH9mLUQt9SQh4pRarD+Qc7KhU6qMx3Yg==",
+          "requires": {
+            "lodash.throttle": "^4.1.1",
+            "prop-types": "^15.5.8"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+          "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          },
+          "dependencies": {
+            "csstype": {
+              "version": "3.1.1",
+              "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+              "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+            },
+            "dom-helpers": {
+              "version": "5.2.1",
+              "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+              "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+              "requires": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+              }
+            }
+          }
+        },
+        "sass-loader": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+          "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+          "requires": {
+            "clone-deep": "^4.0.1",
+            "loader-utils": "^1.2.3",
+            "neo-async": "^2.6.1",
+            "schema-utils": "^2.6.1",
+            "semver": "^6.3.0"
+          }
+        },
+        "scheduler": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+          "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -32345,6 +34113,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -32401,6 +34174,22 @@
         "tslib": "^2.0.3"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ=="
+        }
+      }
+    },
     "node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -32438,6 +34227,11 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
     },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
     "normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -32723,6 +34517,11 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -32839,6 +34638,11 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "postcss": {
       "version": "8.4.18",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -34015,6 +35819,23 @@
         }
       }
     },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-numeric-input": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-numeric-input/-/react-numeric-input-2.2.3.tgz",
+      "integrity": "sha512-0hDXY8eznhTNMYfmeXRo/R1Fyx//ub0C/tpXbIeEaTnG72P95MGGMvJbiX5i+mnmiFVT6OCgIR33mke45nNZzQ==",
+      "requires": {}
+    },
     "react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@@ -34117,6 +35938,47 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-text-mask": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+      "requires": {
+        "prop-types": "^15.5.6"
+      }
+    },
+    "react-toastify": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-5.5.0.tgz",
+      "integrity": "sha512-jsVme7jALIFGRyQsri/g4YTsRuaaGI70T6/ikjwZMB4mwTZaCWqj5NqxhGrRStKlJc5npXKKvKeqTiRGQl78LQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.4.5",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+          "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "react-transition-group": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -34310,6 +36172,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -34633,11 +36500,24 @@
         "send": "0.18.0"
       }
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -35097,11 +36977,21 @@
         }
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tabbable": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz",
+      "integrity": "sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ=="
+    },
     "tailwindcss": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.3.tgz",
@@ -35231,6 +37121,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -35363,6 +37258,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -35377,6 +37277,11 @@
       "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
       "peer": true
     },
+    "ua-parser-js": {
+      "version": "0.7.32",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz",
+      "integrity": "sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw=="
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -35521,6 +37426,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/front-end/package.json b/front-end/package.json
index 3f83d24..1abfc69 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -11,6 +11,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@wojtekmaj/react-daterange-picker": "^4.1.0",
+    "bootstrap": "^5.2.3",
+    "mdbreact": "^5.2.0",
     "prop-types": "^15.8.1",
     "ra-data-json-server": "^4.6.1",
     "react": "^18.2.0",
diff --git a/front-end/public/index.html b/front-end/public/index.html
index 1df4ebc..c016c98 100644
--- a/front-end/public/index.html
+++ b/front-end/public/index.html
@@ -8,7 +8,16 @@
     <meta
       name="description"
       content="Web site created using create-react-app"
-    />
+    /> 
+    <!-- <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.css"
+    rel="stylesheet" crossorigin="anonymous"
+  />  -->
+  
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      rel="stylesheet"
+    /> 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -25,21 +34,13 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
-    <!-- Font Awesome -->
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
       rel="stylesheet"
     />
     <!-- Google Fonts -->
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-      rel="stylesheet"
-    />
+  
     <!-- MDB -->
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.css"
-      rel="stylesheet"
-    />
     <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
@@ -94,6 +95,28 @@
             $('#feedback').css("display", "none");
             
           })
+
+          var x = document.getElementById("login");
+          var y = document.getElementById("signup");
+          var z = document.getElementById("btn");
+        
+          const signup = () => {
+            x.style.left = "-400px";
+            y.style.left = "50px";
+            z.style.left = "110px";
+          };
+          const login = () => {
+            x.style.left = "50px";
+            y.style.left = "450px";
+            z.style.left = "0";
+          };
+
+          $('#myLogin').on('click', ()=>{
+              login()
+          });
+          $('#mySignUp').on('click', ()=>{
+            signup()
+        });
       });
   </script>
   </body>
diff --git a/front-end/src/App.js b/front-end/src/App.js
index 6e39807..aa10e40 100644
--- a/front-end/src/App.js
+++ b/front-end/src/App.js
@@ -3,20 +3,42 @@ import "./App.css";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import SupervisorDashboard from "./components/Supervisor/Dashboard";
 import LogBookFeeback from "./components/Supervisor/logbook-feedback.";
-
+import * as React from "react";
+import { Admin, Resource } from "react-admin";
+import { PostEdit, PostList, PostCreate } from "./components/Students/posts";
+import { StudentDashboard } from "./components/Students/Dashboard";
+import jsonServerProvider from "ra-data-json-server";
+import { UserList } from "./components/Students/users";
+import EmployerDashboard from "./components/Employer/Dashboard";
+import Login from "./components/Login";
+import Notifications from "./components/Employer/Notifications";
+import Employer from "./components/Employer/Employer";
+const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");
 function App() {
   return (
     <>
       <Router>
         <Routes>
+          <Route path="/" element={<Login />} />
           <Route
             path="/supervisor-dashboard"
             element={<SupervisorDashboard />}
           />
           <Route path="/feedback/:id" element={<LogBookFeeback />} />
+          <Route path="/employer-dashboard" element={<EmployerDashboard />} />
+          <Route path="/employer-notification" element={<Notifications />} />
+          <Route path="/employer-feedback" element={<Employer />} />
         </Routes>
       </Router>
-      
+      {/* <Admin dataProvider={dataProvider} dashboard={StudentDashboard}>
+        <Resource
+          name="posts"
+          list={PostList}
+          edit={PostEdit}
+          create={PostCreate}
+        />
+        <Resource name="users" list={UserList} />
+      </Admin> */}
     </>
   );
 }
diff --git a/front-end/src/components/Employer/Dashboard.js b/front-end/src/components/Employer/Dashboard.js
new file mode 100644
index 0000000..e27e162
--- /dev/null
+++ b/front-end/src/components/Employer/Dashboard.js
@@ -0,0 +1,338 @@
+import React from "react";
+import "./sytle1.css";
+
+const EmployerDashboard = () => {
+  //   let sidebar = document.querySelector(".sidebar");
+  //   let sidebarBtn = document.querySelector(".sidebarBtn");
+
+  //   sidebarBtn.onclick = function () {
+  //     sidebar.classList.toggle("active");
+  //   };
+
+  return (
+    <body>
+      <div class="sidebar">
+        <div class="logo-details">
+          <i class="fas fa-slack"></i>
+          <span class="logo_name">THE TECHNICAL UNIVERSITY OF KENYA</span>
+        </div>
+
+        <ul class="nav-links">
+          <li>
+            <a href="#">
+              <i class="fas fa-bars"></i>
+              <span class="link_name">Dashboard</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-user"></i>
+              <span class="link_name">Employer</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-bell"></i>
+              <span class="link_name">Notifications</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-right-to-bracket"></i>
+              <span class="link_name">Log Out</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <section class="home-section">
+        <nav>
+          <div class="sidebar-button">
+            <i class="fas fa-bars sidebarBtn"></i>
+            <span class="dashboard">Dashboard</span>
+          </div>
+          <div class="search-box">
+            <input type="text" placeholder="search..." />
+            <i class="fas fa-search"></i>
+          </div>
+          <div class="profile-details">
+            <img src="images/profile.jpg" alt="" />
+            <span class="admin_name">Sarah Kim</span>
+          </div>
+        </nav>
+
+        <div class="home-content">
+          <div class="overview-boxes">
+            <div class="box">
+              <div class="left-side">
+                <div class="box_topic">Departments</div>
+                <div class="number">15</div>
+                <div class="indicator">
+                  <i class="fas fa-arrow-up arrow-up"></i>
+                  <span class="text">up since 2010</span>
+                </div>
+              </div>
+              <i class="fas fa-building building"></i>
+            </div>
+            <div class="box">
+              <div class="left-side">
+                <div class="box_topic">Employees</div>
+                <div class="number">2000</div>
+                <div class="indicator">
+                  <i class="fas fa-arrow-up arrow-up"></i>
+                  <span class="text">up since 2021</span>
+                </div>
+              </div>
+              <i class="fas fa-user user"></i>
+            </div>
+            <div class="box">
+              <div class="left-side">
+                <div class="box_topic">Interns</div>
+                <div class="number">50</div>
+                <div class="indicator">
+                  <i class="fas fa-arrow-up arrow-up"></i>
+                  <span class="text">up since sept 2021</span>
+                </div>
+              </div>
+              <i class="fas fa-user user2"></i>
+            </div>
+            <div class="box">
+              <div class="left-side">
+                <div class="box_topic">Projects</div>
+                <div class="number">27</div>
+                <div class="indicator">
+                  <i class="fas fa-arrow-up arrow-up"></i>
+                  <span class="text">up since may 2021</span>
+                </div>
+              </div>
+              <i class="fas fa-p p"></i>
+            </div>
+          </div>
+
+          <div class="interns-boxes">
+            <div class="recent-intern box">
+              <div class="title">Recent Interns</div>
+              <div class="interns-details">
+                <ul class="details">
+                  <li class="topic">Date</li>
+                  <li>
+                    <a href="#">02 Oct '22</a>
+                  </li>
+                  <li>
+                    <a href="#">02 Oct '22</a>
+                  </li>
+                  <li>
+                    <a href="#">02 Oct '22</a>
+                  </li>
+                  <li>
+                    <a href="#">25 0ct '22</a>
+                  </li>
+                  <li>
+                    <a href="#">28 Oct '22</a>
+                  </li>
+                  <li>
+                    <a href="#">02 Nov '22</a>
+                  </li>
+                  <li>
+                    <a href="#">02 Nov '22</a>
+                  </li>
+                  <li>
+                    <a href="#">06 Nov '22</a>
+                  </li>
+                  <li>
+                    <a href="#">08 Nov '22</a>
+                  </li>
+                  <li>
+                    <a href="#">08 Nov '22</a>
+                  </li>
+                </ul>
+                <ul class="details">
+                  <li class="topic">Name</li>
+                  <li>
+                    <a href="#">Mary Robbins</a>
+                  </li>
+                  <li>
+                    <a href="#">John Samuel</a>
+                  </li>
+                  <li>
+                    <a href="#">Alex Kane</a>
+                  </li>
+                  <li>
+                    <a href="#">Anne Jacob</a>
+                  </li>
+                  <li>
+                    <a href="#">Steve Rob</a>
+                  </li>
+                  <li>
+                    <a href="#">Anisa Waheed</a>
+                  </li>
+                  <li>
+                    <a href="#">Mohammed Nur</a>
+                  </li>
+                  <li>
+                    <a href="#">Anthony Sid</a>
+                  </li>
+                  <li>
+                    <a href="#">Zara Hassan</a>
+                  </li>
+                  <li>
+                    <a href="#">Andrew Tate</a>
+                  </li>
+                </ul>
+                <ul class="details">
+                  <li class="topic">Email</li>
+                  <li>
+                    <a href="#">Mary001@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Sam302@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Kane172@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Anne642@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Stev909@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Anisa701@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Moha549@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Sid105@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Zara730@gmail.com</a>
+                  </li>
+                  <li>
+                    <a href="#">Tate267@gmail.com</a>
+                  </li>
+                </ul>
+                <ul class="details">
+                  <li class="topic">Registration Number</li>
+                  <li>
+                    <a href="#">SCEE/00524/2017</a>
+                  </li>
+                  <li>
+                    <a href="#">SCII/00838/2019</a>
+                  </li>
+                  <li>
+                    <a href="#">AIIQ/00664/2018</a>
+                  </li>
+                  <li>
+                    <a href="#">SCCI/00534/2017</a>
+                  </li>
+                  <li>
+                    <a href="#">EMME/00639/2019</a>
+                  </li>
+                  <li>
+                    <a href="#">COI/00413/2016</a>
+                  </li>
+                  <li>
+                    <a href="#">EMME/00724/2016</a>
+                  </li>
+                  <li>
+                    <a href="#">SCEE/01456/2018</a>
+                  </li>
+                  <li>
+                    <a href="#">SMSI/01048/2018</a>
+                  </li>
+                  <li>
+                    <a href="#">SCIE/02149/2015</a>
+                  </li>
+                </ul>
+              </div>
+              <div class="button">
+                <a href="#">View All</a>
+              </div>
+            </div>
+
+            <div class="workshops-intern box">
+              <div class="title">Workshops</div>
+              <ul>
+                <li>
+                  <a href="">
+                    <img src="../Assets/Saf.jpg" alt="" />
+                    <span class="workshop_name">Safaricom House</span>
+                  </a>
+                  <span class="place">Westlands</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="../Assets/agile.jpg" alt="" />
+                    <span class="workshop_name">Agile Business Solutions</span>
+                  </a>
+                  <span class="place">Hurligham</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="images/adrian.jpg" alt="" />
+                    <span class="workshop_name">Adrian Kenya Limited</span>
+                  </a>
+                  <span class="place">Embakasi</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="images/microsoft.jpg" alt="" />
+                    <span class="workshop_name">Microsoft Kenya</span>
+                  </a>
+                  <span class="place">Westlands</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="images/avaya.jpg" alt="" />
+                    <span class="workshop_name">Avaya Nairobi</span>
+                  </a>
+                  <span class="place">Parklands</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="images/huawei.jpg" alt="" />
+                    <span class="workshop_name">Huawei Kenya</span>
+                  </a>
+                  <span class="place">Lavington</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="images/HP-Kenya.jpg" alt="" />
+                    <span class="workshop_name">HP-Kenya</span>
+                  </a>
+                  <span class="place">Upperhill</span>
+                </li>
+                <li>
+                  <a href="#">
+                    <img src="images/sophos.jpg" alt="" />
+                    <span class="workshop_name">Sophos Kenya</span>
+                  </a>
+                  <span class="place">Buruburu</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+    </body>
+  );
+};
+
+export default EmployerDashboard;
+
+// <!DOCTYPE html>
+// <html lang="en">
+// <head>
+//     <meta charset="UTF-8">
+//     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+//     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+//     <link
+//     rel="stylesheet"
+//     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+//     integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+//     crossorigin="anonymous" referrerpolicy="no-referrer" />
+//     <title>Employer Dashboard</title>
+//     <link rel="stylesheet" href="sytle1.css">
+
+// </head>
diff --git a/front-end/src/components/Employer/Employer.js b/front-end/src/components/Employer/Employer.js
new file mode 100644
index 0000000..6468b7f
--- /dev/null
+++ b/front-end/src/components/Employer/Employer.js
@@ -0,0 +1,79 @@
+import "./style2.css";
+function Employer() {
+  return (
+    <body>
+      <div class="sidebar">
+        <div class="logo-details">
+          <i class="fas fa-slack"></i>
+          <span class="logo_name">THE TECHNICAL UNIVERSITY OF KENYA</span>
+        </div>
+
+        <ul class="nav-links">
+          <li>
+            <a href="#">
+              <i class="fas fa-bars"></i>
+              <span class="link_name">Dashboard</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-user"></i>
+              <span class="link_name">Employer</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-bell"></i>
+              <span class="link_name">Notifications</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-right-to-bracket"></i>
+              <span class="link_name">Log Out</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <section class="home-section">
+        <nav>
+          <div class="sidebar-button">
+            <i class="fas fa-bars sidebarBtn"></i>
+            <span class="dashboard">Employer</span>
+          </div>
+
+          <div class="profile-details">
+            <img src="images/profile.jpg" alt="" />
+            <span class="admin_name">Sarah Kim</span>
+          </div>
+        </nav>
+
+        <div class="comment-box">
+          <h2>Feedback</h2>
+          <form action="#">
+            <input
+              type="text"
+              name="student's_name"
+              placeholder="STUDENT'S NAME"
+            />
+            <input
+              type="text"
+              name="department's_name"
+              placeholder="DEPARTMENT'S NAME"
+            />
+            <textarea
+              name="feedback"
+              placeholder="Type your feedback here..."
+            ></textarea>
+            <button type="submit">Submit Feedback</button>
+          </form>
+        </div>
+      </section>
+
+      <script src="script.js"></script>
+    </body>
+  );
+}
+
+export default Employer;
\ No newline at end of file
diff --git a/front-end/src/components/Employer/Notifications.js b/front-end/src/components/Employer/Notifications.js
new file mode 100644
index 0000000..229dbec
--- /dev/null
+++ b/front-end/src/components/Employer/Notifications.js
@@ -0,0 +1,58 @@
+import "./style3.css";
+function Notifications() {
+  return (
+    <body>
+      <div class="sidebar">
+        <div class="logo-details">
+          <i class="fas fa-slack"></i>
+          <span class="logo_name">THE TECHNICAL UNIVERSITY OF KENYA</span>
+        </div>
+
+        <ul class="nav-links">
+          <li>
+            <a href="#">
+              <i class="fas fa-bars"></i>
+              <span class="link_name">Dashboard</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-user"></i>
+              <span class="link_name">Employer</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-bell"></i>
+              <span class="link_name">Notifications</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <i class="fas fa-right-to-bracket"></i>
+              <span class="link_name">Log Out</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <section class="home-section">
+        <nav>
+          <div class="sidebar-button">
+            <i class="fas fa-bars sidebarBtn"></i>
+            <span class="dashboard">Notifications</span>
+          </div>
+
+          <div class="profile-details">
+            <img src="images/profile.jpg" alt="" />
+            <span class="admin_name">Sarah Kim</span>
+          </div>
+        </nav>
+      </section>
+
+      
+    </body>
+  );
+}
+
+export default Notifications
\ No newline at end of file
diff --git a/front-end/src/components/Employer/TUK1.jpg b/front-end/src/components/Employer/TUK1.jpg
new file mode 100644
index 0000000..8b2ff27
Binary files /dev/null and b/front-end/src/components/Employer/TUK1.jpg differ
diff --git a/front-end/src/components/Employer/script.js b/front-end/src/components/Employer/script.js
new file mode 100644
index 0000000..156a446
--- /dev/null
+++ b/front-end/src/components/Employer/script.js
@@ -0,0 +1,6 @@
+let sidebar = document.querySelector(".sidebar");
+let sidebarBtn = document.querySelector(".sidebarBtn");
+
+sidebarBtn.onclick = function(){
+  sidebar.classList.toggle("active");
+}
diff --git a/front-end/src/components/Employer/style.css b/front-end/src/components/Employer/style.css
new file mode 100644
index 0000000..3169ce3
--- /dev/null
+++ b/front-end/src/components/Employer/style.css
@@ -0,0 +1,131 @@
+*{
+    margin: 0; 
+    padding: 0;
+    font-family:sans-serif; 
+}
+.hero{
+    height: 650px;
+    width: 100%;
+    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(TUK1.jpg);
+    background-size: cover;
+    background-position: center;
+    position: absolute;
+}
+
+
+
+.form-box{
+    width: 400px;
+    height: 550px;
+    position: relative;
+    margin: 6% auto;
+    background: whitesmoke;
+    padding: 5px;
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+.button-box{
+    width: 200px;
+    margin: 35px auto;
+    position: relative;
+    box-shadow: 0 0 20px 9px lightgreen;
+    border-radius: 30px;
+    
+}
+
+.toggle-btn{
+    padding: 10px 30px;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    outline: none;
+    position: relative;
+}
+
+#btn {
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 110px;
+    height: 100%;
+    background: linear-gradient(to right, green,peru);
+    border-radius: 30px;
+    transition: .5s;
+    }
+
+h1{
+    margin: 60px auto;
+    padding: 0 0 20px;
+    text-align: center;
+    font-size: 12px;
+    color: green;
+    
+
+}
+
+.input-group{
+    top: 180px;
+    position: absolute;
+    width: 280px;
+    transition: .5s;
+}
+
+.input-field{
+    width: 100%;
+    padding: 10px 0;
+    margin: 5px 0;
+    border-left: 0;
+    border-top: 0;
+    border-right: 0;
+    border-bottom: 1px solid #999;
+    outline: none;
+    background: transparent;
+}
+
+
+
+.submit-btn{
+    width: 85%;
+    padding: 10px 30px;
+    cursor: pointer;
+    display: block;
+    margin: auto;
+    background: green;
+    border: 0;
+    outline: none;
+    color: #fff;
+    border-radius: 20px;
+}
+
+.submit-btn:hover{
+    cursor:pointer;
+    background:green;
+    color: black;
+}
+
+.chech-box{
+    margin: 30px 10px 30px 0;
+}
+
+span{
+    color: #777;
+    font-size: 12px;
+    bottom: 64px;
+    position: absolute;
+}
+
+
+
+
+
+#login{
+    left: 50px;
+}
+#signup{
+    left: 450px;
+}
+
+
+
+
diff --git a/front-end/src/components/Employer/style2.css b/front-end/src/components/Employer/style2.css
new file mode 100644
index 0000000..efb1c26
--- /dev/null
+++ b/front-end/src/components/Employer/style2.css
@@ -0,0 +1,294 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .logo-details{
+    height: 80px;
+    width:  100%;
+    display: flex;
+    align-items: center;
+}
+
+
+.sidebar .logo-details i{
+    font-size: 28px;
+    font-weight: 500;
+    color:transparent;
+    min-width: 60px;
+    text-align: center;
+
+}
+.sidebar .logo-details .logo_name{
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+}
+
+.sidebar .nav-links{
+    margin-top: 16px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+
+
+.home-section nav .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background: #f5f6fa;
+    border: 2px solid #efeef1;
+    border-radius: 6px;
+    padding: 0 15px 0 2px;
+}
+
+nav .profile-details img{
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+nav .profile-details .admin_name{
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 10px;
+    white-space: norwap;
+}
+
+nav .profile-details i{
+    color: #333;
+    font-size: 25px;
+}
+
+.comment-box {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: 500px;
+}
+.comment-box h2 {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 15px;
+}
+.comment-box input {
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    border: 1px solid #86b0b6;
+}
+.comment-box input:focus {
+    border: 1px solid #000;
+    outline: 0;
+}
+.comment-box textarea {
+    width: 100%;
+    height: 150px;
+    padding: 15px 20px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid #86b0b6 ;
+}
+.comment-box textarea:focus {
+    border: 1px solid #000;
+    outline: 0;
+}
+.comment-box button {
+    border: 0;
+    padding: 10px 30px;
+    background: green;
+    font-size: 18px;
+    border-radius: 5px;
+    color: whitesmoke;
+}
+.comment-box button:hover {
+    background-color: peru;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 60px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .comment-box {
+        flex-direction: column;
+    }
+    .home-section .comment-box h2{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .comment-box input{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .comment-box input{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .comment-box  {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .comment-box input{
+        width: 500px;
+    }
+   
+}
\ No newline at end of file
diff --git a/front-end/src/components/Employer/style3.css b/front-end/src/components/Employer/style3.css
new file mode 100644
index 0000000..0e33138
--- /dev/null
+++ b/front-end/src/components/Employer/style3.css
@@ -0,0 +1,234 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .logo-details{
+    height: 80px;
+    width:  100%;
+    display: flex;
+    align-items: center;
+}
+
+
+.sidebar .logo-details i{
+    font-size: 28px;
+    font-weight: 500;
+    color:transparent;
+    min-width: 60px;
+    text-align: center;
+
+}
+.sidebar .logo-details .logo_name{
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+}
+
+.sidebar .nav-links{
+    margin-top: 16px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+
+
+.home-section nav .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background: #f5f6fa;
+    border: 2px solid #efeef1;
+    border-radius: 6px;
+    padding: 0 15px 0 2px;
+}
+
+nav .profile-details img{
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+nav .profile-details .admin_name{
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 10px;
+    white-space: norwap;
+}
+
+nav .profile-details i{
+    color: #333;
+    font-size: 25px;
+}
+
+
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 60px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .interns-boxes {
+        flex-direction: column;
+    }
+    .home-section .interns-boxes .box{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .interns-boxes .workshops-intern{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .overview-boxes .box{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .overview-boxes .box{
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .interns-boxes .interns-details{
+        width: 590px;
+    }
+}
\ No newline at end of file
diff --git a/front-end/src/components/Employer/sytle1.css b/front-end/src/components/Employer/sytle1.css
new file mode 100644
index 0000000..8de6c2e
--- /dev/null
+++ b/front-end/src/components/Employer/sytle1.css
@@ -0,0 +1,464 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    
+}
+
+body{
+    min-height: 100vh;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+.sidebar{
+    position: fixed;
+    height: 100%;
+    width: 240px;
+    background: green;
+    transition:all 0.5s ease;
+}
+
+
+.sidebar.active{
+    width: 60px;
+}
+
+.sidebar .logo-details{
+    height: 80px;
+    width:  100%;
+    display: flex;
+    align-items: center;
+}
+
+
+.sidebar .logo-details i{
+    font-size: 28px;
+    font-weight: 500;
+    color:transparent;
+    min-width: 60px;
+    text-align: center;
+
+}
+.sidebar .logo-details .logo_name{
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+}
+
+.sidebar .nav-links{
+    margin-top: 16px;
+}
+
+.sidebar .nav-links li{
+    height: 50px;
+    width: 100%;
+    list-style: none;
+}
+
+.sidebar .nav-links li a{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.4s ease;
+}
+
+.sidebar .nav-links li a:hover{
+    background: lightgreen;
+}
+
+.sidebar .nav-links li a i{
+   /* background: whitesmoke;*/
+    min-width: 60px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+}
+
+.sidebar .nav-links li a .link_name{
+    color: #fff;
+    font-size: 15px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+/* Home-section css */
+.home-section{
+    background: #f5f5f5;
+    position: relative;
+    min-height: 100vh;
+    width: calc(100% - 240px);
+    left: 240px;
+    transition: all 0.5s ease;
+}
+
+.sidebar.active ~ .home-section{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+
+.home-section nav{
+    position: fixed;
+    width: calc(100% - 24px);
+    left: 240px;
+    height: 80px;
+    background: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.5s ease;
+    z-index: 100;
+}
+
+.sidebar.active ~ .home-section nav{
+    width: calc(100% - 60px);
+    left: 60px;
+}
+
+.home-section nav .sidebar-button{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section nav .sidebar-button i{
+    font-size: 35px;
+    margin-right: 10px;
+}
+
+.home-section nav .search-box{
+    height: 50px;
+    width: 550px;
+    margin: 0 20px;
+    position: relative;
+}
+nav .search-box input{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    padding: 0 15px;
+    font-size: 17px;
+    color: black;
+    background: #f5f6fa;
+    border: 2px solid peru;
+    outline: none;
+}
+
+nav .search-box .fa-search{
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 40px;
+    width: 40px;
+    background: green;
+    border-radius: 6px;
+    color: #fff;
+    font-size: 22px;
+    line-height: 40px;
+    text-align: center;
+}
+
+.home-section nav .profile-details{
+    display: flex;
+    align-items: center;
+    height: 50px;
+    min-width: 190px;
+    background: #f5f6fa;
+    border: 2px solid #efeef1;
+    border-radius: 6px;
+    padding: 0 15px 0 2px;
+}
+
+nav .profile-details img{
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+nav .profile-details .admin_name{
+    font-size: 15px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 10px;
+    white-space: norwap;
+}
+
+nav .profile-details i{
+    color: #333;
+    font-size: 25px;
+}
+
+.home-section .home-content{
+    position: relative;
+    padding-top: 100px;
+}
+
+.home-content .overview-boxes{
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 20px;
+    flex-wrap: wrap;
+}
+
+.home-content .overview-boxes .box{
+    width: calc(100% / 4 - 15px);
+    display: flex;
+    justify-content: center;
+    padding: 15px 14px;
+    align-items: center;
+    background: #fff;
+    border-radius: 15px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+.home-content .overview-boxes .box_topic{
+    font-size: 20px;
+    font-weight: 500;
+   
+}
+
+.home-content .overview-boxes .number{
+    font-size: 35px;
+    font-weight: 500;
+    margin-top: -5px;
+    display: inline-block;
+}
+
+.overview-boxes .indicater{
+    display: flex;
+    align-items: center;
+}
+
+.overview-boxes .indicater i{
+    height: 20px;
+    width: 20px;
+    background:#008000;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 20px;
+    margin-right: 5px;
+}
+
+.overview-boxes .indicater .text{
+    font-size: 12px;
+}
+
+.overview-boxes .box .building{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background: lightgreen;
+    color: #008000;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.overview-boxes .box .user{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background: palegoldenrod;
+    color: peru;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.overview-boxes .box .user2{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background:lightblue;
+    color:blue;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.overview-boxes .box .p{
+    font-size: 32px;
+    font-weight: 500;
+    height: 50px;
+    width: 50px;
+    background:lightcoral;
+    color:red;
+    line-height: 50px;
+    text-align: center;
+    border-radius: 12px;
+}
+
+.home-section .interns-boxes{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
+.home-section .interns-boxes .recent-intern{
+    width: 75%;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+}
+
+
+
+.home-section .interns-boxes .interns-details{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.home-section .interns-boxes .box .title{
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.home-section .interns-boxes .box .topic{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.home-section .interns-boxes .box li{
+    list-style: none;
+    margin: 10px 0;
+}
+
+.interns-boxes .box li a{
+    color: #333;
+    font-size: 18px;
+    font-weight: 400;
+    text-decoration: none;
+}
+
+.interns-boxes .button{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.interns-boxes .button a{
+    font-size: 15px;
+    font-weight: 400;
+    color: #fff;
+    background:#008000;
+    padding: 4px 12px;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+.interns-boxes .button a:hover{
+    background: peru;
+
+}
+
+/*right side*/
+.home-section .interns-boxes .workshops-intern{
+    width: 35%;
+    margin-left: 20px;
+    background: #fff;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+    border-radius: 12px;
+}
+
+.interns-boxes .workshops-intern li{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.interns-boxes .workshops-intern li a{
+    display: flex;
+    align-items: center;
+}
+
+.interns-boxes .workshops-intern img{
+    margin-right: 8px;
+    height: 40px;
+    width: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+}
+
+
+/*Responsive media query */
+@media (max-width: 1316px) {
+    .sidebar{
+        width: 60px;
+    }
+    .sidebar.active{
+        width: 220px;
+    }
+    .home-section{
+        width: calc(100% - 60px);
+        left: 60px; 
+    }
+    .sidebar.active ~ .home-section{
+        width: calc(100% - 220px);
+        left: 220px; 
+    }
+    .home-section nav{
+        width: calc(100% - 60px);
+        left: 60px;
+    }
+    .sidebar.active ~ .home-section nav{
+        width: calc(100% - 220px);
+        left: 220px;
+    }
+}
+
+@media (max-width: 1078px) {
+    .home-section .interns-boxes {
+        flex-direction: column;
+    }
+    .home-section .interns-boxes .box{
+        margin-bottom: 20px;
+        width: 100%;
+        overflow-x: scroll;
+    }
+    .home-section .interns-boxes .workshops-intern{
+        margin-left: 0;
+    }
+}
+@media (max-width: 1018px) {
+    .home-section .overview-boxes .box{
+        width: calc(100% / 2 - 15px);
+        margin-bottom: 15px;
+    }
+}
+@media (max-width: 648px) {
+    .home-section nav .sidebar-button .dashboard,
+     nav .profile-details .admin_name,
+     nav .profile-details i{
+        display: none;
+    }
+    .home-section nav .profile-details{
+        min-width: 50px;
+        height:  50px;
+    }
+    .home-section .overview-boxes .box{
+        width: 100%;
+        margin-bottom: 15px;
+    }
+    .home-section .interns-boxes .interns-details{
+        width: 590px;
+    }
+}
+
diff --git a/front-end/src/components/Login.js b/front-end/src/components/Login.js
index e69de29..52ae41c 100644
--- a/front-end/src/components/Login.js
+++ b/front-end/src/components/Login.js
@@ -0,0 +1,174 @@
+import { useEffect, useState } from "react";
+import { Navigate, useNavigate } from "react-router-dom";
+import "./Employer/style.css";
+function Login() {
+  const navigate = useNavigate();
+  const [authenticated, setauthenticated] = useState(
+    localStorage.getItem(localStorage.getItem("authenticated") || false)
+  );
+  const handleLogin = (e) => {
+    e.preventDefault();
+    let email = document.querySelector('input[name="loginEmail"]')
+      ? document.querySelector('input[name="loginEmail"]').value
+      : "";
+    let pass = document.querySelector('input[name="loginPassword"]')
+      ? document.querySelector('input[name="loginPassword"]').value
+      : "";
+    //Login API endpoint
+    fetch(" http://127.0.0.1:8000/api/login/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: email,
+        password: pass,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data && data.user_type == "supervisor") {
+          setauthenticated(true);
+          localStorage.setItem("authenticated", true);
+          navigate("/supervisor-dashboard/", { replace: true });
+        }
+      });
+  };
+
+  const handleRegistration = (e) => {
+    e.preventDefault();
+    let userType = document.querySelector("#userTypes")
+      ? document.querySelector("#userTypes").value
+      : "";
+    let username = document.querySelector('input[name="r-username"]')
+      ? document.querySelector('input[name="r-username"]').value
+      : "";
+    let email = document.querySelector('input[name="r-email"]')
+      ? document.querySelector('input[name="r-email"]').value
+      : "";
+    let pass = document.querySelector('input[name="r-password"]')
+      ? document.querySelector('input[name="r-password"]').value
+      : "";
+    let confirmPass = document.querySelector('input[name="r-confirm"]')
+      ? document.querySelector('input[name="r-confirm"]').value
+      : "";
+    // alert([userType, username, email, pass, confirmPass])
+    if (pass !== confirmPass) {
+      alert("Password must match");
+      return false;
+    }
+    // Registration API endpoint
+    fetch(" http://127.0.0.1:8000/api/register/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: email,
+        username: username,
+        password: pass,
+        user_type: userType,
+      }),
+    })
+      .then((res) => {
+        res.json();
+        if (res.status == 201) {
+          alert("Registered Successfully, Click Login to Sign in");
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+      let form = document.querySelector("#signup")
+      ? document.querySelector("#signup")
+      : "";
+      form.reset()
+  };
+  return (
+    <body>
+      <div class="hero">
+        <div class="form-box">
+          <div class="button-box">
+            <div id="btn"></div>
+            <button type="button" class="toggle-btn" id="myLogin">
+              Login
+            </button>
+            <button type="button" class="toggle-btn" id="mySignUp">
+              Signup
+            </button>
+          </div>
+          <form id="login" class="input-group" onSubmit={handleLogin}>
+            <div class="form-outline mb-4">
+              <input
+                type="email"
+                class="input-field"
+                placeholder="Enter Username"
+                name="loginEmail"
+                required
+              />
+            </div>
+            <div class="form-outline mb-4">
+              <input
+                type="password"
+                class="input-field"
+                placeholder="Enter password"
+                name="loginPassword"
+                required
+              />
+            </div>
+            <input type="checkbox" class="chech-box" />
+            <span>Remember me.</span>
+            <button type="submit" class="submit-btn">
+              Login
+            </button>
+          </form>
+
+          <form id="signup" class="input-group" onSubmit={handleRegistration}>
+            <label for="userTypes">User-Type: </label>
+            <select name="userTypes" id="userTypes" class="input-field">
+              <option value="supervisor">Supervisor</option>
+              <option value="employer">Employer</option>
+              <option value="student">Student</option>
+            </select>
+            <input
+              type="text"
+              class="input-field"
+              placeholder="Enter Username"
+              name="r-username"
+              required
+            />
+            <input
+              type="email"
+              class="input-field"
+              placeholder="Email Id"
+              name="r-email"
+              required
+            />
+            <input
+              type="password"
+              class="input-field"
+              placeholder="Enter Password"
+              name="r-password"
+              required
+            />
+            <input
+              type="password"
+              class="input-field"
+              placeholder="Confirm Password"
+              name="r-confirm"
+              required
+            />
+            <input type="checkbox" class="chech-box" />
+            <span>I agree to the terms & conditions.</span>
+            <button type="submit" class="submit-btn">
+              Signup
+            </button>
+          </form>
+          <h1>ATTACHMENTS MANAGEMENT SYSTEM</h1>
+        </div>
+      </div>
+    </body>
+  );
+}
+
+export default Login;
diff --git a/front-end/src/components/Students/Dashboard.js b/front-end/src/components/Students/Dashboard.js
new file mode 100644
index 0000000..19d4e66
--- /dev/null
+++ b/front-end/src/components/Students/Dashboard.js
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Card, CardContent, CardHeader } from '@mui/material';
+
+export const StudentDashboard=() => (
+    <Card>
+        <CardHeader title="Welcome student to your dashboard" />
+        <CardContent>Congrats on your internship...</CardContent>
+    </Card>
+);
\ No newline at end of file
diff --git a/front-end/src/components/Students/MyUrlField.js b/front-end/src/components/Students/MyUrlField.js
new file mode 100644
index 0000000..d5d0e02
--- /dev/null
+++ b/front-end/src/components/Students/MyUrlField.js
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useRecordContext } from 'react-admin';
+
+const MyUrlField = ({ source }) => {
+    const record = useRecordContext();
+    return record ? (
+        <a href={record[source]}>
+            {record[source]}
+        </a>
+    ) : null;
+}
+
+export default MyUrlField;
\ No newline at end of file
diff --git a/front-end/src/components/Students/posts.js b/front-end/src/components/Students/posts.js
new file mode 100644
index 0000000..3e97e66
--- /dev/null
+++ b/front-end/src/components/Students/posts.js
@@ -0,0 +1,64 @@
+import * as React from "react";
+import {
+    List,
+    Datagrid,
+    TextField,
+    ReferenceField,
+    EditButton,
+    Edit,
+    Create,
+    SimpleForm,
+    ReferenceInput,
+    SelectInput,
+    TextInput,
+} from 'react-admin';
+
+const postFilters = [
+    <TextInput source="q" label="Search" alwaysOn />,
+    <ReferenceInput source="userId" label="User" reference="users" allowEmpty>
+        <SelectInput optionText="name" />
+    </ReferenceInput>,
+];
+
+export const PostList = props => (
+    <List filters={postFilters} {...props}>
+<Datagrid>
+    <TextField source="id"/>
+    <ReferenceField source="userId" reference="users">
+                <TextField source="name" />
+            </ReferenceField>
+            <TextField source="title"/>
+            <EditButton/>
+</Datagrid>
+  </List>
+  
+);
+
+const PostTitle =({record})=>{
+    return<span>Post {record ? `"${record.title}"` : ''}</span>
+}
+
+export const PostEdit = props => (
+    <Edit title={<PostTitle />} {...props}>
+        <SimpleForm>
+            <TextInput  disabled source="id"/>
+            <ReferenceInput source="userId" reference="users">
+                <SelectInput optionText="name"/>
+            </ReferenceInput>
+        
+            <TextInput source="title" />
+            <TextInput multiline source="body"/>
+        </SimpleForm>
+    </Edit>
+);
+export const PostCreate = props => (
+        <Create {...props}>
+            <SimpleForm>
+                <ReferenceInput source="userId" reference="users">
+                    <SelectInput optionText="name" />
+                </ReferenceInput>
+                <TextInput source="title" />
+                <TextInput multiline source="body" />
+            </SimpleForm>
+        </Create>
+);
\ No newline at end of file
diff --git a/front-end/src/components/Students/users.js b/front-end/src/components/Students/users.js
new file mode 100644
index 0000000..72b337a
--- /dev/null
+++ b/front-end/src/components/Students/users.js
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { List,Datagrid,TextField,EmailField,UrlField } from 'react-admin'
+
+export const UserList = props => (
+    <List {...props}>
+        <Datagrid rowClick="edit">
+            <TextField source="id" />
+            <TextField source="name" />
+            
+            <EmailField source="email" />
+            
+            <TextField source="phone" />
+            <UrlField source="website" />
+            <TextField source="company.name" />
+        </Datagrid>
+    </List>
+);
\ No newline at end of file
diff --git a/front-end/src/components/Supervisor/Dashboard.js b/front-end/src/components/Supervisor/Dashboard.js
index 7f00707..d30fcc7 100644
--- a/front-end/src/components/Supervisor/Dashboard.js
+++ b/front-end/src/components/Supervisor/Dashboard.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { useEffect, useState } from "react";
 import { Navigate, useNavigate } from "react-router-dom";
-
 function SupervisorDashboard() {
   //Back to top button
   const [backToTopButton, setBackToTopButton] = useState(false);
diff --git a/front-end/src/components/Supervisor/logbook-feedback..js b/front-end/src/components/Supervisor/logbook-feedback..js
index f4e766f..7b0b8e0 100644
--- a/front-end/src/components/Supervisor/logbook-feedback..js
+++ b/front-end/src/components/Supervisor/logbook-feedback..js
@@ -41,7 +41,7 @@ function LogBookFeeback() {
 
   const navigate = useNavigate();
   const authenticated = localStorage.getItem("authenticated");
-  if (!authenticated) {
+  if (authenticated) {
     navigate("/");
   } else {
     return (
diff --git a/front-end/src/index.css b/front-end/src/index.css
index 1396270..3d38a00 100644
--- a/front-end/src/index.css
+++ b/front-end/src/index.css
@@ -1,5 +1,4 @@
 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
-
 body {
   font-family: "Poppins", sans-serif;
   background: #fafafa;
diff --git a/front-end/src/index.js b/front-end/src/index.js
index 6614184..ccb5856 100644
--- a/front-end/src/index.js
+++ b/front-end/src/index.js
@@ -2,8 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-
-
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>