diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..333cd79
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,19 @@
+/*
+  This file contains global base styles and resets
+  --> ensures consistent spacing, font usage, and box sizing
+  across all elements in the application
+*/
+
+/* Reset default browser styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
+}
+
+/* Global body styling */
+body {
+  background: var(--bg);
+  color: var(--text);
+}
\ No newline at end of file
diff --git a/css/login.css b/css/login.css
new file mode 100644
index 0000000..5123766
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,161 @@
+/*
+  File contains the styles for the login page
+  --> defines the layout of the login screen
+*/
+
+.login-page {
+  min-height: 100vh;
+  display: flex; /* enables flexbox layout for centering */
+  justify-content: center; /* horizontally centers the card */
+  align-items: center; /* vertically centers the card */
+  padding: 24px; /* space inside the page edges */
+  /* Layered background: two soft radial gradients for color accents, then the main background color */
+  background:
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 35%),
+    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.10), transparent 30%),
+    var(--bg);
+}
+
+/* Main login card container */
+.login-card {
+  width: 100%;
+  max-width: 430px; /* prevents the card from getting too wide on large screens */
+  background: var(--card); /* uses card color from variables.css */
+  border-radius: 24px; /* rounded corners */
+  box-shadow: var(--shadow); /* soft shadow for card elevation */
+  padding: 40px 32px; /* inner spacing for content */
+}
+
+/* Logo area above the form */
+.login-logo-wrapper {
+  display: flex; /* centers logo horizontally */
+  justify-content: center;
+  margin-bottom: 20px;
+  width: 100%;
+  overflow: hidden; /* hides any part of the logo that overflows the container */
+}
+
+/* Full logo styling */
+.login-logo {
+  width: 100%;
+  max-width: 220px; /* logo never exceeds this width */
+  height: auto;
+  display: block;
+  object-fit: contain; /* keeps logo aspect ratio, prevents stretching */
+}
+
+.login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  text-align: center;
+  color: var(--text-muted);
+  margin-bottom: 28px;
+}
+
+/* Form layout */
+.login-form {
+  display: flex;
+  flex-direction: column; /* stack form fields vertically */
+  gap: 18px; /* vertical space between form groups */
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column; /* label above input */
+  gap: 8px; /* space between label and input */
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 14px 16px; /* vertical and horizontal padding for input */
+  border: 1px solid #dbe2ea; /* subtle border */
+  border-radius: 14px; /* rounded input corners */
+  background: #ffffff;
+  font-size: 1rem;
+  color: var(--text);
+}
+
+/* Highlight input when focused */
+.form-group input:focus {
+  outline: none; /* removes default browser outline */
+  border-color: #7c3aed; /* purple border on focus */
+  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10); /* soft glow for focus state */
+}
+
+/* Password field with button inside the same row */
+.password-wrapper {
+  display: flex; /* input and button in one row */
+  align-items: center; /* vertically center input and button */
+  gap: 10px; /* space between input and show/hide button */
+}
+
+.password-wrapper input {
+  flex: 1; /* input takes all available space, button stays compact */
+}
+
+.toggle-password {
+  border: none;
+  background: transparent; /* no background for button */
+  color: #64748b;
+  font-weight: 600;
+  cursor: pointer; /* pointer cursor for better UX */
+}
+
+/* Main login action button */
+.login-button {
+  margin-top: 4px;
+  border: none;
+  border-radius: 14px;
+  padding: 14px 18px;
+  background: var(--gradient); /* uses a gradient background from variables */
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.22); /* blue shadow for button depth */
+}
+
+.login-button:hover {
+  opacity: 0.95; /* slight fade on hover for feedback */
+}
+
+.signup-text {
+  margin-top: 24px;
+  text-align: center;
+  color: var(--text-muted);
+  /* used for the 'Don't have an account?' and link below the form */
+}
+
+.signup-text a {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+  /* blue link for sign up/login */
+}
+
+/* Smaller spacing and sizing for narrow screens */
+@media (max-width: 480px) {
+  /* Responsive adjustments for small screens (mobile) */
+  .login-card {
+    padding: 28px 20px; /* less padding on mobile */
+    border-radius: 20px; /* slightly less rounded */
+  }
+
+  .login-title {
+    font-size: 1.7rem; /* smaller title on mobile */
+  }
+
+  .login-logo {
+    max-width: 170px; /* smaller logo on mobile */
+  }
+}
\ No newline at end of file
diff --git a/css/profile.css b/css/profile.css
new file mode 100644
index 0000000..08c2770
--- /dev/null
+++ b/css/profile.css
@@ -0,0 +1,94 @@
+/* Profile Page - Full width layout, darker share button, responsive grid */
+
+/* Force main content container to full width, remove centering and max-width */
+.layout > div[style*="flex:1"] {
+  margin: 0 !important;
+  max-width: 100% !important;
+  padding: 0 !important;
+  width: 100% !important;
+}
+
+/* Inner spacing for the profile card */
+.profile-main {
+  background: transparent !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 20px 32px !important;
+  margin: 0 auto !important;
+  width: 100%;
+  max-width: 1600px;          /* Limits content on very large screens, but still wide */
+}
+
+/* Make prompts grid use more columns on large screens */
+.profile-main section:last-child {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
+  gap: 24px !important;
+  width: 100% !important;
+}
+
+/* Share button: darker background and text */
+.profile-header button:last-child {
+  background: #cbd5e1 !important;   /* darker gray */
+  color: #1e293b !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+/* Buttons keep rounded corners */
+.login-button {
+  border-radius: 14px !important;
+}
+
+/* Prompt cards: rounded corners */
+.profile-main section > div {
+  border-radius: 18px !important;
+  box-shadow: 0 2px 8px rgba(59,130,246,0.06);
+}
+
+/* Prompt images: rounded corners */
+.profile-main section img {
+  border-radius: 12px !important;
+}
+
+/* Avatar remains round */
+.profile-avatar {
+  border-radius: 50% !important;
+}
+
+/* All outer containers stay square */
+.layout,
+.profile-main,
+.profile-header,
+.profile-tabs,
+nav {
+  border-radius: 0 !important;
+}
+
+/* Responsive: tablets */
+@media (max-width: 768px) {
+  .profile-main {
+    padding: 16px !important;
+  }
+  .profile-header {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+  .profile-header > div:last-child {
+    flex-direction: row;
+    width: 100%;
+  }
+}
+
+/* Responsive: mobile */
+@media (max-width: 480px) {
+  .profile-main {
+    padding: 12px !important;
+  }
+  .profile-header > div:last-child {
+    flex-direction: column;
+  }
+  .profile-main section:last-child {
+    grid-template-columns: 1fr !important;
+  }
+}
\ No newline at end of file
diff --git a/css/sidebar.css b/css/sidebar.css
new file mode 100644
index 0000000..44b4a4b
--- /dev/null
+++ b/css/sidebar.css
@@ -0,0 +1,169 @@
+/*
+  Sidebar styles for OnlyPrompt
+  - modern soft card look
+  - responsive: full sidebar on desktop, icon-only on smaller screens
+*/
+
+.sidebar-shell {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #eef2f7;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Logo */
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 72px;
+  margin-bottom: 32px;
+  padding: 6px 8px;
+}
+
+.sidebar-logo-full {
+  max-width: 170px;
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.sidebar-logo-icon {
+  width: 36px;
+  height: 36px;
+  display: none;
+}
+
+/* Navigation */
+.sidebar {
+  flex: 1;
+}
+
+.sidebar ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar li {
+  margin-bottom: 8px;
+}
+
+.sidebar a {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  text-decoration: none;
+  color: #475569;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 12px 16px;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.sidebar a:hover {
+  background: #f1f5f9;
+}
+
+.sidebar i {
+  font-size: 1.3rem;
+  flex-shrink: 0;
+}
+
+.icon-blue {
+  color: #3b82f6 !important;
+}
+
+.icon-purple {
+  color: #8b5cf6 !important;
+}
+
+.icon-pink {
+  color: #ec4899 !important;
+}
+
+/* Active item */
+.sidebar a.active {
+  background: #eef2ff;
+  color: #2563eb;
+  border-left: 3px solid #3b82f6;
+}
+
+/* Bottom logout area */
+.sidebar-bottom {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #eef2f7;
+}
+
+.sidebar-logout {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  text-decoration: none;
+  color: #64748b;
+  font-weight: 600;
+  transition: background 0.2s ease;
+}
+
+.sidebar-logout:hover {
+  background: #f1f5f9;
+}
+
+.logout-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.sidebar-logout i {
+  font-size: 1.2rem;
+}
+
+.logout-arrow {
+  color: #cbd5e1;
+}
+
+/* Responsive: icon-only sidebar */
+@media (max-width: 900px) {
+  .sidebar-shell {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .sidebar-logo-full {
+    display: none;
+  }
+
+  .sidebar-logo-icon {
+    display: block;
+  }
+
+  .sidebar .nav-text,
+  .sidebar-logout .nav-text,
+  .logout-arrow {
+    display: none;
+  }
+
+  .sidebar a,
+  .sidebar-logout {
+    justify-content: center;
+    padding: 12px;
+  }
+
+  .sidebar a.active {
+    border-left: none;
+    border-right: 3px solid #3b82f6;
+  }
+}
+
+@media (max-width: 700px) {
+  .sidebar a,
+  .sidebar-logout {
+    padding: 10px;
+  }
+}
\ No newline at end of file
diff --git a/css/signup.css b/css/signup.css
new file mode 100644
index 0000000..c584354
--- /dev/null
+++ b/css/signup.css
@@ -0,0 +1,169 @@
+/*
+  File contains the styles for the signup page
+  --> defines the layout of the signup screen
+*/
+
+.login-page {
+  min-height: 100vh;
+  display: flex; 
+  justify-content: center; 
+  align-items: center;
+  padding: 24px; 
+  background:
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 35%),
+    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.10), transparent 30%),
+    var(--bg);
+}
+
+/* Main signup card container */
+.login-card {
+  width: 100%;
+  max-width: 430px;
+  background: var(--card); /*variable.css*/
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+  padding: 40px 32px;
+}
+
+/* Logo area above the form */
+.login-logo-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Full logo styling */
+.login-logo {
+  width: 100%;
+  max-width: 220px;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+.login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  text-align: center;
+  color: var(--text-muted);
+  margin-bottom: 28px;
+}
+
+/* Form layout */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid #dbe2ea;
+  border-radius: 14px;
+  background: #ffffff;
+  font-size: 1rem;
+  color: var(--text);
+}
+
+/* Highlight input when focused */
+.form-group input:focus {
+  outline: none;
+  border-color: #7c3aed;
+  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
+}
+
+/* Password field with button inside the same row */
+.password-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.password-wrapper input {
+  flex: 1;
+}
+
+.toggle-password {
+  border: none;
+  background: transparent;
+  color: #64748b;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.signup-terms {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  margin: 18px 0 0 0;
+}
+.signup-terms a {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+/* Main login action button */
+.login-button {
+  margin-top: 4px;
+  border: none;
+  border-radius: 14px;
+  padding: 14px 18px;
+  background: var(--gradient);
+  color: white;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.22);
+}
+
+.login-button:hover {
+  opacity: 0.95;
+}
+
+.signup-text {
+  margin-top: 24px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.signup-text a {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+/* Smaller spacing and sizing for narrow screens */
+@media (max-width: 480px) {
+  .login-card {
+    padding: 28px 20px;
+    border-radius: 20px;
+  }
+
+  .login-title {
+    font-size: 1.7rem;
+  }
+
+  .login-logo {
+  max-width: 170px;
+  }
+}
\ No newline at end of file
diff --git a/css/topbar.css b/css/topbar.css
new file mode 100644
index 0000000..0da89d7
--- /dev/null
+++ b/css/topbar.css
@@ -0,0 +1,92 @@
+/*
+  Topbar styles for OnlyPrompt
+  - clean, modern, full-width
+  - search bar centered (expands on full screen), profile avatar always on the right
+  - ONLY search bar and avatar have rounded corners
+*/
+
+.topbar-shell {
+  width: 100%;
+  background: #ffffff;
+  border-bottom: 1px solid #eef2f7;
+  padding: 16px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.topbar-search {
+  flex: 1;                       /* Takes all available space */
+  max-width: none;               /* No upper limit, expands freely */
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  padding: 10px 20px;
+  border-radius: 14px;           /* Rounded like login inputs */
+}
+
+.topbar-search i {
+  color: #94a3b8;
+  font-size: 1.3rem;
+}
+
+.topbar-search input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.95rem;
+  color: #334155;
+}
+
+.topbar-search input::placeholder {
+  color: #94a3b8;
+  font-weight: 400;
+}
+
+.topbar-avatar-btn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.topbar-avatar {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border: 1px solid #e2e8f0;
+  border-radius: 50%;             /* Avatar round */
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .topbar-shell {
+    padding: 12px 20px;
+  }
+  .topbar-search {
+    padding: 8px 16px;
+  }
+  .topbar-search i {
+    font-size: 1.1rem;
+  }
+  .topbar-avatar {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 480px) {
+  .topbar-shell {
+    padding: 10px 16px;
+  }
+  .topbar-search {
+    padding: 6px 12px;
+  }
+}
\ No newline at end of file
diff --git a/css/variables.css b/css/variables.css
new file mode 100644
index 0000000..ec138d9
--- /dev/null
+++ b/css/variables.css
@@ -0,0 +1,27 @@
+/* 
+  This file contains global design variables such as colors,
+  gradients, spacing, and shadows
+  --> these variables ensure a consistent design accross the whole application
+*/
+
+:root {
+  /* Main gradient used for buttons and highlights */
+  --gradient: linear-gradient(90deg, #7c3aed, #3b82f6, #ec4899);
+
+  /* Background color of the application */
+  --bg: #f8fafc;
+
+  /* Default text color */
+  --text: #0f172a;
+
+  /* Container background */
+  --card: #ffffff;
+
+  /* Border radius for rounded elements */
+  --radius: 16px;
+
+  /* Standard shadow for cards and components */
+  --shadow: 0 10px 30px rgba(0,0,0,0.08);
+}
+
+  
\ No newline at end of file
diff --git a/html/login.html b/html/login.html
new file mode 100644
index 0000000..953d9cb
--- /dev/null
+++ b/html/login.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!--Info about page but not visible-->
+<head> 
+  <meta charset="UTF-8">
+  <!-- For responsive design: adapts width for different devices -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Title shown in browser tab -->
+  <title>OnlyPrompt - Login</title>
+
+  <!-- CSS files for variables, base styles, and login page -->
+  <link rel="stylesheet" href="../css/variables.css">
+  <link rel="stylesheet" href="../css/base.css">
+  <link rel="stylesheet" href="../css/login.css">
+</head>
+
+<body>
+    <!-- Main container for the login page (CSS layout) -->
+    <main class="login-page">
+    <!-- White login card -->
+    <section class="login-card">
+      <!-- Logo container -->
+      <div class="login-logo-wrapper">
+        <img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="login-logo">
+      </div>
+
+      <h1 class="login-title">Sign In</h1>
+      <p class="login-subtitle">Welcome back! Enter your details below.</p>
+      
+      <!-- Login form, id is used for JavaScript validation -->
+      <form id="loginForm" class="login-form">
+        
+        <div class="form-group">
+          <label for="email">Email Address</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="yourname@email.com"
+            required
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="password">Password</label>
+          <!-- Password field with button to show/hide password -->
+          <div class="password-wrapper">
+            <input
+              type="password"
+              id="password"
+              name="password"
+              placeholder="Enter your password"
+              required
+            >
+            <button type="button" id="togglePassword" class="toggle-password">
+              Show <!-- Click to show/hide password -->
+            </button>
+          </div>
+        </div>
+
+        <button type="submit" class="login-button">Log In</button>
+      </form>
+
+      <p class="signup-text">
+        Don't have an account?
+        <a href="#">Sign Up</a>
+      </p>
+    </section>
+  </main>
+
+  <!-- Script for login logic and form validation -->
+  <script src="../js/login.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/profile.html b/html/profile.html
new file mode 100644
index 0000000..6f9a0a0
--- /dev/null
+++ b/html/profile.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OnlyPrompt - Profile</title>
+  <link rel="stylesheet" href="../css/variables.css">
+  <link rel="stylesheet" href="../css/base.css">
+  <link rel="stylesheet" href="../css/sidebar.css">
+  <link rel="stylesheet" href="../css/login.css">
+  <link rel="stylesheet" href="../css/topbar.css">
+   <link rel="stylesheet" href="../css/profile.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+</head>
+<body>
+  <div class="layout" style="display: flex; min-height: 100vh; background: var(--bg);">
+    
+    <div id="sidebar-container"></div>
+
+    <div style="flex:1; margin:40px auto; max-width:950px;">
+      
+      <div id="topbar-container"></div>
+
+      <main class="login-card profile-main" style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:24px;">
+        
+        <section class="profile-header" style="display:flex;align-items:center;gap:32px;border-bottom:1px solid #e5e7eb;padding-bottom:24px;">
+          
+          <img src="../images/content/cat.png" class="profile-avatar" style="width:110px;height:110px;border-radius:50%;object-fit:cover;">
+          
+          <div class="profile-info" style="flex:1;">
+            <h1 style="font-size:2rem;font-weight:700;margin-bottom:4px;">Sunny the Cat</h1>
+            <div style="color:#64748b;margin-bottom:8px;">
+              @sunny_the_cat <i class="bi bi-patch-check-fill" style="color:#3b82f6;"></i>
+            </div>
+
+            <div style="margin-bottom:8px;">
+              🐾 Cat prompt creator | Nap enthusiast | AI Cat Content Curator<br>
+              Chasing lasers and building purrfect prompts.
+            </div>
+
+            <div style="color:#64748b;">Cat City, Dreamland 🐈</div>
+          </div>
+
+          <div style="display:flex;flex-direction:column;gap:10px;">
+            <button class="login-button">Edit Profile</button>
+            <button class="login-button" style="background:#f3f4f6;color:#111;box-shadow:none;">Share Profile</button>
+          </div>
+
+        </section>
+
+        <nav style="display:flex;gap:24px;border-bottom:2px solid #e5e7eb;margin:32px 0 18px 0;">
+          <a href="#" style="padding:10px 0;color:#3b82f6;font-weight:600;border-bottom:2px solid #3b82f6;">My Prompts (2)</a>
+          <a href="#" style="padding:10px 0;color:#64748b;">Favorites (15)</a>
+          <a href="#" style="padding:10px 0;color:#64748b;">Saved (7)</a>
+        </nav>
+
+        <section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;">
+          
+          <div style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;">
+            <img src="../images/content/post1.png" style="width:60px;height:60px;border-radius:12px;">
+            <div>
+              <div style="font-weight:700;">Galactic Catventure</div>
+              <div style="color:#64748b;margin-bottom:6px;">A cosmic journey of a curious cat exploring the stars.</div>
+              <div style="display:flex;gap:16px;color:#64748b;">
+                <span><i class="bi bi-heart"></i> 128</span>
+                <span><i class="bi bi-chat"></i> 15</span>
+              </div>
+            </div>
+          </div>
+
+          <div style="background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(59,130,246,0.06);padding:18px;display:flex;gap:16px;">
+            <img src="../images/content/post2.png" style="width:60px;height:60px;border-radius:12px;">
+            <div>
+              <div style="font-weight:700;">Minimalist Cat Logo</div>
+              <div style="color:#64748b;margin-bottom:6px;">Sleek logo design for feline fans.</div>
+              <div style="display:flex;gap:16px;color:#64748b;">
+                <span><i class="bi bi-heart"></i> 54</span>
+                <span><i class="bi bi-chat"></i> 6</span>
+              </div>
+            </div>
+          </div>
+
+        </section>
+
+      </main>
+    </div>
+  </div>
+
+  <script>
+    fetch('../html/sidebar.html')
+      .then(r => r.text())
+      .then(data => {
+        document.getElementById('sidebar-container').innerHTML = data;
+        // Remove 'active' from all sidebar links
+        document.querySelectorAll('#sidebar-container .sidebar a').forEach(link => {
+          link.classList.remove('active');
+        });
+        // Then set 'active' only on the My Profile link
+        const profileLink = document.querySelector('#sidebar-container a[href="profile.html"]');
+        if (profileLink) profileLink.classList.add('active');
+      });
+
+    fetch('../html/topbar.html')
+      .then(r => r.text())
+      .then(data => document.getElementById('topbar-container').innerHTML = data);
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/sidebar.html b/html/sidebar.html
new file mode 100644
index 0000000..c39fde3
--- /dev/null
+++ b/html/sidebar.html
@@ -0,0 +1,71 @@
+<!--
+  Reusable sidebar for OnlyPrompt
+  - Load this file dynamically into pages
+  - Add class="active" to the current page link
+-->
+
+<div class="sidebar-shell">
+  <!-- Logo -->
+  <div class="sidebar-logo">
+    <img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="sidebar-logo-full">
+    <img src="../images/logo_icon.png" alt="OnlyPrompt Icon" class="sidebar-logo-icon">
+  </div>
+
+  <!-- Navigation -->
+  <nav class="sidebar">
+    <ul>
+      <li>
+        <a href="dashboard.html" class="active">
+          <i class="bi bi-house icon-blue"></i>
+          <span class="nav-text">Dashboard</span>
+        </a>
+      </li>
+
+      <li>
+        <a href="marketplace.html">
+          <i class="bi bi-shop icon-purple"></i>
+          <span class="nav-text">Marketplace</span>
+        </a>
+      </li>
+
+      <li>
+        <a href="community.html">
+          <i class="bi bi-people icon-pink"></i>
+          <span class="nav-text">Community</span>
+        </a>
+      </li>
+
+      <li>
+        <a href="chats.html">
+          <i class="bi bi-chat-dots icon-blue"></i>
+          <span class="nav-text">Chats</span>
+        </a>
+      </li>
+
+      <li>
+        <a href="settings.html">
+          <i class="bi bi-gear icon-purple"></i>
+          <span class="nav-text">Settings</span>
+        </a>
+      </li>
+
+      <li>
+        <a href="profile.html">
+          <i class="bi bi-person icon-pink"></i>
+          <span class="nav-text">My Profile</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Logout bottom -->
+  <div class="sidebar-bottom">
+    <a href="login.html" class="sidebar-logout">
+      <div class="logout-left">
+        <i class="bi bi-box-arrow-right"></i>
+        <span class="nav-text">Logout</span>
+      </div>
+      <i class="bi bi-chevron-right logout-arrow"></i>
+    </a>
+  </div>
+</div>
\ No newline at end of file
diff --git a/html/signup.html b/html/signup.html
new file mode 100644
index 0000000..7d846be
--- /dev/null
+++ b/html/signup.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!--Info about page but not visible-->
+<head> 
+  <meta charset="UTF-8">
+  <!-- For responsive design: adapts width for different devices -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Title shown in browser tab -->
+  <title>OnlyPrompt - Login</title>
+
+  <!-- CSS files for variables, base styles, and login page -->
+  <link rel="stylesheet" href="../css/variables.css">
+  <link rel="stylesheet" href="../css/base.css">
+  <link rel="stylesheet" href="../css/signup.css">
+</head>
+
+<body>
+    <!-- Main container for the login page (CSS layout) -->
+    <main class="login-page">
+    <!-- White login card -->
+    <section class="login-card">
+      <!-- Logo container -->
+      <div class="login-logo-wrapper">
+        <img src="../images/logo_full.png" alt="OnlyPrompt Logo" class="login-logo">
+      </div>
+
+      <h1 class="login-title">Sign Up</h1>
+      <p class="login-subtitle">Create your account to get started.</p>
+      
+      <!-- Login form, id is used for JavaScript validation -->
+      <form id="loginForm" class="login-form">
+        
+        <div class="form-group">
+          <label for="email">Email Address</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="yourname@email.com"
+            required
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="password">Password</label>
+          <!-- Password field with button to show/hide password -->
+          <div class="password-wrapper">
+            <input
+              type="password"
+              id="password"
+              name="password"
+              placeholder="Enter your password"
+              required
+            >
+            <button type="button" id="togglePassword" class="toggle-password">
+              Show <!-- Click to show/hide password -->
+            </button>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="email">Full Name</label>
+          <input
+            type="text"
+            id="fullName"
+            name="fullName"
+            placeholder="Enter your full name"
+            required
+          >
+        </div>
+
+        <div class="form-group">
+          <label for="email">Username</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="Enter your username"
+            required
+          >
+        </div>
+
+        <p class="signup-terms">
+            By signing up, you agree to our
+            <a href="#">Terms</a>, 
+            <a href="#">Privacy Policy</a> and 
+            <a href="#">Cookies Policy</a>.
+        </p>
+        
+
+        <button type="submit" class="login-button">Sign Up</button>
+      </form>
+
+      <p class="signup-text">
+        Have an account?
+        <a href="#">Log In</a>
+      </p>
+    </section>
+  </main>
+
+  <!-- Script for login logic and form validation -->
+  <script src="../js/login.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/topbar.html b/html/topbar.html
new file mode 100644
index 0000000..ab55c30
--- /dev/null
+++ b/html/topbar.html
@@ -0,0 +1,19 @@
+<!--
+  Reusable topbar for OnlyPrompt
+  - Search in the middle
+  - small action icons
+  - profile avatar on the right
+-->
+
+<header class="topbar-shell">
+  <div class="topbar-search">
+    <i class="bi bi-search"></i>
+    <input type="text" placeholder="Search">
+  </div>
+
+    <!-- Profile avatar on the right (must be changed with backend) -->
+    <button class="topbar-avatar-btn" aria-label="Profile">
+      <img src="../images/content/cat.png" alt="Profile Picture" class="topbar-avatar">
+    </button>
+  </div>
+</header>
\ No newline at end of file
diff --git a/images/buy_prompt.png b/images/buy_prompt.png
new file mode 100644
index 0000000..750dded
Binary files /dev/null and b/images/buy_prompt.png differ
diff --git a/images/chat.png b/images/chat.png
new file mode 100644
index 0000000..ff78bbd
Binary files /dev/null and b/images/chat.png differ
diff --git a/images/content/cat.png b/images/content/cat.png
new file mode 100644
index 0000000..e3fc1c5
Binary files /dev/null and b/images/content/cat.png differ
diff --git a/images/content/post1.png b/images/content/post1.png
new file mode 100644
index 0000000..35661e4
Binary files /dev/null and b/images/content/post1.png differ
diff --git a/images/content/post2.png b/images/content/post2.png
new file mode 100644
index 0000000..0af377b
Binary files /dev/null and b/images/content/post2.png differ
diff --git a/images/create_prompt.png b/images/create_prompt.png
new file mode 100644
index 0000000..b6d44c4
Binary files /dev/null and b/images/create_prompt.png differ
diff --git a/images/creators.png b/images/creators.png
new file mode 100644
index 0000000..967dea6
Binary files /dev/null and b/images/creators.png differ
diff --git a/images/feed.png b/images/feed.png
new file mode 100644
index 0000000..7487d9a
Binary files /dev/null and b/images/feed.png differ
diff --git a/images/logo_full.png b/images/logo_full.png
new file mode 100644
index 0000000..cd0ecd6
Binary files /dev/null and b/images/logo_full.png differ
diff --git a/images/logo_icon.png b/images/logo_icon.png
new file mode 100644
index 0000000..4245702
Binary files /dev/null and b/images/logo_icon.png differ
diff --git a/images/logo_text.png b/images/logo_text.png
new file mode 100644
index 0000000..184462e
Binary files /dev/null and b/images/logo_text.png differ
diff --git a/images/profil_cat.png b/images/profil_cat.png
new file mode 100644
index 0000000..0ab3d84
Binary files /dev/null and b/images/profil_cat.png differ
diff --git a/images/profile.png b/images/profile.png
new file mode 100644
index 0000000..b786126
Binary files /dev/null and b/images/profile.png differ