diff --git a/assets/styles/main.rcss b/assets/styles/main.rcss
index 00670f7..291d1fa 100644
--- a/assets/styles/main.rcss
+++ b/assets/styles/main.rcss
@@ -1,8 +1,7 @@
-
 * {
     box-sizing: border-box;
     font-family: "Hubballi";
- 
+
     --background-color: #2b2d2f;   
     --foreground-color: #f0eae1;   
     --accent-green: #606c38;       
@@ -13,19 +12,22 @@
     --border-dark: #191a1b;        
 }
 
+/* ==========================================================================
+   Mobile-First Base Styles (scaled via dp)
+   ========================================================================== */
+
 body {
     display: block;
     width: 100vw;
     height: 100vh;
-    font-size: 15pt;
+    font-size: 12dp;
     background-color: var(--background-color);
     color: var(--foreground-color);
-    margin: 0px;
-    padding: 24px;
+    margin: 0dp;
+    padding: 12dp;
 }
 
 /* Generic Structural Layout Defaults */
-
 div, section, article, header, footer, main, nav, aside {
     display: block;
 }
@@ -37,39 +39,37 @@ span, em, strong, a {
 /* Typographic Defaults */
 p {
     display: block;
-    margin: 0px;
+    margin: 0dp;
 }
 
 h1, h2, h3, h4, h5, h6 {
     display: block;
     font-weight: bold;
-    margin: 0px;
+    margin: 0dp;
 }
 
-h1 { font-size: 2em; }
+h1 { font-size: 1.6em; }
 h2 { font-size: 1.5em; }
 h3 { font-size: 1.17em; }
 
 em { font-style: italic; }
 strong { font-weight: bold; }
 
-/* ==========================================================================
-   Form Inputs & Interactive UI Components
-   ========================================================================== */
+/* Form Inputs & Interactive UI Components */
 button, input, select, textarea {
     display: inline-block;
     font-family: "Hubballi";
-    font-size: 14pt;
-    margin: 0px;
+    font-size: 14dp;
+    margin: 0dp;
     vertical-align: middle;
 }
 
 button {
-    padding: 6px 16px;
+    padding: 6dp 16dp;
     background-color: var(--accent-green);
     color: var(--foreground-color);
-    border: 3px var(--border-dark);
-    border-radius: 6px;
+    border: 3dp var(--border-dark);
+    border-radius: 6dp;
     text-align: center;
     font-weight: bold;
 }
@@ -84,11 +84,11 @@ button:active {
 }
 
 input[type="text"], textarea {
-    padding: 8px 12px;
+    padding: 8dp 12dp;
     background-color: #212325;
     color: var(--foreground-color);
-    border: 3px var(--border-dark);
-    border-radius: 6px;
+    border: 3dp var(--border-dark);
+    border-radius: 6dp;
     width: 100%;
 }
 
@@ -99,58 +99,56 @@ input[type="text"]:focus, textarea:focus {
 
 textarea {
     display: block;
-    height: 150px;
+    height: 120dp;
 }
 
-/*  ===================================
-    App Header
-    =================================== */
+/* App Header */
 #header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding: 12px 20px;
+    padding: 10dp 14dp;
     background-color: var(--accent-green);
-    border: 3px var(--border-dark);
-    border-radius: 8px;
-    margin-bottom: 24px;
+    border: 3dp var(--border-dark);
+    border-radius: 8dp;
+    margin-bottom: 14dp;
 }
 
 .header-title-group {
     display: flex;
     flex-direction: row;
     align-items: baseline;
-    gap: 16px;
+    gap: 12dp;
 }
 
 #header h1 {
-    font-size: 2.5em;
+    font-size: 1.6em;
     color: var(--foreground-color);
-    letter-spacing: 1px;
+    letter-spacing: 1dp;
 }
 
 .header-tag {
-    font-size: 12pt;
+    font-size: 10dp;
     font-weight: bold;
     background-color: var(--border-dark);
     color: var(--accent-gold);
-    padding: 2px 10px;
-    border-radius: 12px;
+    padding: 2dp 10dp;
+    border-radius: 12dp;
 }
 
 #new-critter-btn {
