diff --git a/neural_style_app/templates/index.html b/neural_style_app/templates/index.html
index 92f32b3..a55975f 100644
--- a/neural_style_app/templates/index.html
+++ b/neural_style_app/templates/index.html
@@ -28,6 +28,7 @@
             border-radius: 10px;
             display: inline-block;
             margin-top: 20px;
+            text-align: center; /* Center-align content inside the form */
         }
 
         label {
@@ -36,9 +37,16 @@
             font-size: 1.2em;
         }
 
+        .file-input-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
         input[type="file"] {
             padding: 10px;
-            margin-bottom: 20px;
+            margin: 0 20px; /* Spacing between the file input and images */
             color: #ffdfba;
             background-color: #333;
             border: none;
@@ -80,6 +88,16 @@
             border-radius: 10px;
         }
 
+        /* Thumbnail preview styles */
+        .image-preview {
+            display: inline-block;
+            width: 100px;
+            height: 100px;
+            border: 2px solid #ff7f50;
+            object-fit: cover;
+            border-radius: 5px;
+        }
+
         /* Loading message style */
         .loading-message {
             font-size: 2em;
@@ -97,11 +115,15 @@
 <body>
     <h1>Style Transfer</h1>
     <form id="upload-form" action="/" method="POST" enctype="multipart/form-data">
-        <label for="content_image">Upload Content Image:</label>
-        <input type="file" id="content_image" name="content_image" required>
+        <div class="file-input-container">
+            <input type="file" id="content_image" name="content_image" required>
+            <img id="content-preview" class="image-preview" alt="Content Image Preview">
+        </div>
 
-        <label for="style_image">Upload Style Image:</label>
-        <input type="file" id="style_image" name="style_image" required>
+        <div class="file-input-container">
+            <input type="file" id="style_image" name="style_image" required>
+            <img id="style-preview" class="image-preview" alt="Style Image Preview">
+        </div>
 
         <input type="submit" value="Submit">
     </form>
@@ -121,6 +143,35 @@
     </div>
 
     <script>
+        // JavaScript to handle image previews
+        document.getElementById('content_image').addEventListener('change', function(event) {
+            const contentPreview = document.getElementById('content-preview');
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    contentPreview.src = e.target.result;
+                };
+                reader.readAsDataURL(file);
+            } else {
+                contentPreview.src = '';
+            }
+        });
+
+        document.getElementById('style_image').addEventListener('change', function(event) {
+            const stylePreview = document.getElementById('style-preview');
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    stylePreview.src = e.target.result;
+                };
+                reader.readAsDataURL(file);
+            } else {
+                stylePreview.src = '';
+            }
+        });
+
         // JavaScript to handle form submission and display the image
         document.getElementById('upload-form').addEventListener('submit', async function(event) {
             event.preventDefault(); // Prevent the form from submitting the traditional way
diff --git a/neural_style_pytorch/images/sloneczniki.jpg b/neural_style_pytorch/images/sloneczniki.jpg
new file mode 100644
index 0000000..77a20ea
Binary files /dev/null and b/neural_style_pytorch/images/sloneczniki.jpg differ
