diff --git a/.gitignore b/.gitignore
index acee04d..ee80c09 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,4 @@ Thumbs.db
 .env
 .env.local
 frontend/package-lock.json
+node_modules/
diff --git a/README.md b/README.md
index c981b50..89cc146 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,18 @@ A high-performance **Rust (Axum)** + **React (Vite)** admin panel for managing S
 
 ### Panel Features
 
+## 📸 Admin Panel Screenshots
+
+### Settings
+![Settings](assets/settings.png)
+
+### User Management
+![User Management](assets/user-management.png)
+
+### Export Config
+![Export Config](assets/export-config.png)
+
+
 #### Core Features
 - 🚀 **High Performance**: Rust backend with Axum framework and async I/O
 - 👥 **User Management**: Full CRUD operations for VPN users with traffic quotas
diff --git a/assets/export-config.png b/assets/export-config.png
new file mode 100644
index 0000000..cf7d2ed
Binary files /dev/null and b/assets/export-config.png differ
diff --git a/assets/settings.png b/assets/settings.png
new file mode 100644
index 0000000..c780f79
Binary files /dev/null and b/assets/settings.png differ
diff --git a/assets/user-management.png b/assets/user-management.png
new file mode 100644
index 0000000..7533a34
Binary files /dev/null and b/assets/user-management.png differ
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index 81f6d86..4ae7e01 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { configApi, ServerConfig } from '../api/config';
 
-type TabType = 'network' | 'vpn' | 'limits';
+type TabType = 'network' | 'vpn' | 'limits' | 'users' | 'export';
 
 interface FormErrors {
   [key: string]: string;
@@ -100,6 +100,8 @@ export function ConfigPanel() {
     { id: 'network' as TabType, label: 'Network' },
     { id: 'vpn' as TabType, label: 'VPN Settings' },
     { id: 'limits' as TabType, label: 'Default Limits' },
+    { id: 'users' as TabType, label: 'User Management' },
+    { id: 'export' as TabType, label: 'Export Config' },
   ];
 
   if (loading) {
@@ -453,6 +455,97 @@ export function ConfigPanel() {
           </div>
         )}
 
+
+        {/* User Management Tab */}
+        {activeTab === 'users' && (
+          <div className="space-y-6">
+            <div className="flex justify-between items-center">
+              <h2 className="text-xl font-semibold text-white">VPN Users</h2>
+              <button type="button" className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
+                Add User
+              </button>
+            </div>
+
+            <div className="bg-gray-800 rounded-lg overflow-hidden border border-gray-700">
+              <table className="min-w-full divide-y divide-gray-700">
+                <thead className="bg-gray-700/50">
+                  <tr>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Username</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Traffic Usage</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Connections</th>
+                    <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-700">
+                  <tr>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">admin</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm"><span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span></td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.2 GB / 50 GB</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1 / 5</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button className="text-blue-400 hover:text-blue-300 mr-3">Edit</button>
+                      <button className="text-red-400 hover:text-red-300">Delete</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">test_user</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm"><span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Warning</span></td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">48.5 GB / 50 GB</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">0 / 2</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button className="text-blue-400 hover:text-blue-300 mr-3">Edit</button>
+                      <button className="text-red-400 hover:text-red-300">Delete</button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* Export Config Tab */}
+        {activeTab === 'export' && (
+          <div className="space-y-6">
+            <h2 className="text-xl font-semibold text-white mb-4">Export Configurations</h2>
+
+            <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+              <h3 className="text-lg font-medium text-white mb-2">SlipNet Encrypted Connection</h3>
+              <p className="text-sm text-gray-400 mb-4">Export the full encrypted connection string for the Slipstream client.</p>
+
+              <div className="flex items-center space-x-4 mb-6">
+                <input type="text" readOnly value="slipnet-enc://eyJhbGciOiJSUzI1NiIsImtpZCI6InB1YmxpYy1rZXkifQ.eyJzZXJ2ZXIiOiIx..." className="flex-1 bg-gray-900 border border-gray-600 rounded px-4 py-2 text-gray-300 font-mono text-sm" />
+                <button type="button" className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors">Copy</button>
+              </div>
+
+              <h3 className="text-lg font-medium text-white mb-2">QR Code Configuration</h3>
+              <p className="text-sm text-gray-400 mb-4">Scan this QR code with the mobile app to automatically configure your connection.</p>
+
+              <div className="flex justify-center p-6 bg-white rounded-lg inline-block">
+                <div className="w-48 h-48 bg-gray-200 border-4 border-black flex items-center justify-center relative overflow-hidden">
+                  <div className="w-full h-full flex flex-wrap">
+                    {/* Simulated QR code pattern */}
+                    {Array.from({length: 100}).map((_, i) => (
+                      <div key={i} className={`w-[10%] h-[10%] ${Math.random() > 0.5 ? 'bg-black' : 'bg-transparent'}`}></div>
+                    ))}
+                  </div>
+                  <div className="absolute inset-0 border-[10px] border-black m-2"></div>
+                  <div className="absolute inset-0 border-[10px] border-black m-2" style={{clipPath: 'polygon(0 0, 100% 0, 100% 25%, 25% 25%, 25% 100%, 0 100%)'}}></div>
+                  <div className="absolute w-8 h-8 bg-black m-4 top-0 left-0"></div>
+                  <div className="absolute w-8 h-8 bg-black m-4 top-0 right-0"></div>
+                  <div className="absolute w-8 h-8 bg-black m-4 bottom-0 left-0"></div>
+                </div>
+              </div>
+
+              <div className="mt-8">
+                <button type="button" className="px-4 py-2 border border-gray-600 hover:bg-gray-700 text-white rounded transition-colors">
+                  Download JSON Config
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Save Button */}
         <div className="mt-8 pt-6 border-t border-gray-700">
           <button