diff --git a/.env.example b/.env.example
index df712a3..21128ef 100644
--- a/.env.example
+++ b/.env.example
@@ -2,6 +2,7 @@
 WEB_APP_PORT=5000
 
 # Application configuration
+PROJECT_VERSION=3.1.2
 MAX_CONTENT_LENGTH=3145728
 MAX_PENDING_TIME=600
 MAX_STORE_TIME=259200
diff --git a/README.md b/README.md
index 8d3eaf0..2464716 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,7 @@ Thanks to contributors:
 - [Zeecka](https://www.zeecka.fr/) - **(author)**
 - [aradhyacp](https://github.com/aradhyacp)
 - [Philip Zimmermann](https://github.com/Philip-Zimmermann)
+- [abneeeees](https://github.com/abneeeees)
 
 Thanks to the open-source community:
 [binwalk](https://github.com/ReFirmLabs/binwalk), [exiftool](https://exiftool.org/), [GraphicsMagick identify](http://www.graphicsmagick.org/identify.html), [foremost](https://foremost.sourceforge.net/), [openstego](https://www.openstego.com/), [outguess](https://www.rbcafe.com/software/outguess/), [pngcheck](https://www.libpng.org/pub/png/apps/pngcheck.html), [steghide](https://steghide.sourceforge.net/), [strings](https://pubs.opengroup.org/onlinepubs/9799919799/utilities/strings.html), [zsteg](https://github.com/zed-0xff/zsteg), ...
diff --git a/aperisolve/app.py b/aperisolve/app.py
index 92852ef..97a99bc 100644
--- a/aperisolve/app.py
+++ b/aperisolve/app.py
@@ -36,11 +36,17 @@ def create_app() -> Flask:
     app = Flask(__name__)
     app.json.sort_keys = False  # type: ignore
     app.config["SQLALCHEMY_DATABASE_URI"] = os.environ.get("DB_URI")
+    app.config["PROJECT_VERSION"] = os.getenv("PROJECT_VERSION")
     app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
     app.config["MAX_CONTENT_LENGTH"] = int(os.environ.get("MAX_CONTENT_LENGTH", 1024 * 1024))
     app.config["REDIS_QUEUE"] = Queue(connection=Redis(host="redis", port=6379))
     db.init_app(app)
 
+    @app.context_processor
+    def inject_datetime() -> dict[str, Any]:
+        """Inject datetime into all templates."""
+        return {"datetime": datetime}
+
     @app.errorhandler(413)
     def too_large(_: Any) -> tuple[Response, int]:
         """Error Handler for Max File Size."""
diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css
index ccee6e4..8b02ba5 100644
--- a/aperisolve/static/css/aperisolve.css
+++ b/aperisolve/static/css/aperisolve.css
@@ -1,18 +1,35 @@
 /* ======== Base Layout ======== */
-::selection {
-    background: #c9fbff;
-    color: black;
-}
-
 :root {
+    /* Colors */
     --theme-dark-blue: #0b121f;
     --theme-dark-blue-hover: #0d1931;
     --theme-green: #9fef00;
     --theme-green-shadow: #9fef0055;
     --theme-green-shadow2: #9fef00aa;
+
+    /* Typography */
+    --font-base: 'Fira Code', monospace;
+    --font-size-base: 1rem;
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+
+    /* Borders */
+    --border-radius: 0.5rem;
+    --border-width: 0.0625rem;
+}
+
+::selection {
+    background: #c9fbff;
+    color: black;
 }
 
 html {
+    font-size: 16px;
     --dark-bg: var(--theme-dark-blue);
     --dark-bg-hover: var(--theme-dark-blue-hover);
     --bs-progress-bar-bg: #f00 !important;
@@ -25,39 +42,59 @@ html {
 body {
     background-color: var(--dark-bg);
     color: #e0e0e0;
-    font-family: 'Fira Code', monospace;
+    font-family: var(--font-base);
+    font-size: var(--font-size-base);
     overflow-x: hidden;
 }
 
-/* ======== Typography ======== */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-.highlight {
+/* ======== Typography & Header ======== */
+h1, h2, h3, h4, h5, h6,
+strong, .highlight {
     color: var(--theme-green);
-    text-shadow: 0 0 5px var(--theme-green);
+    text-shadow: 0 0 0.3125rem var(--theme-green);
 }
 
-a,
-.text-accent {
+a, .text-accent {
     color: var(--theme-green);
     text-decoration: none;
+    transition: text-shadow 0.3s ease;
 }
 
 a:hover {
-    color: #ccff66;
-    text-shadow: 0 0 5px #ccff66;
+    color: var(--theme-green);
+    text-shadow: 0 0 0.3125rem var(--theme-green);
 }
 
-.title_link {
-    text-decoration: none;
+/* Site Header */
+.site-header {
+    margin-bottom: var(--spacing-lg);
+}
+
+.title-link {
     color: inherit;
 }
 
+.logo-img {
+    width: 5rem;
+    height: 5rem;
+    object-fit: contain;
+}
+
+.title-text {
+    color: var(--theme-green);
+    text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.title-version {
+    color: var(--theme-green);
+    text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
+    font-size: 1.25rem;
+    line-height: 1;
+}
+
 /* ======== Background ======== */
 
 #three-bg {
@@ -80,103 +117,93 @@ form {
 
 /* ======== Components ======== */
 
-.card,
-.form-control,
-.table,
-.border,
-.card-hack {
+.card, .form-control, .table, .border, .card-hack {
     background-color: var(--dark-bg);
-    border: 1px solid var(--theme-green) !important;
+    border: var(--border-width) solid var(--theme-green) !important;
     color: #e0e0e0;
-    box-shadow: 0 0 10px var(--theme-green-shadow);
-    border-radius: 0.5rem;
+    box-shadow: 0 0 0.625rem var(--theme-green-shadow);
+    border-radius: var(--border-radius);
 }
 
-.material-icons {
-    vertical-align: middle;
-}
-
-#main-img-right span {
-    font-weight: bold;
+/* Drop Zone */
+.drop-zone {
+    background-color: var(--dark-bg);
     color: var(--theme-green);
+    transition: all 0.3s ease;
+    cursor: pointer;
 }
 
-#water-logo {
-    width: 70px;
-    display: inline;
+.drop-zone:hover,
+.drop-zone.dragover {
+    background-color: var(--dark-bg-hover);
+    box-shadow: 0 0 0.625rem var(--theme-green);
 }
 
 /* Buttons */
-
-.btn,
-.btn-primary,
-.btn-hack {
+.btn, .btn-primary, .btn-hack {
     background-color: var(--theme-green);
     color: #000;
     font-weight: bold;
     border: none;
     text-shadow: none;
+    transition: box-shadow 0.3s ease;
 }
 
-.btn:hover,
-.btn-primary:hover,
-.btn-hack:hover {
+.btn:hover, .btn-primary:hover, .btn-hack:hover {
     background-color: var(--theme-green);
-    box-shadow: 0 0 10px var(--theme-green-shadow2);
+    box-shadow: 0 0 0.625rem var(--theme-green-shadow2);
 }
 
-/* Bootstrap contextual colors override */
-.text-success,
-.bg-success {
+/* Bootstrap color overrides */
+.text-success, .bg-success {
     color: var(--theme-green) !important;
     background-color: #1e2b00 !important;
 }
 
-.text-danger,
-.bg-danger {
+.text-danger, .bg-danger {
     color: #ff4d4d !important;
     background-color: #330000 !important;
 }
 
-.text-warning,
-.bg-warning {
+.text-warning, .bg-warning {
     color: #ffcc00 !important;
     background-color: #332b00 !important;
 }
 
-.text-info,
-.bg-info {
+.text-info, .bg-info {
     color: #00e6e6 !important;
     background-color: #002e2e !important;
 }
 
+/* ======== Analyzer Blocks ======== */
+
 .analyzer {
-    margin-top: 25px;
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
 }
 
-.analyzer h2+div {
-    margin-top: 15px;
+.analyzer h2 + div {
+    margin-top: var(--spacing-md);
 }
 
 .analyzer h3 {
-    margin-top: 25px;
+    margin-top: var(--spacing-lg);
 }
 
-/* Removal card */
 .removal-card {
-    padding: 20px;
-    margin-bottom: 20px;
-    border: 2px solid var(--theme-green);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+    border: 0.125rem solid var(--theme-green);
     background-color: rgba(159, 239, 0, 0.05);
 }
 
 .removal-card h3 {
     margin-top: 0;
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-md);
 }
 
 .removal-card p {
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-md);
     color: #e0e0e0;
 }
 
@@ -187,20 +214,20 @@ form {
 }
 
 .removal-card #removal-status {
-    margin-top: 10px;
+    margin-top: var(--spacing-md);
     font-size: 0.95rem;
 }
 
-/* Password removal styling */
 .password-item {
     display: inline-block;
-    margin-right: 8px;
+    margin-right: var(--spacing-sm);
     position: relative;
 }
 
 .password-delete-icon {
     transition: color 0.2s, transform 0.2s;
     vertical-align: middle;
+    cursor: pointer;
 }
 
 .password-delete-icon:hover {
@@ -208,48 +235,72 @@ form {
     transform: scale(1.2);
 }
 
+#result-infos {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-md);
+}
+
+#result-infos > div {
+    flex: 1 1 18.75rem;
+    min-width: 17.5rem;
+    padding: var(--spacing-md);
+}
+
+#main-img-right span {
+    font-weight: bold;
+    color: var(--theme-green);
+}
+
+.a-exiftool .table-container {
+    max-height: 25rem;
+    overflow-y: auto;
+}
+
 /* ======== Forms & Inputs ======== */
-input,
-textarea,
-select,
-pre {
-    border: 1px solid var(--theme-green);
+
+input, textarea, select, pre {
+    border: var(--border-width) solid var(--theme-green);
     color: #ffffff;
 }
 
-input:focus,
-textarea:focus,
-select:focus,
-pre {
+input:focus, textarea:focus, select:focus {
     outline: none;
-    box-shadow: 0 0 10px var(--theme-green);
+    box-shadow: 0 0 0.625rem var(--theme-green);
     background-color: var(--dark-bg-hover) !important;
 }
 
-
-textarea.form-control,
 pre {
-    padding: 25px;
+    padding: var(--spacing-lg);
+    max-height: 20rem;
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: var(--border-radius);
+    background-color: var(--dark-bg);
+    border: var(--border-width) solid var(--theme-green);
+    color: #e0e0e0;
 }
 
-.textarea-container {
+.code-container {
+    position: relative;
     display: block;
 }
 
 .copy-icon {
     position: absolute;
-    right: 10px;
-    margin-top: -40px;
+    right: var(--spacing-md);
+    top: var(--spacing-md);
     cursor: pointer;
     display: none;
     color: #555;
     background: rgba(255, 255, 255, 0.8);
-    border-radius: 4px;
-    padding: 4px;
+    border-radius: var(--spacing-xs);
+    padding: var(--spacing-xs);
     transition: color 0.2s;
+    z-index: 10;
 }
 
-.textarea-container:hover .copy-icon {
+.code-container:hover .copy-icon {
     display: block;
 }
 
@@ -257,26 +308,13 @@ pre {
     color: #000;
 }
 
-/* File drop zone */
-#drop-zone {
-    background-color: var(--dark-bg);
-    border: 2px dashed var(--theme-green);
-    color: var(--theme-green);
-    transition: all 0.3s ease;
-}
-
-#drop-zone:hover,
-#drop-zone.dragover {
-    background-color: var(--dark-bg-hover);
-    box-shadow: 0 0 10px var(--theme-green);
-}
-
 #upload-form {
     transition: height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
     overflow: hidden;
 }
 
 /* ======== Tables ======== */
+
 table {
     width: 100%;
     background-color: var(--theme-dark-blue);
@@ -284,14 +322,12 @@ table {
     color: white;
 }
 
-th,
-td {
-    border: 1px solid var(--theme-dark-blue);
+th, td {
+    border: var(--border-width) solid var(--theme-dark-blue);
     padding: 0.75rem;
 }
 
-th,
-td:first-child {
+th, td:first-child {
     color: var(--theme-green);
 }
 
@@ -300,15 +336,16 @@ tr:nth-child(even) {
 }
 
 tr:first-child td {
-    border-top: 1px solid #ddd;
+    border-top: var(--border-width) solid #ddd;
 }
 
 td {
     text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: var(--border-width) solid #ddd;
 }
 
 /* ======== Images ======== */
+
 #result img {
     width: 100%;
     height: auto;
@@ -318,9 +355,9 @@ td {
 .results_img {
     width: 25%;
     display: inline-block;
-    padding: 10px;
+    padding: var(--spacing-md);
     box-sizing: border-box;
-    min-width: 150px;
+    min-width: 9.375rem;
 }
 
 .a-pcrt .results_img {
@@ -328,17 +365,37 @@ td {
     margin: auto;
     text-align: center;
 }
-#result .a-pcrt .results_img img{
+
+#result .a-pcrt .results_img img {
     width: 75%;
 }
 
+.browse-images {
+    display: inline-block;
+    padding: var(--spacing-md);
+    width: 25%;
+    min-width: 9.375rem;
+}
+
+.browse-image-link {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: block;
+    border: var(--border-width) solid transparent;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+}
+
+.browse-image-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0 0 0.625rem var(--theme-green-shadow);
+    border-color: var(--theme-green);
+}
+
 /* ======== Modal ======== */
+
 #image-modal-container {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background: rgba(0, 0, 0, 0.9);
     display: flex;
     justify-content: center;
@@ -351,11 +408,11 @@ td {
 
 #image-modal-container img {
     width: 90%;
-    max-width: 800px;
+    max-width: 50rem;
     max-height: 90vh;
     object-fit: contain;
-    border: 2px solid var(--theme-green);
-    box-shadow: 0 0 20px var(--theme-green);
+    border: 0.125rem solid var(--theme-green);
+    box-shadow: 0 0 1.25rem var(--theme-green);
     cursor: pointer;
 }
 
@@ -364,35 +421,36 @@ td {
     visibility: visible;
 }
 
-.browse-images {
-    display: inline-block;
-    padding: 10px;
-    width: 25%;
-    min-width: 150px;
-}
-
 /* ======== FAQ ======== */
 
-#cheatsheet>div {
+#cheatsheet > div {
     background-color: rgba(0, 0, 0, 0.5);
-    padding: 10px;
-    margin-top: 10px;
-    margin-bottom: 50px;
+    padding: var(--spacing-md);
+    margin-top: var(--spacing-md);
+    margin-bottom: 3.125rem;
 }
 
 .command {
     background-color: var(--theme-dark-blue);
-    border: 3px solid var(--theme-green);
-    padding: 5px 10px;
-    margin-bottom: 25px;
+    border: 0.1875rem solid var(--theme-green);
+    padding: var(--spacing-sm) var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    word-wrap: break-word;
 }
 
 #cheatsheet ul {
     list-style: none;
-    padding-left: 5px;
+    padding-left: var(--spacing-sm);
     margin-left: 0;
 }
 
+#cheatsheet li {
+    position: relative;
+    padding-left: var(--spacing-lg);
+}
+
 #cheatsheet li::before {
     content: "\f054";
     font-family: "Font Awesome 7 Free";
@@ -403,13 +461,9 @@ td {
     color: var(--theme-green);
 }
 
-#cheatsheet li {
-    padding-left: 25px;
-}
-
 #cheatsheet img,
 #cheatsheet table {
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-md);
     max-width: 100%;
     height: auto;
 }
@@ -419,86 +473,49 @@ td {
     width: auto;
 }
 
-.command {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    word-wrap: break-word;
-}
-
-/* ======== Analyzer Blocks ======== */
-
-.analyzer {
-    margin-bottom: 10px;
-}
-
-#result-infos {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-}
-
-#result-infos>div {
-    height: auto;
-    flex: 1 1 300px;
-    min-width: 280px;
-    padding: 10px;
-    box-sizing: border-box;
-    vertical-align: top;
-}
-
-
-.a-exiftool .table-container {
-    max-height: 400px;
-    overflow-y: auto;
-}
-
-.a-strings textarea {
-    height: 400px;
-}
-
-.a-foremost textarea {
-    height: 100px;
-}
-
 /* ======== Footer ======== */
 
 footer {
     position: relative;
     z-index: 1;
-    margin: 0 20px 20px 0;
-    justify-content: flex-end !important;
+    background-color: rgba(11, 18, 31, 0.8);
+    border-top: var(--border-width) solid var(--theme-green);
+    box-shadow: 0 -0.125rem 0.625rem var(--theme-green-shadow);
 }
 
-@media screen and (min-width: 1800px) {
-    footer {
-        position: fixed;
-        bottom: 0;
-        right: 0;
-        left: auto;
-        margin: 0 20px 20px 0;
-    }
+.footer-text {
+    color: var(--theme-green);
+    font-size: 0.9rem;
 }
 
-footer a i {
-    font-size: 32px;
+.footer-link {
+    color: #e0e0e0;
+    text-decoration: none;
+    transition: color 0.3s, text-shadow 0.3s;
+    display: inline-flex;
+    align-items: center;
 }
 
-#coffee {
-    height: 32px;
-    display: inline-block;
-    vertical-align: middle;
+.footer-link:hover {
+    color: var(--theme-green);
+    text-shadow: 0 0 0.3125rem var(--theme-green-shadow);
+}
+
+.footer-icon-img {
+    height: 1.75rem;
     width: auto;
+    display: block;
 }
 
 /* ======== Utility ======== */
 
 .glow-border {
-    border: 1px solid var(--theme-green);
-    box-shadow: 0 0 10px var(--theme-green-shadow);
+    border: var(--border-width) solid var(--theme-green);
+    box-shadow: 0 0 0.625rem var(--theme-green-shadow);
 }
 
 #httperror {
-    padding-top: 100px;
+    padding-top: 6.25rem;
 }
 
 #httperror h1,
@@ -555,78 +572,61 @@ footer a i {
 
 
 /* Large phones and small tablets */
-@media screen and (max-width: 768px) {
-    body {
+@media screen and (max-width: 48rem) {
+    html {
         font-size: 14px;
     }
 
     .container {
-        margin-top: 20px !important;
-        padding-left: 10px;
-        padding-right: 10px;
+        margin-top: var(--spacing-lg) !important;
+        padding-left: var(--spacing-md);
+        padding-right: var(--spacing-md);
     }
 
-    h1 {
-        font-size: 1.5rem;
+    .logo-img {
+        width: 3.125rem;
+        height: 3.125rem;
     }
 
-    h2 {
-        font-size: 1.25rem;
+    .title-text {
+        font-size: 1.75rem;
     }
 
-    h3 {
-        font-size: 1.1rem;
-    }
-
-    #water-logo {
-        width: 50px;
-    }
-
-    .card,
-    .form-control,
-    .table,
-    .border,
-    .card-hack {
-        border-radius: 0.35rem;
+    .title-version {
+        font-size: 1rem;
     }
 
     .card {
-        padding: 15px !important;
+        padding: var(--spacing-md) !important;
+        border-radius: 0.35rem;
     }
 
-    #drop-zone {
-        padding: 20px !important;
-    }
-
-    #drop-zone p {
-        font-size: 0.9rem;
-    }
-
-    .results_img {
-        width: 50%;
-        padding: 5px;
+    .drop-zone {
+        padding: var(--spacing-lg) !important;
     }
 
+    .results_img,
     .browse-images {
         width: 50%;
-        padding: 5px;
+        padding: var(--spacing-sm);
     }
 
     textarea.form-control,
     pre {
-        padding: 15px;
+        padding: var(--spacing-md);
         font-size: 0.85rem;
+        min-height: 9.375rem;
+        max-height: 50vh;
     }
 
     .a-strings textarea {
-        height: 250px;
+        height: 15.625rem;
     }
 
     .a-exiftool .table-container {
-        max-height: 300px;
+        max-height: 18.75rem;
     }
 
-    /* Make tables scrollable horizontally */
     .table-container {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
@@ -634,150 +634,125 @@ footer a i {
 
     table {
         font-size: 0.8rem;
-        min-width: 400px;
+        min-width: 25rem;
     }
 
-    th,
-    td {
-        padding: 0.4rem;
+    th, td {
+        padding: var(--spacing-sm);
         word-break: break-word;
     }
 
-    footer {
+    footer .container-fluid > div {
         justify-content: center !important;
-        margin: 20px 0;
-        flex-wrap: wrap;
-        gap: 15px;
+        text-align: center;
     }
 
-    footer a i {
-        font-size: 28px;
+    .footer-text {
+        width: 100%;
+        text-align: center;
+        margin-bottom: var(--spacing-sm);
     }
 
-    #coffee {
-        height: 28px;
+    .footer-icon-img {
+        height: 1.5rem;
     }
 
-    /* FAQ/Cheatsheet adjustments */
-    #cheatsheet>div {
-        padding: 8px;
-        margin-bottom: 30px;
-    }
-
-    #cheatsheet img {
-        max-width: 100%;
-        height: auto;
+    #cheatsheet > div {
+        padding: var(--spacing-sm);
+        margin-bottom: var(--spacing-xl);
     }
 
     .command {
-        padding: 8px;
+        padding: var(--spacing-sm);
         font-size: 0.85rem;
-        overflow-x: auto;
-        white-space: nowrap;
-    }
 }
 
 /* Phones */
-@media screen and (max-width: 576px) {
-    body {
+@media screen and (max-width: 36rem) {
+    html {
         font-size: 13px;
     }
 
     .container {
-        margin-top: 15px !important;
-        padding-left: 8px;
-        padding-right: 8px;
+        margin-top: var(--spacing-md) !important;
+        padding-left: var(--spacing-sm);
+        padding-right: var(--spacing-sm);
     }
 
-    h1 {
-        font-size: 1.3rem;
+    .logo-img {
+        width: 2.5rem;
+        height: 2.5rem;
     }
 
-    h2 {
-        font-size: 1.1rem;
+    .title-text {
+        font-size: 1.5rem;
     }
 
-    h3 {
-        font-size: 1rem;
-    }
-
-    #water-logo {
-        width: 40px;
+    .title-version {
+        font-size: 0.875rem;
     }
 
     .card {
-        padding: 12px !important;
+        padding: 0.75rem !important;
     }
 
-    #drop-zone {
-        padding: 15px !important;
-    }
-
-    #drop-zone p {
-        font-size: 0.85rem;
+    .drop-zone {
+        padding: var(--spacing-md) !important;
     }
 
     .btn,
     .btn-primary,
     .btn-hack {
         width: 100%;
-        padding: 12px;
-        font-size: 1rem;
-    }
-
-    .results_img {
-        width: 100%;
-        padding: 5px;
+        padding: 0.75rem;
     }
 
+    .results_img,
     .browse-images {
         width: 100%;
-        padding: 5px;
+        padding: var(--spacing-sm);
     }
 
-    #result-infos>div {
-        padding: 5px;
+    #result-infos > div {
+        padding: var(--spacing-sm);
     }
 
     textarea.form-control,
     pre {
-        padding: 10px;
+        padding: var(--spacing-md);
         font-size: 0.8rem;
+        min-height: 7.8125rem;
+        max-height: 50vh;
     }
 
     .a-strings textarea {
-        height: 200px;
+        height: 12.5rem;
     }
 
     .a-exiftool .table-container {
-        max-height: 250px;
+        max-height: 15.625rem;
     }
 
     table {
         font-size: 0.75rem;
     }
 
-    th,
-    td {
-        padding: 0.3rem;
+    th, td {
+        padding: var(--spacing-xs);
     }
 
     .copy-icon {
         display: block;
-        right: 5px;
-        margin-top: -35px;
+        right: var(--spacing-sm);
+        top: var(--spacing-sm);
     }
 
-    footer {
-        gap: 12px;
+    .footer-link i {
+        font-size: 1.25rem;
     }
 
-    footer a i {
-        font-size: 24px;
-    }
-
-    #coffee {
-        height: 24px;
+    .footer-icon-img {
+        height: 1.375rem;
     }
 
     #image-modal-container img {
@@ -785,60 +760,59 @@ footer a i {
     }
 
     .analyzer {
-        margin-top: 15px;
+        margin-top: var(--spacing-md);
     }
 
-    .analyzer h2+div {
-        margin-top: 10px;
+    .analyzer h2 + div {
+        margin-top: var(--spacing-md);
     }
 
     .analyzer h3 {
-        margin-top: 15px;
+        margin-top: var(--spacing-md);
     }
 
-    /* FAQ/Cheatsheet adjustments */
     #cheatsheet li {
-        padding-left: 20px;
+        padding-left: var(--spacing-lg);
         font-size: 0.9rem;
     }
 
     .command {
         font-size: 0.75rem;
-        padding: 6px;
+        padding: var(--spacing-sm);
     }
 
     #httperror {
-        padding-top: 50px;
+        padding-top: 3.125rem;
     }
 }
 
 /* Extra small phones */
-@media screen and (max-width: 380px) {
-    body {
+@media screen and (max-width: 23.75rem) {
+    html {
         font-size: 12px;
     }
 
-    h1 {
-        font-size: 1.1rem;
+    .logo-img {
+        width: 2.1875rem;
+        height: 2.1875rem;
     }
 
-    #water-logo {
-        width: 35px;
+    .title-text {
+        font-size: 1.3rem;
     }
 
     .btn,
     .btn-primary,
     .btn-hack {
-        padding: 10px;
-        font-size: 0.9rem;
+        padding: 0.625rem;
     }
 
-    footer a i {
-        font-size: 22px;
+    .footer-link i {
+        font-size: 1.1rem;
     }
 
-    #coffee {
-        height: 22px;
+    .footer-icon-img {
+        height: 1.25rem;
     }
 }
 
@@ -871,9 +845,9 @@ footer a i {
 }
 
 /* Landscape mode on phones */
-@media screen and (max-height: 500px) and (orientation: landscape) {
+@media screen and (max-height: 31.25rem) and (orientation: landscape) {
     .container {
-        margin-top: 10px !important;
+        margin-top: var(--spacing-md) !important;
     }
 
     #image-modal-container img {
diff --git a/aperisolve/static/js/aperisolve.js b/aperisolve/static/js/aperisolve.js
index 17c88bc..3d9ba3b 100644
--- a/aperisolve/static/js/aperisolve.js
+++ b/aperisolve/static/js/aperisolve.js
@@ -105,11 +105,12 @@ document.addEventListener('click', function (event) {
   // Check if the clicked element is a copy icon
   if (event.target.classList.contains('copy-icon')) {
     const icon = event.target;
-    const textarea = icon.closest('.textarea-container').querySelector('textarea');
+    const codeContainer = icon.closest('.code-container');
+    const codeBlock = codeContainer ? codeContainer.querySelector('code') : null;
 
-    if (textarea) {
-      textarea.select();
-      navigator.clipboard.writeText(textarea.value).then(() => {
+    if (codeBlock) {
+      const textToCopy = codeBlock.textContent;
+      navigator.clipboard.writeText(textToCopy).then(() => {
         icon.classList.remove('fa-copy');
         icon.classList.add('fa-check');
         setTimeout(() => {
@@ -487,16 +488,13 @@ function parseResult(result) {
       analyzer.innerHTML += `<div class="alert alert-success" role="alert">${output}</div>`;
     } else if (Array.isArray(result[tool]["output"])) {
       if (result[tool]["output"].length > 0) {
-        var texarea_content = `<div class="textarea-container">`;
-        texarea_content += `<textarea class="form-control w-100 mb-2" rows="8" readonly>`;
-        for (const line of result[tool]["output"]) {
-          texarea_content += escapeHtml(`${line}\n`);
-        }
-        texarea_content = texarea_content.trim();
-        texarea_content += `</textarea>`;
-        texarea_content += `<i class="fas fa-copy copy-icon"></i>`;
-        texarea_content += `</div>`;
-        analyzer.innerHTML += texarea_content;
+        var code_content = `<div class="code-container position-relative mb-2">`;
+        code_content += `<pre class="mb-0"><code>`;
+        code_content += result[tool]["output"].map(line => escapeHtml(line)).join('\n').trim();
+        code_content += `</code></pre>`;
+        code_content += `<i class="fas fa-copy copy-icon"></i>`;
+        code_content += `</div>`;
+        analyzer.innerHTML += code_content;
       }
     } else if (typeof result[tool]["output"] === "object") {
       var table_content = `<div class="table-container">`;
@@ -739,3 +737,4 @@ if (browseBtn) {
       xhr.send(formData);
     });
 }
+
diff --git a/aperisolve/templates/base.html b/aperisolve/templates/base.html
index 5e4a155..a2961d9 100644
--- a/aperisolve/templates/base.html
+++ b/aperisolve/templates/base.html
@@ -2,30 +2,48 @@
 <html lang="en" data-bs-theme="dark">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Aperi'Solve</title>
-  <link rel="icon" type="image/svg+xml" href="/static/img/logo.svg" />
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="description" content="Aperi'Solve - Online steganography analysis platform for images">
+  <title>Aperi'Solve - Steganography Analysis</title>
+  <link rel="icon" type="image/svg+xml" href="/static/img/logo.svg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <link href="/static/css/aperisolve.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="/static/css/aperisolve.css" rel="stylesheet">
 </head>
 
-<body class="text-light">
+<body class="d-flex flex-column min-vh-100 text-light">
   <div id="three-bg"></div>
-  <div class="container mt-5">
-    <a class="title_link" href="/">
-      <h1 class="mb-4"><img id="water-logo" src="/static/img/logo.svg" /> Aperi'Solve</h1>
-    </a>
-    {% block body_content %} {% endblock %}
-  </div>
+
+  <!-- Main content area -->
+  <main class="flex-grow-1">
+    <div class="container mt-5">
+      <header class="site-header mb-4">
+        <a class="title-link d-inline-flex align-items-center text-decoration-none" href="/" aria-label="Aperi'Solve Home">
+          <img src="/static/img/logo.svg" alt="Aperi'Solve logo" class="logo-img me-3" width="80" height="80">
+          <div class="d-flex flex-column">
+            <span class="title-text">Aperi'Solve</span>
+            <span class="title-version">v.{{ config["PROJECT_VERSION"] }}</span>
+          </div>
+        </a>
+      </header>
+      {% block body_content %} {% endblock %}
+    </div>
+  </main>
+
+  <!-- Footer -->
+  {% include "footer.html" %}
+
   <!-- Modal Structure -->
   <div id="image-modal-container">
     <img id="modal-image" src="" />
   </div>
+
+  <!-- Scripts -->
   <script src="/static/js/aperisolve.js"></script>
-  <!-- Background -->
   <script type="importmap">
 		{
 			"imports": {
@@ -36,7 +54,6 @@
 	</script>
   <script type="module" src="/static/js/background.js"></script>
   {% block footer_content %} {% endblock %}
-  {% include "footer.html" %}
 </body>
 
 </html>
diff --git a/aperisolve/templates/error.html b/aperisolve/templates/error.html
index 903cef3..3070b4d 100644
--- a/aperisolve/templates/error.html
+++ b/aperisolve/templates/error.html
@@ -1,8 +1,7 @@
 {% extends 'base.html' %}
 {% block body_content %}
-<div id="httperror">
-  <h1>{{ statuscode }}</h1>
-  <br>
-  <h2>{{ message }}</h2>
-</div>
-{% endblock %}
\ No newline at end of file
+<section id="httperror" class="text-center py-5">
+  <h1 class="display-1 mb-4">{{ statuscode }}</h1>
+  <h2 class="h3 text-light-emphasis">{{ message }}</h2>
+</section>
+{% endblock %}
diff --git a/aperisolve/templates/footer.html b/aperisolve/templates/footer.html
index 27bd7b4..20a4d03 100644
--- a/aperisolve/templates/footer.html
+++ b/aperisolve/templates/footer.html
@@ -1,23 +1,26 @@
-<footer class="d-flex justify-content-center gap-4 my-4">
-    <div>
-        <a href="https://buymeacoffee.com/aperisolve" title="Coffee" class="text-light text-decoration-none">
-            <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" id="coffee" />
+<footer class="mt-auto py-3 px-3">
+  <div class="container-fluid">
+    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
+      <!-- Copyright -->
+      <div class="footer-text">
+        Aperi'Solve (v.{{ config["PROJECT_VERSION"] }}) © {{ datetime.today().year }}
+      </div>
+
+      <!-- Links -->
+      <div class="d-flex align-items-center gap-3 flex-wrap">
+        <a href="https://buymeacoffee.com/aperisolve" title="Buy Me A Coffee" class="footer-link">
+          <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" class="footer-icon-img" />
         </a>
-    </div>
-    <div>
-        <a href="/faq" title="FAQ" class="text-light text-decoration-none">
-            <i class="fa-regular fa-circle-question"></i>
+        <a href="/faq" title="FAQ" class="footer-link">
+          <i class="fa-regular fa-circle-question fa-lg"></i>
         </a>
-    </div>
-    <div>
-        <a href="https://github.com/Zeecka/AperiSolve" target="_blank" title="GitHub"
-            class="text-light text-decoration-none">
-            <i class="fa-brands fa-github"></i>
+        <a href="https://github.com/Zeecka/AperiSolve" target="_blank" rel="noopener" title="GitHub" class="footer-link">
+          <i class="fa-brands fa-github fa-lg"></i>
         </a>
-    </div>
-    <div>
-        <a href="https://x.com/Zeecka_" target="_blank" title="Twitter" class="text-light text-decoration-none">
-            <i class="fa-brands fa-x-twitter"></i>
+        <a href="https://x.com/Zeecka_" target="_blank" rel="noopener" title="Twitter" class="footer-link">
+          <i class="fa-brands fa-x-twitter fa-lg"></i>
         </a>
+      </div>
     </div>
-</footer>
\ No newline at end of file
+  </div>
+</footer>
diff --git a/aperisolve/templates/index.html b/aperisolve/templates/index.html
index 4624a83..95c815f 100644
--- a/aperisolve/templates/index.html
+++ b/aperisolve/templates/index.html
@@ -1,39 +1,59 @@
 {% extends 'base.html' %}
 {% block body_content %}
-<form id="upload-form" class="card p-4" method="POST" enctype="multipart/form-data">
+<form id="upload-form" class="card p-4 mb-4" method="POST" enctype="multipart/form-data">
+  <!-- Description Section -->
+  <section class="mb-4">
+    <h2 class="h4 mb-3">What is this?</h2>
+    <p class="text-light-emphasis mb-0">
+      Aperi'Solve is an online platform which performs layer analysis on images.
+      The platform also uses zsteg, steghide, outguess, exiftool, binwalk, foremost and strings
+      for deeper steganography analysis. Supports: PNG, JPG, GIF, BMP, JPEG, JFIF, JPE, TIFF...
+    </p>
+  </section>
+
+  <!-- Drop Zone -->
   <div class="mb-3">
-    <div>
-      <h2>What is this ?</h2>
-      <p>Aperi'Solve is an online platform which performs layer analysis on image. The platform also uses zsteg,
-        steghide, outguess, exiftool, binwalk, foremost and strings for deeper steganography analysis. The platform
-        supports the following images format: .png, .jpg, .gif, .bmp, .jpeg, .jfif, .jpe, .tiff...</p>
-    </div>
-    <div id="drop-zone" class="border border-secondary rounded p-4 text-center mb-3">
-      <p id="drag-msg">📂 Drag and drop an image here or click to select</p>
-      <input type="file" id="image" name="image" accept="image/*" hidden required />
-      <button type="button" class="btn btn-secondary mt-2" id="browse-btn">
-        Choose an image
+    <label for="image" class="form-label visually-hidden">Image file</label>
+    <div id="drop-zone" class="drop-zone border border-2 border-dashed rounded-3 p-4 text-center">
+      <p id="drag-msg" class="mb-3">📂 Drag and drop an image here or click to select</p>
+      <input type="file" id="image" name="image" accept="image/*" class="visually-hidden" required>
+      <button type="button" class="btn btn-secondary" id="browse-btn" aria-label="Choose image file">
+        <i class="fa fa-folder-open me-2"></i>Choose an image
       </button>
     </div>
   </div>
+
+  <!-- Password Field -->
   <div class="mb-3">
-    <label for="password" class="form-label">Password (optional)</label>
-    <input class="form-control" type="text" name="password" id="password" />
+    <label for="password" class="form-label">Password <small class="text-muted">(optional)</small></label>
+    <input class="form-control" type="text" name="password" id="password" placeholder="Enter password if required">
   </div>
-  <div class="form-check mb-3">
-    <input class="form-check-input" type="checkbox" id="deep" />
-    <label class="form-check-label" for="deep">Deep analysis</label>
+
+  <!-- Deep Analysis Toggle -->
+  <div class="form-check form-switch mb-4">
+    <input class="form-check-input" type="checkbox" role="switch" id="deep">
+    <label class="form-check-label" for="deep">
+      Deep analysis <small class="text-muted">(slower, more thorough)</small>
+    </label>
   </div>
-  <button type="submit" class="btn btn-primary">Submit</button>
-  <div class="progress mt-3 d-none" id="progress-container">
-    <div class="progress-bar" id="progress-bar" role="progress-bar" style="width: 0%">
+
+  <!-- Submit Button -->
+  <button type="submit" class="btn btn-primary btn-lg w-100">
+    <i class="fa fa-upload me-2"></i>Analyze Image
+  </button>
+
+  <!-- Progress Bar -->
+  <div class="progress mt-3 d-none" id="progress-container" role="progressbar" aria-label="Upload progress">
+    <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress-bar" style="width: 0%">
       0%
     </div>
   </div>
 </form>
-<div id="result" class="mt-5">
-  <div id="result-infos" class="mb-3"></div>
-  <div id="result-analyzers" class="mb-3"></div>
-  <div id="result-removal" class="mb-3"></div>
-</div>
+
+<!-- Results Section -->
+<section id="result" class="results-section pb-4">
+  <div id="result-infos" class="mb-4"></div>
+  <div id="result-analyzers" class="mb-4"></div>
+  <div id="result-removal" class="mb-4"></div>
+</section>
 {% endblock %}
diff --git a/aperisolve/templates/result.html b/aperisolve/templates/result.html
index 546e21e..f7c0cc6 100644
--- a/aperisolve/templates/result.html
+++ b/aperisolve/templates/result.html
@@ -1,10 +1,10 @@
 {% extends 'base.html' %}
 {% block body_content %}
-<div id="result" class="mt-5">
-  <div id="result-infos" class="mb-3"></div>
-  <div id="result-analyzers" class="mb-3"></div>
-  <div id="result-removal" class="mb-3"></div>
-</div>
+<section id="result" class="results-section">
+  <div id="result-infos" class="mb-4"></div>
+  <div id="result-analyzers" class="mb-4"></div>
+  <div id="result-removal" class="mb-4"></div>
+</section>
 {% endblock %}
 {% block footer_content %}
 <script>
diff --git a/aperisolve/templates/show.html b/aperisolve/templates/show.html
index 6ea78d8..bc7f3d9 100644
--- a/aperisolve/templates/show.html
+++ b/aperisolve/templates/show.html
@@ -1,10 +1,15 @@
 {% extends 'base.html' %}
 {% block body_content %}
-<div id="result" class="mt-5">
-  {% for img in images %}<!--
-    --><div class="browse-images">
-      <a href="{{ img.link }}" target="_blank"><img src="{{ img.file }}"/></a>
-    </div><!--
-  -->{% endfor %}
-</div>
-{% endblock %}
\ No newline at end of file
+<section id="result" class="results-section">
+  <h2 class="h3 mb-4">Browse Submissions</h2>
+  <div class="row g-3">
+    {% for img in images %}
+    <div class="col-6 col-md-4 col-lg-3">
+      <a href="{{ img.link }}" target="_blank" class="d-block browse-image-link">
+        <img src="{{ img.file }}" alt="Submission thumbnail" class="img-fluid rounded" loading="lazy">
+      </a>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endblock %}