diff --git a/src/main/webapp/login.xhtml b/src/main/webapp/login.xhtml
new file mode 100644
index 0000000..d51f075
--- /dev/null
+++ b/src/main/webapp/login.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:f="http://xmlns.jcp.org/jsf/core">
+<f:view>
+    <h:head>
+        <title>Login - My Portfolio</title>
+        <h:outputStylesheet library="css" name="styles.css"/>
+        <h:outputStylesheet library="css" name="auth.css"/>
+    </h:head>
+
+    <h:body>
+        <ui:include src="header.xhtml"/>
+        <h:form>
+            <main>
+                <section id="login">
+                    <h1>Login</h1>
+                    <div class="form-container">
+                        <div class="form-group">
+                            <h:outputLabel for="username" value="Username:" />
+                            <h:inputText id="username" value="#{projectBean.username}" required="true" styleClass="form-control" />
+                        </div>
+                        <div class="form-group">
+                            <h:outputLabel for="password" value="Password:" />
+                            <h:inputSecret id="password" value="#{projectBean.password}" required="true" styleClass="form-control" />
+                        </div>
+                        <h:commandButton value="Login" action="#{projectBean.login}" styleClass="btn btn-primary" />
+                    </div>
+                    <h:messages globalOnly="true" />
+                </section>
+            </main>
+        </h:form>
+        <ui:include src="footer.xhtml"/>
+    </h:body>
+</f:view>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/register.xhtml b/src/main/webapp/register.xhtml
new file mode 100644
index 0000000..9761e13
--- /dev/null
+++ b/src/main/webapp/register.xhtml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:f="http://xmlns.jcp.org/jsf/core">
+<f:view>
+    <h:head>
+        <title>Register - My Portfolio</title>
+        <h:outputStylesheet library="css" name="styles.css"/>
+        <h:outputStylesheet library="css" name="auth.css"/>
+    </h:head>
+
+    <h:body>
+        <ui:include src="header.xhtml"/>
+        <h:form>
+            <main>
+                <section id="register">
+                    <h1>Register</h1>
+                    <div class="form-container">
+                        <div class="form-group">
+                            <h:outputLabel for="username" value="Username:" />
+                            <h:inputText id="username" value="#{projectBean.username}" required="true" styleClass="form-control" />
+                        </div>
+                        <div class="form-group">
+                            <h:outputLabel for="password" value="Password:" />
+                            <h:inputSecret id="password" value="#{projectBean.password}" required="true" styleClass="form-control" />
+                        </div>
+                        <h:commandButton value="Register" action="#{projectBean.register}" styleClass="btn btn-primary" />
+                    </div>
+                    <h:messages globalOnly="true" />
+                </section>
+            </main>
+        </h:form>
+        <ui:include src="footer.xhtml"/>
+    </h:body>
+</f:view>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/resources/css/auth.css b/src/main/webapp/resources/css/auth.css
new file mode 100644
index 0000000..df6202a
--- /dev/null
+++ b/src/main/webapp/resources/css/auth.css
@@ -0,0 +1,75 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 70vh;
+}
+
+section {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 40%;
+}
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.form-container {
+    width: 100%;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group h\\:outputLabel {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #555;
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.btn {
+    display: inline-block;
+    padding: 10px 20px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background-color: #007bff;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+}
+
+h\\:messages {
+    margin-top: 20px;
+    color: #ff0000;
+}
\ No newline at end of file
