diff --git a/src/main/resources/static/general.css b/src/main/resources/static/general.css
index 20e97c598..a7c3d38f0 100644
--- a/src/main/resources/static/general.css
+++ b/src/main/resources/static/general.css
@@ -1,5 +1,14 @@
-#footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
+#page-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
+
+#content-wrap {
+  flex: 1;
+}
+
+#footer {
+bottom: 0;
+width: 100%;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/add-image.html b/src/main/resources/templates/add-image.html
index 41c61da7d..111775dd7 100644
--- a/src/main/resources/templates/add-image.html
+++ b/src/main/resources/templates/add-image.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add-Image</title>
-</head>
+
+<th:block th:insert="~{fragments/common :: head(title='Add-Image')}"></th:block>
+
 
 <body>
+	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -45,7 +46,9 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/compress-pdf.html b/src/main/resources/templates/compress-pdf.html
index deff6254d..7631ba4e6 100644
--- a/src/main/resources/templates/compress-pdf.html
+++ b/src/main/resources/templates/compress-pdf.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add-Image</title>
-</head>
 
-<body>
+<th:block th:insert="~{fragments/common :: head(title='Compress')}"></th:block>
+
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -38,7 +38,9 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index c76cebb2b..48d8427ba 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF ConvertToPDF</title>
-</head>
 
-<body>
+<th:block th:insert="~{fragments/common :: head(title='Image to PDF')}"></th:block>
+
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -31,6 +31,8 @@
 		</div>
 	</div>
 
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index b1fc0e10c..c37e0c812 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF ConvertToPDF</title>
-</head>
 
-<body>
+<th:block th:insert="~{fragments/common :: head(title='PDF to Image')}"></th:block>
+
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 
 	<br>
@@ -36,6 +36,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/delete-pages.html b/src/main/resources/templates/delete-pages.html
index a8722fc60..fb192b3c0 100644
--- a/src/main/resources/templates/delete-pages.html
+++ b/src/main/resources/templates/delete-pages.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Page Remover</title>
-</head>
 
-<body>
+<th:block th:insert="~{fragments/common :: head(title='Page Remover')}"></th:block>
+
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -35,6 +35,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/base-layout.html b/src/main/resources/templates/fragments/base-layout.html
new file mode 100644
index 000000000..f5b1517b2
--- /dev/null
+++ b/src/main/resources/templates/fragments/base-layout.html
@@ -0,0 +1,15 @@
+
+ <div id="page-container" th:fragment="page-container">
+   <div id="content-wrap">
+	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
+	
+	
+	
+	<div th:replace="content :: content"></div>
+
+</div>
+
+
+
+<div th:insert="~{fragments/footer.html :: footer}"></div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html
new file mode 100644
index 000000000..c87bb3845
--- /dev/null
+++ b/src/main/resources/templates/fragments/card.html
@@ -0,0 +1,9 @@
+<div th:fragment="card"  class="col-4 h-100">
+	<div class="dark-card card">
+		<div class="card-body">
+			<h5 class="card-title" th:text="${cardTitle}"></h5>
+			<p class="card-text" th:text="${cardText}"></p>
+			<a class="btn btn-primary" th:href="${cardLink}">Go</a>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 576f9f8c6..ed4c1505a 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -35,6 +35,7 @@
 
 	});
 </script>
+<title th:text="'S-PDF ' + ${title}"></title>
 <link rel="stylesheet" href="general.css">
 </head>
 
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 58115d6ce..62fb1958b 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,106 +1,61 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF</title>
-</head>
+
+<th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
+
 
 <body>
