app/add/page.tsx

@@ -157,11 +157,13 @@ export default function AddStream() {
             />
           </div>
 
-          {/* Team Selection */}
+          {/* Team Selection and Submit Button */}
           <div>
             <label className="block text-white font-semibold mb-3">
               Team
             </label>
+            <div className="form-row">
+              <div style={{ flex: 1 }}>
                 <Dropdown
                   options={teams}
                   activeId={formData.team_id}
@@ -169,20 +171,16 @@ export default function AddStream() {
                   label="Select a Team"
                 />
               </div>
-
-          {/* Submit Button */}
-          <div className="pt-6">
               <button
                 type="submit"
                 disabled={isSubmitting}
-              className="btn w-full"
+                className="btn btn-success"
               >
-              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                <span className="icon">🎥</span>
-                <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
+                {isSubmitting ? 'Adding...' : 'Add Stream'}
-              </svg>
-              {isSubmitting ? 'Adding Stream...' : 'Add Stream'}
               </button>
             </div>
+          </div>
         </form>
       </div>
 

app/edit/[id]/page.tsx

@@ -165,6 +165,7 @@ export default function EditStream() {
           <h1 className="title">Stream Not Found</h1>
           <p className="subtitle">The requested stream could not be found.</p>
           <button onClick={() => router.push('/')} className="btn mt-4">
+            <span className="icon">🏠</span>
             Back to Home
           </button>
         </div>
@@ -252,32 +253,28 @@ export default function EditStream() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="btn w-full"
+                className="btn btn-success w-full"
               >
-                <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                <span className="icon">✅</span>
-                  <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                </svg>
                 {isSubmitting ? 'Updating Stream...' : 'Update Stream'}
               </button>
               
-              <div className="flex gap-3">
+              <div className="button-group" style={{ justifyContent: 'center' }}>
                 <button
                   type="button"
                   onClick={() => router.push('/')}
-                  className="btn-secondary flex-1"
+                  className="btn-secondary"
                 >
+                  <span className="icon">❌</span>
                   Cancel
                 </button>
                 
                 <button
                   type="button"
                   onClick={handleDelete}
-                  className="btn bg-red-600 hover:bg-red-700 flex-1"
+                  className="btn-danger"
                 >
-                  <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                  <span className="icon">🗑️</span>
-                    <path fillRule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clipRule="evenodd" />
-                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                  </svg>
                   Delete Stream
                 </button>
               </div>

app/globals.css

@@ -29,7 +29,7 @@ body {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
-/* Modern Button */
+/* Modern Button System */
 .btn {
   background: linear-gradient(135deg, #3b82f6, #1d4ed8);
   color: white;
@@ -41,8 +41,12 @@ body {
   transition: all 0.3s ease;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
   position: relative;
+  min-height: 44px;
+  font-size: 14px;
+  text-decoration: none;
 }
 
 .btn.active {
@@ -51,18 +55,90 @@ body {
 }
 
 .btn:hover {
-  transform: translateY(-2px);
+  transform: translateY(-1px);
-  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
 }
 
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* Secondary Button */
 .btn-secondary {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  backdrop-filter: blur(10px);
 }
 
 .btn-secondary:hover {
   background: rgba(255, 255, 255, 0.2);
-  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
+}
+
+/* Success Button */
+.btn-success {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+}
+
+.btn-success:hover {
+  background: linear-gradient(135deg, #059669, #047857);
+  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+}
+
+/* Danger Button */
+.btn-danger {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+
+/* Small Button */
+.btn-sm {
+  padding: 8px 16px;
+  font-size: 12px;
+  min-height: 36px;
+  border-radius: 8px;
+}
+
+/* Icon Only Button */
+.btn-icon {
+  padding: 10px;
+  min-width: 44px;
+  aspect-ratio: 1;
+}
+
+/* Button with icon spacing */
+.btn .icon {
+  flex-shrink: 0;
+}
+
+/* Form spacing fixes since Tailwind gap classes aren't working */
+.form-row {
+  display: flex;
+  align-items: center;
+}
+
+.form-row > * + * {
+  margin-left: 16px;
+}
+
+.button-group {
+  display: flex;
+  align-items: center;
+}
+
+.button-group > * + * {
+  margin-left: 12px;
 }
 
 /* Input Styling */

app/page.tsx

@@ -200,11 +200,9 @@ export default function Home() {
                 </div>
                 <Link
                   href={`/edit/${stream.id}`}
-                  className="btn-secondary"
+                  className="btn-secondary btn-sm"
                 >
-                  <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                  <span className="icon">✏️</span>
-                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                  </svg>
                   Edit
                 </Link>
               </div>

app/teams/page.tsx

@@ -125,23 +125,22 @@ export default function Teams() {
       <div className="glass p-6 mb-6">
         <h2 className="card-title">Add New Team</h2>
         <form onSubmit={handleAddTeam} className="max-w-md mx-auto">
-          <div className="flex gap-3">
+          <div className="form-row">
             <input
               type="text"
               value={newTeamName}
               onChange={(e) => setNewTeamName(e.target.value)}
               placeholder="Enter team name"
-              className="input flex-1"
+              className="input"
+              style={{ flex: 1 }}
               required
             />
             <button
               type="submit"
               disabled={isSubmitting}
-              className="btn"
+              className="btn btn-success"
             >
-              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+              <span className="icon">➕</span>
-                <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
-              </svg>
               {isSubmitting ? 'Adding...' : 'Add Team'}
             </button>
           </div>
@@ -170,30 +169,29 @@ export default function Teams() {
             {teams.map((team) => (
               <div key={team.team_id} className="glass p-4">
                 {editingTeam?.team_id === team.team_id ? (
-                  <div className="flex items-center gap-3">
+                  <div className="form-row">
                     <input
                       type="text"
                       value={editingName}
                       onChange={(e) => setEditingName(e.target.value)}
-                      className="input flex-1"
+                      className="input"
+                      style={{ flex: 1 }}
                       autoFocus
                     />
                     <button
                       onClick={() => handleUpdateTeam(team.team_id)}
-                      className="btn"
+                      className="btn btn-success btn-sm"
+                      title="Save changes"
                     >
-                      <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                      <span className="icon">✅</span>
-                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                      </svg>
                       Save
                     </button>
                     <button
                       onClick={cancelEditing}
-                      className="btn-secondary"
+                      className="btn-secondary btn-sm"
+                      title="Cancel editing"
                     >
-                      <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                      <span className="icon">❌</span>
-                        <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-                      </svg>
                       Cancel
                     </button>
                   </div>
@@ -208,24 +206,21 @@ export default function Teams() {
                         <div className="text-sm text-white/60">ID: {team.team_id}</div>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2">
+                    <div className="button-group">
                       <button
                         onClick={() => startEditing(team)}
-                        className="btn-secondary"
+                        className="btn-secondary btn-sm"
+                        title="Edit team"
                       >
-                        <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                        <span className="icon">✏️</span>
-                          <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                        </svg>
                         Edit
                       </button>
                       <button
                         onClick={() => handleDeleteTeam(team.team_id)}
-                        className="btn bg-red-600 hover:bg-red-700"
+                        className="btn-danger btn-sm"
+                        title="Delete team"
                       >
-                        <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+                        <span className="icon">🗑️</span>
-                          <path fillRule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clipRule="evenodd" />
-                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                        </svg>
                         Delete
                       </button>
                     </div>

components/Header.tsx

@@ -26,26 +26,20 @@ export default function Header() {
           </div>
           
           {/* Navigation */}
-          <nav className="flex">
+          <nav className="button-group">
             <Link 
               href="/" 
               className={`btn ${isActive('/') ? 'active' : ''}`}
-              style={{ marginRight: '12px' }}
             >
-              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+              <span className="icon">🏠</span>
-                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-              </svg>
               Home
             </Link>
             
             <Link 
               href="/add" 
               className={`btn ${isActive('/add') ? 'active' : ''}`}
-              style={{ marginRight: '12px' }}
             >
-              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+              <span className="icon">🎥</span>
-                <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
-              </svg>
               Streams
             </Link>
             
@@ -53,9 +47,7 @@ export default function Header() {
               href="/teams" 
               className={`btn ${isActive('/teams') ? 'active' : ''}`}
             >
-              <svg className="icon-sm" fill="currentColor" viewBox="0 0 20 20">
+              <span className="icon">👥</span>
-                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
-              </svg>
               Teams
             </Link>
           </nav>