diff --git a/static/admin.css b/static/admin.css
index 6cc04ad..aaa1280 100644
--- a/static/admin.css
+++ b/static/admin.css
@@ -75,4 +75,94 @@ body {
     text-align: center;
     text-decoration: none;
     display: block;
-}
\ No newline at end of file
+}
+
+/*view caretaker*/
+
+.caretaker {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 400px;
+    gap: 20px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.caretaker button {
+    padding: 12px 24px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+}
+
+/*view elderly users*/
+
+.elderly {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 400px;
+    gap: 20px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.elderly button {
+    padding: 12px 24px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+}
+
+/*caretaker availability*/
+
+.availability {
+    display: flex;
+    justify-content: center;
+    margin: 30px 0;
+}
+
+table {
+    width: 80%;
+    border-collapse: collapse;
+    text-align: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+th, td {
+    padding: 15px;
+    border-bottom: 1px solid #ddd;
+}
+
+th {
+    background-color: #f4f4f4;
+    font-size: 18px;
+}
+
+.update {
+    text-align: center;
+    margin: 30px 0;
+}
+
+.update button {
+    padding: 12px 30px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..f55c73c
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,194 @@
+* {
+    font-family: "proxima-nova", "Gill Sans MT", sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    text-align: center;
+    background-color: rgb(61, 55, 55);
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.header a {
+    color: #ffffff;
+    font-size: 36px;
+    font-weight: bold;
+    letter-spacing: 1.5cap;
+    text-align: center;
+    text-decoration: none;
+    display: block;
+}
+
+.title h1 {
+    text-align: center;
+    padding-top: 10px;
+    text-decoration: underline;
+    padding-bottom: 10px;
+}
+
+footer {
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+    padding-top: 20px;
+    text-align: center;
+    font-size: 14px;
+}
+
+body {
+    background-color: white;
+    margin-bottom: 30px;
+}
+
+/* home page */
+
+.hero {
+    background-image: url('main.jpg');
+    background-size: cover;
+    background-position: center;
+    height: 700px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+}
+
+.slogan h1 {
+    font-size: 48px;
+    text-align: center;
+    margin: 0;
+    padding: 0 20px;
+}
+
+.about-us {
+    padding: 40px 20px;
+    text-align: center;
+    background-color: #f4f4f4;
+}
+
+.about-us h2 {
+    font-size: 32px;
+    margin-bottom: 20px;
+}
+
+.about-us p {
+    font-size: 18px;
+    line-height: 1.6;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.authentication {
+    text-align: center;
+    padding: 30px;
+}
+
+.authentication a {
+    background-color: rgb(163, 14, 14);
+    color: white;
+    padding: 15px 30px;
+    font-size: 18px;
+    text-decoration: none;
+    border-radius: 5px;
+    margin: 10px;
+    display: inline-block;
+    transition: background-color 0.3s;
+}
+
+.authentication a:hover {
+    background-color: rgb(86, 7, 7);
+}
+
+.reviews {
+    background-color: #f9f9f9;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.reviews h2 {
+    font-size: 32px;
+    margin-bottom: 20px;
+}
+
+.review-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.review {
+    font-size: 18px;
+    padding: 20px;
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+/* register*/
+
+.signup-container {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+}
+
+.signup-container h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+form label {
+    margin-bottom: 8px;
+}
+
+form input,
+form select,
+form button {
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    font-size: 16px;
+}
+
+form button {
+    background-color: rgb(163, 14, 14);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+form button:hover {
+    background-color: rgb(86, 7, 7);
+}
+
+/* log in */
+
+.login-box {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.login-box h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
diff --git a/static/superadmin.css b/static/superadmin.css
index a010466..a22bdb0 100644
--- a/static/superadmin.css
+++ b/static/superadmin.css
@@ -75,4 +75,29 @@ body {
     text-align: center;
     text-decoration: none;
     display: block;
-}
\ No newline at end of file
+}
+
+/*view admins*/
+
+.admins {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 400px;
+    gap: 20px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.admins button {
+    padding: 12px 24px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+}
diff --git a/templates/Admin/availability.html b/templates/Admin/availability.html
index ebb4fd8..de62370 100644
--- a/templates/Admin/availability.html
+++ b/templates/Admin/availability.html
@@ -16,8 +16,30 @@ <h1>
     <div class="title">
         <h1>Caretaker Availability</h1>
     </div>
+
+    <div class="availability">
+        <table>
+            <thead>
+                <tr>
+                    <th>Caretaker Name</th>
+                    <th>Availability</th>
+                    <th>Elderly Assigned To</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Caretaker Name</td>
+                    <td>Available/Not Available</td>
+                    <td>Elderly Name</td>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="update">
+        <button>Update</button>
+    </div>
 </body>
 <footer>
     &copy; 2024 Smart Companion Application | Group 2 T18L
 </footer>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/Admin/caretakerdata.html b/templates/Admin/caretakerdata.html
index 8baef0e..f72ef74 100644
--- a/templates/Admin/caretakerdata.html
+++ b/templates/Admin/caretakerdata.html
@@ -16,8 +16,13 @@ <h1>
     <div class="title">
         <h1>Caretakers</h1>
     </div>
+    <div class="caretaker">
+        <h3>Caretaker Name</h3>
+        <button>Update</button>
+        <button>Delete</button>
+    </div>
 </body>
 <footer>
     &copy; 2024 Smart Companion Application | Group 2 T18L
 </footer>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/Admin/userdata.html b/templates/Admin/userdata.html
index ff2ee1e..3c03479 100644
--- a/templates/Admin/userdata.html
+++ b/templates/Admin/userdata.html
@@ -16,8 +16,13 @@ <h1>
     <div class="title">
         <h1>Users</h1>
     </div>
+    <div class="elderly">
+        <h3>Elderly Name</h3>
+        <button>Update</button>
+        <button>Delete</button>
+    </div>
 </body>
 <footer>
     &copy; 2024 Smart Companion Application | Group 2 T18L
 </footer>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/Caretaker/contact.html b/templates/Caretaker/contact.html
new file mode 100644
index 0000000..0430902
--- /dev/null
+++ b/templates/Caretaker/contact.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Smart Companion | Contact</title>
+    <link href="caretaker.css" rel="stylesheet">
+</head>
+<header>
+    <div class="header">
+        <h1>
+           <a href="caretakerhomepage.html">SMART COMPANION</a>
+        </h1>
+    </div>
+</header>
+<body>
+    <div class="title">
+        <h1>Contact</h1>
+    </div>
+    <div class="contactpatient">
+        <h3>Patient Name</h3>
+        <button class="contact">Contact Patient</button>
+    </div>
+</body>
+<footer>
+    &copy; 2024 Smart Companion Application | Group 2 T18L
+</footer>
+</html>
\ No newline at end of file
diff --git a/templates/SuperAdmin/viewadmins.html b/templates/SuperAdmin/viewadmins.html
index 21fabb3..382adb8 100644
--- a/templates/SuperAdmin/viewadmins.html
+++ b/templates/SuperAdmin/viewadmins.html
@@ -16,8 +16,13 @@ <h1>
     <div class="title">
         <h1>Admins</h1>
     </div>
+    <div class="admins">
+        <h3>Admin Name</h3>
+        <button>Update</button>
+        <button>Delete</button>
+    </div>
 </body>
 <footer>
     &copy; 2024 Smart Companion Application | Group 2 T18L
 </footer>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/homepage.html b/templates/homepage.html
new file mode 100644
index 0000000..72f1955
--- /dev/null
+++ b/templates/homepage.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Smart Companion</title>
+    <link href="main.css" rel="stylesheet">
+</head>
+<header>
+    <div class="header">
+        <h1>
+           <a href="homepage.html">SMART COMPANION</a>
+        </h1>
+    </div>
+</header>
+<body>
+    <section class="hero">
+        <div class="slogan">
+            <h1>Smart Companion: Caring for Seniors, Enriching Lives.</h1>
+        </div>
+    </section>
+
+    <div class="about-us">
+        <h2>About Us</h2>
+        <p>At Smart Companion, we are dedicated to providing compassionate and reliable caretaker services for the elderly. Our mission is to enhance the quality of life for seniors by offering personalized, professional care in the comfort of their own homes. With a team of trained and experienced caregivers, we prioritize safety, well-being, and emotional support, ensuring that each individual receives the attention and care they deserve. At Smart Companion, we believe that every senior deserves a smart, caring companion who truly understands their needs.</p>
+    </div>
+    <div class="authentication">
+        <a href="signup.html">REGISTER NOW</a>
+        <a href="login.html">LOG IN</a>
+    </div>
+
+    <section class="reviews">
+        <h2>What Our Clients Say</h2>
+        <div class="review-container">
+            <div class="review">"Great service! Highly recommended."</div>
+            <div class="review">"The caretakers are very professional and caring."</div>
+            <div class="review">"Made my life so much easier. Thank you!"</div>
+        </div>
+    </section>
+    
+</body>
+<footer>
+    &copy; 2024 Smart Companion Application | Group 2 T18L
+</footer>
+</html>
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index c48c235..9b4b16c 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,32 +1,37 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Login</title>
-        <link rel="stylesheet" type="text/css" href="static/style.css">
-        <link rel="icon" type="image/x-icon" href="static/favicon.ico">
-    </head>
-    <body>
-        <h1>Login</h1>
-        <p>You can Login here!</p>
-        <!-- Over here they can login as USER, CARETAKER, ADMIN, SUPERADMIN-->
-        {% with messages = get_flashed_messages() %}
-            {% if messages %}
-                <ul>
-                    {% for message in messages %}
-                        <li>{{ message }}</li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
-        {% endwith %}
-        <form action="/login" method="POST">
-            <label for="username">Enter Username:</label>
-            <input type="text" id="username" name="username" required><br><br>
-
-            <label for="password">Enter Password</label>
-            <input type="password" id="password" name="password" required><br><br>
-
-            <input type="submit" value="Sign in">
-        </form>
-        
-    </body>
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Smart Companion | Log In</title>
+    <link href="main.css" rel="stylesheet">
+</head>
+<header>
+    <div class="header">
+        <h1>
+           <a href="homepage.html">SMART COMPANION</a>
+        </h1>
+    </div>
+</header>
+<body>
+    <section>
+        <div class="login-box">
+            <h2>Log In</h2>
+            <form action="submit_login.html" method="post">
+                <label for="user-id">ID:</label>
+                <input type="text" id="id" name="id" required>
+
+                <br><br>
+
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password" required>
+
+                <br><br>
+
+                <button type="submit">Log In</button>
+            </form>
+        </div>
+    </section>
+</body>
+<footer>
+    &copy; 2024 Smart Companion Application | Group 2 T18L
+</footer>
+</html>
diff --git a/templates/main.jpg b/templates/main.jpg
new file mode 100644
index 0000000..b7c0e72
Binary files /dev/null and b/templates/main.jpg differ
diff --git a/templates/signup.html b/templates/signup.html
index 226e2c6..d464998 100644
--- a/templates/signup.html
+++ b/templates/signup.html
@@ -1,15 +1,68 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Signup</title>
-        <link rel="stylesheet" type="text/css" href="static/style.css">
-        <link rel="icon" type="image/x-icon" href="static/favicon.ico">
-    </head>
-    <body>
-        <h1>Signup</h1>
-        <a href="/usersignup" title="Signup as a User">User Signup</a><br>
-    
-        <a href="/caresignup" title="Signup as a Caretaker">Caretaker Signup</a>
-        
-    </body>
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Smart Companion | Sign Up</title>
+    <link href="main.css" rel="stylesheet">
+</head>
+<header>
+    <div class="header">
+        <h1>
+           <a href="homepage.html">SMART COMPANION</a>
+        </h1>
+    </div>
+</header>
+<body>
+    <section>
+        <div class="signup-container">
+            <h2>Sign Up</h2>
+            <form action="submit_signup.html" method="post">
+                <label for="role">Sign up as:</label>
+                <select id="role" name="role" required>
+                    <option value="caretaker">Caretaker</option>
+                    <option value="user">User</option>
+                </select>
+
+                <br><br>
+
+                <label for="name">Full Name:</label>
+                <input type="text" id="name" name="name" required>
+
+                <br><br>
+
+                <label for="phone">Phone Number:</label>
+                <input type="tel" id="phone" name="phone" required>
+
+                <br><br>
+
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+
+                <br><br>
+
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password" required>
+
+                <br><br>
+
+                <label for="age">Age:</label>
+                <input type="number" id="age" name="age" required>
+
+                <br><br>
+
+                <label for="gender">Gender:</label>
+                <select id="gender" name="gender" required>
+                    <option value="female">Female</option>
+                    <option value="male">Male</option>
+                </select>
+
+                <br><br>
+
+                <button type="submit">Sign Up</button>
+            </form>
+        </div>
+    </section>    
+</body>
+<footer>
+    &copy; 2024 Smart Companion Application | Group 2 T18L
+</footer>
+</html>