-	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
-	<!-- Jumbotron -->
-	<div class="jumbotron jumbotron-fluid" id="jumbotron">
-		<div class="container">
-			<h1 class="display-4">Stirling PDF</h1>
-			<p class="lead">Your locally hosted one-stop-shop for all your
-				PDF needs. (Made 100% in ChatGPT in 1 day as a experiment)</p>
+
+	<div id="page-container">
+		<div id="content-wrap">
+			<div th:insert="~{fragments/navbar.html :: navbar}"></div>
+			<!-- Jumbotron -->
+			<div class="jumbotron jumbotron-fluid" id="jumbotron">
+				<div class="container">
+					<h1 class="display-4">Stirling PDF</h1>
+					<p class="lead">Your locally hosted one-stop-shop for all your
+						PDF needs. (Made 100% in ChatGPT in 1 day as a experiment)</p>
+				</div>
+			</div>
+
+			<!-- Features -->
+			<div class="container">
+				<div class="row h-100">
+					<div th:replace="~{fragments/card :: card(cardTitle='Merge PDFs', cardText='Easily merge multiple PDFs into one.', cardLink='merge-pdfs')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='Split PDFs', cardText='Split PDFs into multiple documents', cardLink='split-pdfs')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='Rotate PDFs', cardText='Easily rotate your PDFs.', cardLink='rotate-pdf')}"></div>
+				</div>
+
+				<br>
+
+				<div class="row h-100">
+					<div th:replace="~{fragments/card :: card(cardTitle='Image to PDF', cardText='Convert a images (PNG, JPEG, GIF) to PDF.', cardLink='img-to-pdf')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='PDF to Image', cardText='Convert a PDF to a image. (PNG, JPEG, GIF)', cardLink='pdf-to-img')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='PDF Organizer', cardText='Remove/Rearrange pages in any order', cardLink='pdf-organizer')}"></div>
+				</div>
+				<br>
+				<div class="row h-100">
+					<div th:replace="~{fragments/card :: card(cardTitle='Add image onto PDF', cardText='Adds a image onto a set location on the PDF (Work in progress)', cardLink='add-image')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='Add Watermark', cardText='Add a custom watermark to your PDF document.', cardLink='add-watermark')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='Change Permissions', cardText='Change the permissions of your PDF document, such as print, copy, edit, etc.', cardLink='change-permissions')}"></div>
+				</div>
+				<br>
+				<div class="row h-100">
+					<div th:replace="~{fragments/card :: card(cardTitle='Remove Pages', cardText='Delete unwanted pages from your PDF document.', cardLink='remove-pages')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='Add Password', cardText='Encrypt your PDF document with a password.', cardLink='add-password')}"></div>
+					<div th:replace="~{fragments/card :: card(cardTitle='Remove Password', cardText='Remove password protection from your PDF document.', cardLink='remove-password')}"></div>
+				</div>
+				<br>
+				<div class="row h-100">
+					<div th:replace="~{fragments/card :: card(cardTitle='Compress PDFs', cardText='Compress PDFs to reduce their file size.', cardLink='compress-pdf')}"></div>
+				</div>
+				<br>
+
+			</div>
 		</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
 	</div>
-
-	<!-- Features -->
-	<div class="container">
-		<div class="row h-100">
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">Merge PDFs</h5>
-						<p class="card-text">Easily merge multiple PDFs into one.</p>
-						<a href="#" class="btn btn-primary" th:href="@{merge-pdfs}">Go</a>
-					</div>
-				</div>
-			</div>
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">Split PDFs</h5>
-						<p class="card-text">Split PDFs into multiple documents</p>
-						<a href="#" class="btn btn-primary" th:href="@{split-pdfs}">Go</a>
-					</div>
-				</div>
-			</div>
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">Add image to PDF</h5>
-						<p class="card-text">Adds image/watermark to a PDF</p>
-						<a href="#" class="btn btn-primary" th:href="@{add-image}">Go</a>
-					</div>
-				</div>
-			</div>
-		</div>
-		<br>
-		<div class="row h-100">
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">Convert to/from PDF</h5>
-						<p class="card-text">Convert images to/from PDF.</p>
-						<a href="#" class="btn btn-primary" th:href="@{convert-pdf}">Go</a>
-					</div>
-				</div>
-			</div>
-
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">PDF Organizer</h5>
-						<p class="card-text">Remove/Rearrange pages in any order</p>
-						<a href="#" class="btn btn-primary" th:href="@{pdf-organizer}">Go</a>
-					</div>
-				</div>
-			</div>
-
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">Rotate PDFs</h5>
-						<p class="card-text">Easily rotate your PDFs.</p>
-						<a href="#" class="btn btn-primary" th:href="@{rotate-pdf}">Go</a>
-					</div>
-				</div>
-			</div>
-
-		</div>
-		<br>
-		<div class="row h-100">
-
-
-
-
-
-			<div class="col-4 h-100">
-				<div class="dark-card card">
-					<div class="card-body">
-						<h5 class="card-title">Compress PDFs</h5>
-						<p class="card-text">Compress PDFs to reduce their file size.</p>
-						<a href="#" class="btn btn-primary" th:href="@{compress-pdf}">Go</a>
-					</div>
-				</div>
-			</div>
-
-		</div>
-	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 5e377dda5..9337393a5 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -1,13 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF MergePDFs</title>
+
+<th:block th:insert="~{fragments/common :: head(title='Merge PDFs')}"></th:block>
 
 
-</head>
-
-<body>
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -128,6 +126,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html
index 0b869ca9e..10d7e1a85 100644
--- a/src/main/resources/templates/pdf-organizer.html
+++ b/src/main/resources/templates/pdf-organizer.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Organizer</title>
-</head>
 
