diff --git a/src/pages/guestBook/index.astro b/src/pages/guestBook/index.astro
index 0c15019..a8f734e 100644
--- a/src/pages/guestBook/index.astro
+++ b/src/pages/guestBook/index.astro
@@ -65,29 +65,33 @@ guest_logs.forEach(log => {
 		<Header />
 		<main>
 			<section>
-			<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
-			<form method="POST" style="display: grid">
-				<label for="name">Name</label>
-				<input id="name" name="name" />
+				<form method="POST" style="display: grid">
+					<h1>sign the guest book</h1>
+					<label for="name">Name:</label>
+					<input id="name" name="name" />
 
-				<label for="website_link">Website link(optional)</label>
-				<input id="website_link" name="website_link" />
+					<label for="website_link">Website link(optional):</label>
+					<input id="website_link" class="website_link" name="website_link" placeholder="etc. https://sirlilpanda.studio", pattern="((http|https):\/\/)(www.)?"/>
 
-				<label for="message">message</label>
-				<textarea id="message" name="message"></textarea>
+					<label for="message">message:</label>
+					<textarea id="message" name="message"></textarea>
 
-				<button type="submit">Submit</button>
-			</form>
+					<button type="submit">🖊️sign the book🖊️</button>
+				</form>
 
-			<h1>guest book</h1>
-			<ul>
+			
+			<ul class="lastest-guestbook-logs">
+			<h3>consider adding to the guest book</h3>
+			<h5>heres what others had to say already:</h5>
+			<hr/>
 			{
 				guest_logs.map((log) => (
 					<li>
-						<p>[{log.date.toDateString()}] {log.name} 
-							{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
-							: {log.message}</p>
+						<p class="title">[{log.date.toDateString()}] {log.name} 
+							{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
+						<p class="message">-> "{log.message}"</p>
 					</li>
+					<hr/>
 				))
 			}
 			</ul>
@@ -97,3 +101,76 @@ guest_logs.forEach(log => {
 		<Footer />
 	</body>
 </html>
+
+
+<style>
+
+	label {
+		color: var(--text-color);
+		font-style: italic;
+	}
+
+	website_link:invalid {
+		border-color: red;
+	}
+
+	input {
+		background: var(--background-colour);
+		color: var(--text-color);
+	}
+
+	textarea {
+		background: var(--background-colour);
+		color: var(--text-color);
+		resize: vertical;
+	}
+
+	button {
+		margin-top: 1em;
+		width: fit-content;
+		padding: 1em;
+		font-size: 1em;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	form {
+		background: var(--guest-book-background);
+		border-color: blanchedalmond;
+		border-style: solid;
+		box-shadow: var(--box-shadow);
+		border-radius: 2em;
+		padding: 2em;
+	}
+
+
+
+	.lastest-guestbook-logs {
+		padding-top: 2em;
+		border-radius: 2em;
+		padding-left: 1em;
+		padding-right: 1em;
+		padding-bottom: 1em;
+		background: var(--guest-book-background);
+		border-style: solid;
+		border-color: blanchedalmond;
+		box-shadow: var(--box-shadow);
+		margin-bottom: 5em;
+	}
+
+	ul > li {
+		padding-left: 1em;
+		padding-right: 1em;
+		transition: 250ms;
+		list-style-type: none;
+	}
+
+	hr {
+		color: blue;
+  		border-top: 2px solid blue;
+	}
+
+	li > p {
+		margin: unset;
+	}
+</style>
\ No newline at end of file