-    height: 48px;
-    width: 48px;
-    border-radius: 8px;
-    font-size: 28pt;
+    height: 40dp;
+    width: 40dp;
+    border-radius: 8dp;
+    font-size: 20dp;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 3px var(--border-dark);
+    border: 3dp var(--border-dark);
     background-color: var(--accent-gold);
     color: var(--border-dark);
-    padding: 0px;
+    padding: 0dp;
 }
 
 #new-critter-btn:hover {
@@ -158,13 +156,11 @@ textarea {
     color: var(--foreground-color);
 }
 
-/*  ===================================
-    Drawer List Styles
-    =================================== */
+/* Drawer List Styles */
 .critter-list {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8dp;
 }
 
 .critter-card {
@@ -173,12 +169,12 @@ textarea {
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 8px 14px;
+    padding: 8dp 10dp;
     background-color: var(--card-bg);
     color: var(--foreground-color);
-    border: 3px var(--border-dark);
-    border-left: 10px var(--accent-green);
-    border-radius: 6px;
+    border: 3dp var(--border-dark);
+    border-left: 10dp var(--accent-green);
+    border-radius: 6dp;
     text-align: left;
 }
 
@@ -191,43 +187,43 @@ textarea {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 14px;
+    gap: 10dp;
     flex: 1;
 }
 
 .thumb-frame {
     background-color: var(--accent-green);
-    border: 2px var(--border-dark);
-    border-radius: 4px;
-    padding: 2px;
+    border: 2dp var(--border-dark);
+    border-radius: 4dp;
+    padding: 2dp;
 }
 
 .critter-thumb {
-    width: 50px;
-    height: 50px;
+    width: 40dp;
+    height: 40dp;
 }
 
 .critter-info {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 2dp;
     flex: 1;
 }
 
 .critter-card-header {
     display: flex;
     align-items: baseline;
-    gap: 12px;
+    gap: 10dp;
 }
 
 .critter-name {
-    font-size: 18pt;
-    margin: 0px;
+    font-size: 14dp;
+    margin: 0dp;
     color: var(--foreground-color);
 }
 
 .critter-id {
-    font-size: 11pt;
+    font-size: 9dp;
     font-weight: bold;
     color: var(--accent-gold);
 }
@@ -235,39 +231,37 @@ textarea {
 .info-pills {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: 8dp;
 }
 
 .pill {
-    font-size: 12pt;
+    font-size: 10dp;
     background-color: #212325;
     color: var(--foreground-color);
-    border: 1px var(--accent-green);
-    padding: 1px 8px;
-    border-radius: 4px;
+    border: 1dp var(--accent-green);
+    padding: 1dp 6dp;
+    border-radius: 4dp;
 }
 
 .btn-delete {
-    padding: 4px 10px;
-    font-size: 11pt;
+    padding: 3dp 8dp;
+    font-size: 9dp;
     font-weight: bold;
     background-color: var(--accent-clay);
     color: #ffffff;
-    border: 2px var(--border-dark);
-    border-radius: 4px;
+    border: 2dp var(--border-dark);
+    border-radius: 4dp;
 }
 
 .btn-delete:hover {
     background-color: #a3561a;
 }
 
-/*  ===================================
-    Modals Layout
-    =================================== */
+/* Modals Layout */
 .modal-overlay {
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: 0dp;
+    left: 0dp;
     width: 100%;
     height: 100%;
     background-color: #1f1f1fdd;
@@ -279,55 +273,55 @@ textarea {
 .modal-content {
     background-color: var(--card-bg);
     color: var(--foreground-color);
-    border: 4px var(--border-dark);
-    border-radius: 10px;
-    width: 600px;
-    padding: 0px;
+    border: 4dp var(--border-dark);
+    border-radius: 10dp;
+    width: 94vw;
+    padding: 0dp;
     display: flex;
     flex-direction: column;
 }
 
 .modal-content-small {
-    width: 450px;
+    width: 88vw;
 }
 
 .modal-header {
     background-color: var(--accent-green);
     color: #ffffff;
-    padding: 12px 20px;
-    border-bottom: 3px var(--border-dark);
+    padding: 10dp 16px;
+    border-bottom: 3dp var(--border-dark);
 }
 
 .modal-header h2 {
-    font-size: 20pt;
+    font-size: 16dp;
     color: #ffffff;
 }
 
 .modal-body {
-    padding: 18px 20px;
+    padding: 14dp 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10dp;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 4dp;
 }
 
 .form-row {
     display: flex;
-    flex-direction: row;
-    gap: 12px;
+    flex-direction: column;
+    gap: 10dp;
 }
 
 .form-group.half {
-    width: 50%;
+    width: 100%;
 }
 
 .modal-content label {
-    font-size: 14pt;
+    font-size: 12dp;
     font-weight: bold;
     color: var(--foreground-color);
 }
@@ -335,32 +329,32 @@ textarea {
 .error {
     color: #ffffff;
     font-weight: bold;
-    padding: 8px;
-    border: 2px var(--border-dark);
+    padding: 8dp;
+    border: 2dp var(--border-dark);
     background-color: var(--accent-clay);
-    border-radius: 4px;
+    border-radius: 4dp;
 }
 
 .dialog-text {
-    font-size: 18pt;
+    font-size: 14dp;
     color: var(--foreground-color);
-    padding: 10px 0px;
+    padding: 10dp 0dp;
 }
 
 .modal-buttons {
-    padding: 14px 20px;
+    padding: 12dp 16px;
     background-color: #2b2d2f;
-    border-top: 3px var(--border-dark);
+    border-top: 3dp var(--border-dark);
     display: flex;
     flex-direction: row;
-    gap: 12px;
+    gap: 12dp;
     justify-content: flex-end;
 }
 
 .modal-buttons button {
-    min-width: 120px;
-    height: 42px;
-    font-size: 16pt;
+    min-width: 90dp;
+    height: 38dp;
+    font-size: 13dp;
 }
 
 .btn-cancel {
@@ -381,125 +375,142 @@ textarea {
     background-color: var(--accent-bright-green);
 }
 
-/*  ===================================
-    Small Screen Media Queries
-    =================================== */
-@media (max-width: 600dp) {
-    body {
-        padding: 12px;
-        font-size: 12pt;
-    }
-
-    #header {
-        padding: 10px 14px;
-        margin-bottom: 14px;
-    }
-
-    #header h1 {
-        font-size: 1.6em;
-    }
-
-    .header-tag {
-        font-size: 10pt;
-    }
-
-    #new-critter-btn {
-        height: 40px;
-        width: 40px;
-        font-size: 20pt;
-    }
-
-    .critter-list {
-        gap: 8px;
-    }
-
-    .critter-card {
-        padding: 8px 10px;
-    }
-
-    .critter-card-body {
-        gap: 10px;
-    }
-
-    .critter-thumb {
-        width: 40px;
-        height: 40px;
-    }
-
-    .critter-name {
-        font-size: 14pt;
-    }
-
-    .critter-id {
-        font-size: 9pt;
-    }
-
-    .pill {
-        font-size: 10pt;
-        padding: 1px 6px;
-    }
-
-    .btn-delete {
-        padding: 3px 8px;
-        font-size: 9pt;
-    }
-
-    .modal-content {
-        width: 94vw;
-    }
-
-    .modal-content-small {
-        width: 88vw;
-    }
-
-    .modal-header h2 {
-        font-size: 16pt;
-    }
-
-    .modal-body {
-        padding: 14px 16px;
-        gap: 10px;
-    }
-
-    .form-row {
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    .form-group.half {
-        width: 100%;
-    }
-
-    .modal-content label {
-        font-size: 12pt;
-    }
-
-    .modal-buttons {
-        padding: 12px 16px;
-    }
-
-    .modal-buttons button {
-        min-width: 90px;
-        height: 38px;
-        font-size: 13pt;
-    }
-
-    .dialog-text {
-        font-size: 14pt;
-    }
-}
-
+/* Extra Narrow Viewports (< 380dp) */
 @media (max-width: 380dp) {
     #header h1 {
         font-size: 1.3em;
     }
 
     .critter-name {
-        font-size: 12pt;
+        font-size: 12dp;
     }
 
     .info-pills {
         flex-direction: column;
-        gap: 4px;
+        gap: 4dp;
     }
 }
+
+/* ==========================================================================
+   Desktop / Larger Screens Media Query (Min-Width >= 600dp)
+   ========================================================================== */
+@media (min-width: 600dp) {
+    body {
+        padding: 24dp;
+        font-size: 15dp;
+    }
+
+    textarea {
+        height: 150dp;
+    }
+
+    #header {
+        padding: 12dp 20px;
+        margin-bottom: 24dp;
+    }
+
+    .header-title-group {
+        gap: 16dp;
+    }
+
+    #header h1 {
+        font-size: 2.5em;
+    }
+
+    .header-tag {
+        font-size: 12dp;
+    }
+
+    #new-critter-btn {
+        height: 48dp;
+        width: 48dp;
+        font-size: 28dp;
+    }
+
+    .critter-list {
+        gap: 10dp;
+    }
+
+    .critter-card {
+        padding: 8dp 14dp;
+    }
+
+    .critter-card-body {
+        gap: 14dp;
+    }
+
+    .critter-thumb {
+        width: 50dp;
+        height: 50dp;
+    }
+
+    .critter-card-header {
+        gap: 12dp;
+    }
+
+    .critter-name {
+        font-size: 18dp;
+    }
+
+    .critter-id {
+        font-size: 11dp;
+    }
+
+    .pill {
+        font-size: 12dp;
+        padding: 1dp 8dp;
+    }
+
+    .btn-delete {
+        padding: 4dp 10dp;
+        font-size: 11dp;
+    }
+
+    .modal-content {
+        width: 600dp;
+    }
+
+    .modal-content-small {
+        width: 450dp;
+    }
+
+    .modal-header {
+        padding: 12dp 20px;
+    }
+
+    .modal-header h2 {
+        font-size: 20dp;
+    }
+
+    .modal-body {
+        padding: 18dp 20px;
+        gap: 12px;
+    }
+
+    .form-row {
+        flex-direction: row;
+        gap: 12dp;
+    }
+
+    .form-group.half {
+        width: 50%;
+    }
+
+    .modal-content label {
+        font-size: 14dp;
+    }
+
+    .dialog-text {
+        font-size: 18dp;
+    }
+
+    .modal-buttons {
+        padding: 14px 20px;
+    }
+
+    .modal-buttons button {
+        min-width: 120dp;
+        height: 42dp;
+        font-size: 16dp;
+    }
+}
\ No newline at end of file
diff --git a/flake.nix b/flake.nix
index 0650c23..54223b3 100644
--- a/flake.nix
+++ b/flake.nix
@@ -25,7 +25,7 @@
             owner = "mikke89";
             repo = "RmlUi";
             rev = "master";
-            hash = "sha256-vfFtjNHw7coXWrGgtcFyuIsu5rctW5dBJoOt8MTZwDU=";
+            hash = "sha256-5vyrVJhmNE/msJuVSESsKhiW9Pc+peA0NTYJDVoRanA=";
           };
 
           nativeBuildInputs = [
diff --git a/src/main.cpp b/src/main.cpp
index d93a5fd..5683d3f 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -184,9 +184,16 @@ int main(int arc, char *argv[]) {
             if (windows && window_count > 0) {
                 int current_width = 0, current_height = 0;
                 SDL_GetWindowSize(windows[0], &current_width, &current_height);
+                
+                float display_scale = SDL_GetWindowDisplayScale(windows[0]);
+                
                 if (Rml::Vector2i(current_width, current_height) != ctx->GetDimensions()) {
                     ctx->SetDimensions(Rml::Vector2i(current_width, current_height));
                 }
+                
+                if (display_scale != ctx->GetDensityIndependentPixelRatio()) {
+                    ctx->SetDensityIndependentPixelRatio(display_scale);
+                }
             }
             SDL_free(windows);
         }