-<body>
+<th:block th:insert="~{fragments/common :: head(title='Organizer')}"></th:block>
+
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -37,6 +37,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/rotate-pdf.html b/src/main/resources/templates/rotate-pdf.html
index 7c97db630..cd17e8aaf 100644
--- a/src/main/resources/templates/rotate-pdf.html
+++ b/src/main/resources/templates/rotate-pdf.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add-Image</title>
-</head>
 
-<body>
+<th:block th:insert="~{fragments/common :: head(title='Rotate')}"></th:block>
+
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -41,7 +41,9 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/security/add-password.html b/src/main/resources/templates/security/add-password.html
index 1f50d58cf..ee1064689 100644
--- a/src/main/resources/templates/security/add-password.html
+++ b/src/main/resources/templates/security/add-password.html
@@ -1,12 +1,10 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add-Image</title>
-</head>
+<th:block th:insert="~{fragments/common :: head(title='Add Password')}"></th:block>
 
-<body>
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -98,6 +96,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
diff --git a/src/main/resources/templates/security/add-watermark.html b/src/main/resources/templates/security/add-watermark.html
index cf32b3cfe..c67d8ee13 100644
--- a/src/main/resources/templates/security/add-watermark.html
+++ b/src/main/resources/templates/security/add-watermark.html
@@ -1,12 +1,10 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add Watermark</title>
-</head>
+<th:block th:insert="~{fragments/common :: head(title='Add Watermark')}"></th:block>
 
-<body>
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -51,6 +49,8 @@
 </div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
diff --git a/src/main/resources/templates/security/change-permissions.html b/src/main/resources/templates/security/change-permissions.html
index 384539508..bd6991851 100644
--- a/src/main/resources/templates/security/change-permissions.html
+++ b/src/main/resources/templates/security/change-permissions.html
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add-Image</title>
-</head>
+<th:block th:insert="~{fragments/common :: head(title='Change Permissions')}"></th:block>
 
-<body>
+
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
 	<div class="container">
 		<div class="row justify-content-center">
 			<div class="col-md-6">
-				<h2>Change permissions (Warning to have these permissions be
+				<h2>Change permissions</h2>
+				<p>Warning to have these permissions be
 					unchangeable it is recommended to set them with a password via the
-					add-password page)</h2>
-
+					add-password page</p>
 				<form action="add-password" method="post"
 					enctype="multipart/form-data">
 					<div class="form-group">
@@ -87,6 +86,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
diff --git a/src/main/resources/templates/security/remove-password.html b/src/main/resources/templates/security/remove-password.html
index 8c3740e3c..af3d61607 100644
--- a/src/main/resources/templates/security/remove-password.html
+++ b/src/main/resources/templates/security/remove-password.html
@@ -1,12 +1,10 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Add-Image</title>
-</head>
+<th:block th:insert="~{fragments/common :: head(title='Remove password')}"></th:block>
 
-<body>
+<body>	<div id="page-container">
+		<div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -33,6 +31,8 @@
 			</div>
 		</div>
 	</div>
-	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
+		<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
diff --git a/src/main/resources/templates/split-pdfs.html b/src/main/resources/templates/split-pdfs.html
index f6378aabf..7239d9857 100644
--- a/src/main/resources/templates/split-pdfs.html
+++ b/src/main/resources/templates/split-pdfs.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-<th:block th:insert="~{fragments/common :: head}"></th:block>
-<title>S-PDF Split PDFs</title>
-</head>
+
+<th:block th:insert="~{fragments/common :: head(title='Split')}"></th:block>
+
 
 <body>
+
+ <div id="page-container">
+   <div id="content-wrap">
 	<div th:insert="~{fragments/navbar.html :: navbar}"></div>
 	<br>
 	<br>
@@ -44,6 +46,8 @@
 			</div>
 		</div>
 	</div>
+	</div>
 	<div th:insert="~{fragments/footer.html :: footer}"></div>
+	</div>
 </body>
 </html>
\ No newline at end of file
