diff --git a/README.md b/README.md
index da69ce2..2bbdb22 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,16 @@
 
 </div>
 
+<div align="center">
+
+<img src="./public/screenshot_calc.png" alt="PolydraIQ Interactive Calculator" width="900" />
+
+<br/>
+
+<img src="./public/screenshot_assessment.png" alt="PolydraIQ Guided Assessment" width="900" />
+
+</div>
+
 ## 📋 Table of Contents
 
 - [Overview](#-overview)
diff --git a/public/screenshot_assessment.png b/public/screenshot_assessment.png
new file mode 100644
index 0000000..88297c4
Binary files /dev/null and b/public/screenshot_assessment.png differ
diff --git a/public/screenshot_calc.png b/public/screenshot_calc.png
new file mode 100644
index 0000000..4c44cba
Binary files /dev/null and b/public/screenshot_calc.png differ
diff --git a/src/app/components/calculator/Calculator.module.scss b/src/app/components/calculator/Calculator.module.scss
index ab3aa4d..6940f34 100644
--- a/src/app/components/calculator/Calculator.module.scss
+++ b/src/app/components/calculator/Calculator.module.scss
@@ -13,8 +13,8 @@
     width: 95vw;
     height: auto;
     background-color: var(--color-surface);
-    border: solid 1px var(--color-border-subtle);
-    border-radius: 6px;
+    border: solid 10px var(--color-gold);
+    border-radius: 18px;
     margin: 25vh auto 0 auto;
     padding: 18px 20px 24px 20px;
     z-index: 2;
diff --git a/src/app/components/footer/Footer.module.scss b/src/app/components/footer/Footer.module.scss
index 3c05e1b..83c1b8d 100644
--- a/src/app/components/footer/Footer.module.scss
+++ b/src/app/components/footer/Footer.module.scss
@@ -19,5 +19,5 @@
     justify-content: center;
     margin-top: 40px;
     margin-bottom: 20px;
-    color: var(--color-text-muted);
+    color: #e5e7eb;
 }
\ No newline at end of file
diff --git a/src/app/components/questionnaire/QuestionnaireDialog.tsx b/src/app/components/questionnaire/QuestionnaireDialog.tsx
index d04e5c8..536cc41 100644
--- a/src/app/components/questionnaire/QuestionnaireDialog.tsx
+++ b/src/app/components/questionnaire/QuestionnaireDialog.tsx
@@ -672,7 +672,7 @@ Based on your assessment results, focus on areas with lower scores to improve yo
             <h3 style={{ margin: '0 0 8px 0', color: '#1f2937' }}>{SECTIONS[tab]}</h3>
             <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '12px' }}>
               <ProgressBar 
-                value={(currentScore / maxPossibleScore) * 100} 
+                value={maxPossibleScore ? Math.round((currentScore / maxPossibleScore) * 100) : 0} 
                 style={{ flex: 1 }}
                 color="#3b82f6"
               />
diff --git a/src/app/pages/home.module.scss b/src/app/pages/home.module.scss
index d6a88e5..8f9fa87 100644
--- a/src/app/pages/home.module.scss
+++ b/src/app/pages/home.module.scss
@@ -45,7 +45,6 @@
     background-color: var(--color-navy);
     position: absolute;
     top: 0;
-    border-bottom: solid 10px var(--color-gold);
 
     .container {
         margin-top: 80px;
diff --git a/src/styles.scss b/src/styles.scss
index 384ef94..97deefc 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,7 +2,7 @@
 
 :root {
     /* Neutrals */
-    --color-bg: #f7f5f1;
+    --color-bg: #1f2937;
     --color-surface: #ffffff;
     --color-border-subtle: #d6d0c4;
     --color-text-main: #1f2933;
@@ -28,7 +28,7 @@ body {
     font-size: 15px;
     line-height: 1.4;
     background-color: var(--color-bg);
-    color: var(--color-text-main);
+    color: #f9fafb;
 }
 
 body {