diff --git a/rubberduckvba.Server/Api/Admin/WebhookController.cs b/rubberduckvba.Server/Api/Admin/WebhookController.cs
index 3015ceb..8f99aab 100644
--- a/rubberduckvba.Server/Api/Admin/WebhookController.cs
+++ b/rubberduckvba.Server/Api/Admin/WebhookController.cs
@@ -22,36 +22,35 @@ public WebhookController(
 
     [Authorize("webhook")]
     [HttpPost("webhook/github")]
-    public async Task<IActionResult> GitHub([FromBody] dynamic body)
-    {
-        //var reader = new StreamReader(Request.Body);
-        //var json = await reader.ReadToEndAsync();
-        string json = body.ToString();
-
-        var payload = JsonSerializer.Deserialize<PushWebhookPayload>(json, new JsonSerializerOptions { PropertyNameCaseInsensitive = true })
-            ?? throw new InvalidOperationException("Could not deserialize payload");
-        var eventType = _validator.Validate(payload, json, Request.Headers, out var content, out var gitref);
-
-        if (eventType == WebhookPayloadType.Push)
-        {
-            var jobId = _hangfire.UpdateXmldocContent();
-            var message = $"Webhook push event was accepted. Tag '{gitref?.Name}' associated to the payload will be processed by JobId '{jobId}'.";
-
-            Logger.LogInformation(message);
-            return Ok(message);
-        }
-        else if (eventType == WebhookPayloadType.Ping)
-        {
-            Logger.LogInformation("Webhook ping event was accepted; nothing to process.");
-            return Ok();
-        }
-        else if (eventType == WebhookPayloadType.Greeting)
+    public async Task<IActionResult> GitHub([FromBody] dynamic body) =>
+        GuardInternalAction(() =>
         {
-            Logger.LogInformation("Webhook push event was accepted; nothing to process. {content}", content);
-            return string.IsNullOrWhiteSpace(content) ? NoContent() : Ok(content);
-        }
-
-        // reject the payload
-        return BadRequest();
-    }
+            string json = body.ToString();
+
+            var payload = JsonSerializer.Deserialize<PushWebhookPayload>(json, new JsonSerializerOptions { PropertyNameCaseInsensitive = true })
+                ?? throw new InvalidOperationException("Could not deserialize payload");
+            var eventType = _validator.Validate(payload, json, Request.Headers, out var content, out var gitref);
+
+            if (eventType == WebhookPayloadType.Push)
+            {
+                var jobId = _hangfire.UpdateXmldocContent();
+                var message = $"Webhook push event was accepted. Tag '{gitref?.Name}' associated to the payload will be processed by JobId '{jobId}'.";
+
+                Logger.LogInformation(message);
+                return Ok(message);
+            }
+            else if (eventType == WebhookPayloadType.Ping)
+            {
+                Logger.LogInformation("Webhook ping event was accepted; nothing to process.");
+                return Ok();
+            }
+            else if (eventType == WebhookPayloadType.Greeting)
+            {
+                Logger.LogInformation("Webhook push event was accepted; nothing to process. {content}", content);
+                return string.IsNullOrWhiteSpace(content) ? NoContent() : Ok(content);
+            }
+
+            // reject the payload
+            return BadRequest();
+        });
 }
diff --git a/rubberduckvba.Server/Api/Auth/AuthController.cs b/rubberduckvba.Server/Api/Auth/AuthController.cs
index 3e76251..05a8818 100644
--- a/rubberduckvba.Server/Api/Auth/AuthController.cs
+++ b/rubberduckvba.Server/Api/Auth/AuthController.cs
@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
 using Octokit;
 using Octokit.Internal;
@@ -23,91 +24,113 @@ public record class SignInViewModel
 }
 
 [ApiController]
-public class AuthController(IOptions<GitHubSettings> configuration, IOptions<ApiSettings> api, ILogger<AuthController> logger) : ControllerBase
+[AllowAnonymous]
+public class AuthController : RubberduckApiController
 {
+    private readonly IOptions<GitHubSettings> configuration;
+
+    public AuthController(IOptions<GitHubSettings> configuration, IOptions<ApiSettings> api, ILogger<AuthController> logger)
+        : base(logger)
+    {
+        this.configuration = configuration;
+    }
+
     [HttpGet("auth")]
+    [AllowAnonymous]
     public IActionResult Index()
     {
-        var claims = HttpContext.User.Claims.ToDictionary(claim => claim.Type, claim => claim.Value);
-        var hasName = claims.TryGetValue(ClaimTypes.Name, out var name);
-        var hasRole = claims.TryGetValue(ClaimTypes.Role, out var role);
-
-        if (hasName && hasRole)
+        return GuardInternalAction(() =>
         {
-            if (string.IsNullOrEmpty(name) || string.IsNullOrWhiteSpace(role))
+            var claims = HttpContext.User.Claims.ToDictionary(claim => claim.Type, claim => claim.Value);
+            var hasName = claims.TryGetValue(ClaimTypes.Name, out var name);
+            var hasRole = claims.TryGetValue(ClaimTypes.Role, out var role);
+
+            if (hasName && hasRole)
             {
-                return BadRequest();
+                if (string.IsNullOrEmpty(name) || string.IsNullOrWhiteSpace(role))
+                {
+                    return BadRequest();
+                }
+
+                var isAuthenticated = HttpContext.User.Identity?.IsAuthenticated ?? false;
+                var model = new UserViewModel
+                {
+                    Name = name,
+                    IsAuthenticated = isAuthenticated,
+                    IsAdmin = role == configuration.Value.OwnerOrg
+                };
+
+                return Ok(model);
             }
-
-            var isAuthenticated = HttpContext.User.Identity?.IsAuthenticated ?? false;
-            var model = new UserViewModel
+            else
             {
-                Name = name,
-                IsAuthenticated = isAuthenticated,
-                IsAdmin = role == configuration.Value.OwnerOrg
-            };
-
-            return Ok(model);
-        }
-        else
-        {
-            return Ok(UserViewModel.Anonymous);
-        }
+                return Ok(UserViewModel.Anonymous);
+            }
+        });
     }
 
     [HttpPost("auth/signin")]
+    [AllowAnonymous]
     public IActionResult SessionSignIn(SignInViewModel vm)
     {
-        if (User.Identity?.IsAuthenticated ?? false)
+        return GuardInternalAction(() =>
         {
-            logger.LogInformation("Signin was requested, but user is already authenticated. Redirecting to home page...");
-            return Redirect("/");
-        }
+            if (User.Identity?.IsAuthenticated ?? false)
+            {
+                Logger.LogInformation("Signin was requested, but user is already authenticated. Redirecting to home page...");
+                return Redirect("/");
+            }
 
-        var clientId = configuration.Value.ClientId;
-        var agent = configuration.Value.UserAgent;
+            var clientId = configuration.Value.ClientId;
+            var agent = configuration.Value.UserAgent;
 
-        var github = new GitHubClient(new ProductHeaderValue(agent));
-        var request = new OauthLoginRequest(clientId)
-        {
-            AllowSignup = false,
-            Scopes = { "read:user", "read:org" },
-            State = vm.State
-        };
-
-        logger.LogInformation("Requesting OAuth app GitHub login url...");
-        var url = github.Oauth.GetGitHubLoginUrl(request);
-        if (url is null)
-        {
-            logger.LogInformation("OAuth login was cancelled by the user or did not return a url.");
-            return Forbid();
-        }
+            var github = new GitHubClient(new ProductHeaderValue(agent));
+            var request = new OauthLoginRequest(clientId)
+            {
+                AllowSignup = false,
+                Scopes = { "read:user", "read:org" },
+                State = vm.State
+            };
 
-        logger.LogInformation("Returning the login url for the client to redirect. State: {xsrf}", vm.State);
-        return Ok(url.ToString());
+            Logger.LogInformation("Requesting OAuth app GitHub login url...");
+            var url = github.Oauth.GetGitHubLoginUrl(request);
+            if (url is null)
+            {
+                Logger.LogInformation("OAuth login was cancelled by the user or did not return a url.");
+                return Forbid();
+            }
+
+            Logger.LogInformation("Returning the login url for the client to redirect. State: {xsrf}", vm.State);
+            return Ok(url.ToString());
+        });
     }
 
     [HttpPost("auth/github")]
-    public async Task<IActionResult> OnGitHubCallback(SignInViewModel vm)
+    [AllowAnonymous]
+    public IActionResult OnGitHubCallback(SignInViewModel vm)
     {
-        logger.LogInformation("OAuth token was received. State: {state}", vm.State);
-        var clientId = configuration.Value.ClientId;
-        var clientSecret = configuration.Value.ClientSecret;
-        var agent = configuration.Value.UserAgent;
+        return GuardInternalAction(() =>
+        {
+            Logger.LogInformation("OAuth token was received. State: {state}", vm.State);
+            var clientId = configuration.Value.ClientId;
+            var clientSecret = configuration.Value.ClientSecret;
+            var agent = configuration.Value.UserAgent;
 
-        var github = new GitHubClient(new ProductHeaderValue(agent));
+            var github = new GitHubClient(new ProductHeaderValue(agent));
 
-        var request = new OauthTokenRequest(clientId, clientSecret, vm.Code);
-        var token = await github.Oauth.CreateAccessToken(request);
-        if (token is null)
-        {
-            logger.LogWarning("OAuth access token was not created.");
-            return Unauthorized();
-        }
+            var request = new OauthTokenRequest(clientId, clientSecret, vm.Code);
+            var token = github.Oauth.CreateAccessToken(request).GetAwaiter().GetResult();
+            if (token is null)
+            {
+                Logger.LogWarning("OAuth access token was not created.");
+                return Unauthorized();
+            }
+
+            Logger.LogInformation("OAuth access token was created. Authorizing...");
+            var authorizedToken = AuthorizeAsync(token.AccessToken).GetAwaiter().GetResult();
 
-        logger.LogInformation("OAuth access token was created. Authorizing...");
-        var authorizedToken = await AuthorizeAsync(token.AccessToken);
-        return authorizedToken is null ? Unauthorized() : Ok(vm with { Token = authorizedToken });
+            return authorizedToken is null ? Unauthorized() : Ok(vm with { Token = authorizedToken });
+        });
     }
 
     private async Task<string?> AuthorizeAsync(string token)
@@ -119,13 +142,13 @@ public async Task<IActionResult> OnGitHubCallback(SignInViewModel vm)
             var githubUser = await github.User.Current();
             if (githubUser.Suspended)
             {
-                logger.LogWarning("User {name} with login '{login}' ({url}) is a suspended GitHub account and will not be authorized.", githubUser.Name, githubUser.Login, githubUser.Url);
+                Logger.LogWarning("User login '{login}' ({name}) is a suspended GitHub account and will not be authorized.", githubUser.Login, githubUser.Name);
                 return default;
             }
 
             var identity = new ClaimsIdentity("github", ClaimTypes.Name, ClaimTypes.Role);
             identity.AddClaim(new Claim(ClaimTypes.Name, githubUser.Login));
-            logger.LogInformation("Creating claims identity for GitHub login '{login}'...", githubUser.Login);
+            Logger.LogInformation("Creating claims identity for GitHub login '{login}'...", githubUser.Login);
 
             var orgs = await github.Organization.GetAllForUser(githubUser.Login);
             var rdOrg = orgs.SingleOrDefault(org => org.Id == configuration.Value.RubberduckOrgId);
@@ -135,7 +158,7 @@ public async Task<IActionResult> OnGitHubCallback(SignInViewModel vm)
                 identity.AddClaim(new Claim(ClaimTypes.Role, configuration.Value.OwnerOrg));
                 identity.AddClaim(new Claim(ClaimTypes.Authentication, token));
                 identity.AddClaim(new Claim("access_token", token));
-                logger.LogDebug("GitHub Organization claims were granted. Creating claims principal...");
+                Logger.LogDebug("GitHub Organization claims were granted. Creating claims principal...");
 
                 var principal = new ClaimsPrincipal(identity);
                 var roles = string.Join(",", identity.Claims.Where(claim => claim.Type == ClaimTypes.Role).Select(claim => claim.Value));
@@ -143,19 +166,19 @@ public async Task<IActionResult> OnGitHubCallback(SignInViewModel vm)
                 HttpContext.User = principal;
                 Thread.CurrentPrincipal = HttpContext.User;
 
-                logger.LogInformation("GitHub user with login {login} has signed in with role authorizations '{role}'.", githubUser.Login, configuration.Value.OwnerOrg);
+                Logger.LogInformation("GitHub user with login {login} has signed in with role authorizations '{role}'.", githubUser.Login, configuration.Value.OwnerOrg);
                 return token;
             }
             else
             {
-                logger.LogWarning("User {name} ({email}) with login '{login}' is not a member of organization ID {org} and will not be authorized.", githubUser.Name, githubUser.Email, githubUser.Login, configuration.Value.RubberduckOrgId);
+                Logger.LogWarning("User {name} ({email}) with login '{login}' is not a member of organization ID {org} and will not be authorized.", githubUser.Name, githubUser.Email, githubUser.Login, configuration.Value.RubberduckOrgId);
                 return default;
             }
         }
         catch (Exception)
         {
             // just ignore: configuration needs the org (prod) client app id to avoid throwing this exception
-            logger.LogWarning("An exception was thrown. Verify GitHub:ClientId and GitHub:ClientSecret configuration; authorization fails.");
+            Logger.LogWarning("An exception was thrown. Verify GitHub:ClientId and GitHub:ClientSecret configuration; authorization fails.");
             return default;
         }
     }
diff --git a/rubberduckvba.Server/Api/Indenter/IndenterController.cs b/rubberduckvba.Server/Api/Indenter/IndenterController.cs
new file mode 100644
index 0000000..80f59b4
--- /dev/null
+++ b/rubberduckvba.Server/Api/Indenter/IndenterController.cs
@@ -0,0 +1,63 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using RubberduckServices;
+
+namespace rubberduckvba.Server.Api.Indenter;
+
+[AllowAnonymous]
+public class IndenterController : RubberduckApiController
+{
+    private readonly IIndenterService service;
+
+    public IndenterController(IIndenterService service, ILogger<IndenterController> logger)
+        : base(logger)
+    {
+        this.service = service;
+    }
+
+    [HttpGet("indenter/version")]
+    [AllowAnonymous]
+    public IActionResult Version() =>
+        GuardInternalAction(() => Ok(service.IndenterVersion()));
+
+    [HttpGet("indenter/defaults")]
+    [AllowAnonymous]
+    public IActionResult DefaultSettings() =>
+        GuardInternalAction(() =>
+        {
+            var result = new IndenterViewModel
+            {
+                IndenterVersion = service.IndenterVersion(),
+                Code = "Option Explicit\n\n'...comments...\n\nPublic Sub DoSomething()\n'...comments...\n\nEnd Sub\nPublic Sub DoSomethingElse()\n'...comments...\n\nIf True Then\nMsgBox \"Hello, world!\"\nElse\n'...comments...\nExit Sub\nEnd If\nEnd Sub\n",
+                AlignCommentsWithCode = true,
+                EmptyLineHandlingMethod = IndenterEmptyLineHandling.Indent,
+                ForceCompilerDirectivesInColumn1 = true,
+                GroupRelatedProperties = false,
+                IndentSpaces = 4,
+                IndentCase = true,
+                IndentEntireProcedureBody = true,
+                IndentEnumTypeAsProcedure = true,
+                VerticallySpaceProcedures = true,
+                LinesBetweenProcedures = 1,
+                IndentFirstCommentBlock = true,
+                IndentFirstDeclarationBlock = true,
+                EndOfLineCommentStyle = IndenterEndOfLineCommentStyle.SameGap,
+            };
+
+            return Ok(result);
+        });
+
+    [HttpPost("indenter/indent")]
+    [AllowAnonymous]
+    public IActionResult Indent(IndenterViewModel model) =>
+        GuardInternalAction(() =>
+        {
+            if (model is null)
+            {
+                throw new ArgumentNullException(nameof(model));
+            }
+
+            var result = service.IndentAsync(model).GetAwaiter().GetResult();
+            return Ok(result);
+        });
+}
diff --git a/rubberduckvba.Server/Program.cs b/rubberduckvba.Server/Program.cs
index e867d05..3bc58fb 100644
--- a/rubberduckvba.Server/Program.cs
+++ b/rubberduckvba.Server/Program.cs
@@ -7,6 +7,7 @@
 using NLog.Config;
 using NLog.Extensions.Logging;
 using NLog.Targets;
+using Rubberduck.SmartIndenter;
 using RubberduckServices;
 using rubberduckvba.Server.Api.Admin;
 using rubberduckvba.Server.ContentSynchronization;
@@ -42,6 +43,35 @@ public static void Main(string[] args)
         builder.Services.Configure<ApiSettings>(options => builder.Configuration.GetSection("Api").Bind(options));
         builder.Services.Configure<HangfireSettings>(options => builder.Configuration.GetSection("Hangfire").Bind(options));
 
+        builder.Services.AddCors(builder =>
+        {
+            builder.AddDefaultPolicy(policy =>
+            {
+                policy
+                    .SetIsOriginAllowed(origin => true)
+                    .AllowAnyHeader()
+                    .WithMethods("OPTIONS", "GET", "POST")
+                    .AllowCredentials()
+                    .Build();
+            });
+
+            builder.AddPolicy("webhookPolicy", policy =>
+            {
+                policy
+#if DEBUG
+                    .SetIsOriginAllowed(origin => true)
+#else
+                    .SetIsOriginAllowedToAllowWildcardSubdomains()
+                    .WithOrigins("*.github.com")
+#endif
+                    .WithHeaders("Content-Type", "X-GitHub-Event", "X-GitHub-Delivery", "X-GitHub-Hook-ID", "X-Hub-Signature", "X-Hub-Signature256")
+                    .WithMethods("POST")
+                    .DisallowCredentials()
+                    .SetPreflightMaxAge(TimeSpan.FromHours(48))
+                    .Build();
+            });
+        });
+
         builder.Services.AddAuthentication(options =>
         {
             options.RequireAuthenticatedSignIn = false;
@@ -88,22 +118,14 @@ public static void Main(string[] args)
         app.UseHttpsRedirection();
 
         app.UseRouting();
-        app.UseSession();
+        app.UseCors();
         app.UseAuthentication();
         app.UseAuthorization();
+        app.UseSession();
 
         app.MapControllers();
         app.MapFallbackToFile("/index.html");
 
-        app.UseCors(policy =>
-        {
-            policy
-                .AllowAnyMethod()
-                .AllowAnyHeader()
-                .AllowCredentials()
-                .SetIsOriginAllowed(origin => true);
-        });
-
         StartHangfire(app);
         app.Run();
     }
@@ -162,6 +184,8 @@ private static void ConfigureServices(IServiceCollection services)
         services.AddSingleton<ConfigurationOptions>();
         services.AddSingleton<IMarkdownFormattingService, MarkdownFormattingService>();
         services.AddSingleton<ISyntaxHighlighterService, SyntaxHighlighterService>();
+        services.AddSingleton<IIndenterService, IndenterService>();
+        services.AddSingleton<ISimpleIndenter, SimpleIndenter>();
         services.AddSingleton<WebhookHeaderValidationService>();
         services.AddSingleton<WebhookPayloadValidationService>();
         services.AddSingleton<WebhookSignatureValidationService>();
diff --git a/rubberduckvba.Server/RubberduckApiController.cs b/rubberduckvba.Server/RubberduckApiController.cs
index 3e5125c..2f40dbf 100644
--- a/rubberduckvba.Server/RubberduckApiController.cs
+++ b/rubberduckvba.Server/RubberduckApiController.cs
@@ -17,39 +17,6 @@ protected RubberduckApiController(ILogger logger)
 
     protected ILogger Logger => _logger;
 
-
-    protected async Task<IActionResult> GuardInternalActionAsync(Func<Task<IActionResult>> method, [CallerMemberName] string name = default!)
-    {
-        var sw = Stopwatch.StartNew();
-        IActionResult result = NoContent();
-        var success = false;
-        try
-        {
-            _logger.LogTrace("GuardInternalActionAsync:{name} | ▶ Invoking controller action", name);
-            result = await method.Invoke();
-            success = true;
-        }
-        catch (Exception exception)
-        {
-            _logger.LogError(exception, "GuardInternalActionAsync:{name} | ❌ An exception was caught", name);
-            throw;
-        }
-        finally
-        {
-            sw.Stop();
-            if (success)
-            {
-                _logger.LogTrace("GuardInternalActionAsync:{name} | ✔️ Controller action completed | ⏱️ {elapsed}", name, sw.Elapsed);
-            }
-            else
-            {
-                _logger.LogWarning("GuardInternalActionAsync:{name} | ⚠️ Controller action completed with errors", name);
-            }
-        }
-
-        return result;
-    }
-
     protected IActionResult GuardInternalAction(Func<IActionResult> method, [CallerMemberName] string name = default!)
     {
         var sw = Stopwatch.StartNew();
@@ -79,6 +46,7 @@ protected IActionResult GuardInternalAction(Func<IActionResult> method, [CallerM
             }
         }
 
+        //Response.Headers.AccessControlAllowOrigin = "*";
         return result;
     }
 }
diff --git a/rubberduckvba.Server/rubberduckvba.Server.csproj b/rubberduckvba.Server/rubberduckvba.Server.csproj
index e7a6e35..7af4d85 100644
--- a/rubberduckvba.Server/rubberduckvba.Server.csproj
+++ b/rubberduckvba.Server/rubberduckvba.Server.csproj
@@ -41,4 +41,10 @@
     </ProjectReference>
   </ItemGroup>
 
+  <ItemGroup>
+    <Reference Include="Rubberduck.SmartIndenter">
+      <HintPath>..\RubberduckServices\Libs\Rubberduck.SmartIndenter.dll</HintPath>
+    </Reference>
+  </ItemGroup>
+
 </Project>
diff --git a/rubberduckvba.client/src/app/app.component.html b/rubberduckvba.client/src/app/app.component.html
index 36f9caa..ad19940 100644
--- a/rubberduckvba.client/src/app/app.component.html
+++ b/rubberduckvba.client/src/app/app.component.html
@@ -1,11 +1,17 @@
 <body>
-    <app-nav-menu></app-nav-menu>
-    <main class="container">
-        <router-outlet></router-outlet>
-    </main>
-    <hr />
     <section>
-        <div class="row text-muted text-center mb-3">
+        <app-nav-menu></app-nav-menu>
+    </section>
+
+    <section>
+        <main class="container">
+            <router-outlet></router-outlet>
+        </main>
+    </section>
+
+    <section>
+        <div class="text-muted text-center mb-3">
+            <hr />
             <div class="float-start">&copy; 2014-{{currentYear}} Rubberduck Project Contributors</div>
         </div>
     </section>
diff --git a/rubberduckvba.client/src/app/app.component.ts b/rubberduckvba.client/src/app/app.component.ts
index 5d8c5a9..58dc64c 100644
--- a/rubberduckvba.client/src/app/app.component.ts
+++ b/rubberduckvba.client/src/app/app.component.ts
@@ -1,4 +1,3 @@
-import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
diff --git a/rubberduckvba.client/src/app/app.module.ts b/rubberduckvba.client/src/app/app.module.ts
index 0427b9a..1c4f01b 100644
--- a/rubberduckvba.client/src/app/app.module.ts
+++ b/rubberduckvba.client/src/app/app.module.ts
@@ -1,16 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-
-import { DataService } from './services/data.service';
-import { AdminApiClientService, ApiClientService } from './services/api-client.service';
+import { FormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, UrlSerializer } from '@angular/router';
 
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+import { DataService } from './services/data.service';
+import { ApiClientService } from './services/api-client.service';
+
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
+import { LoadingContentComponent } from './components/loading-content/loading-content.component';
 import { TagDownloadComponent } from './components/tag-download/tag-download.component';
 import { DownloadItemComponent } from './components/download-item/download-item.component';
 import { FeatureBoxComponent } from './components/feature-box/feature-box.component';
@@ -18,7 +21,6 @@ import { FeatureInfoComponent } from './components/feature-info/feature-info.com
 import { FeatureItemBoxComponent } from './components/feature-item-box/feature-item-box.component';
 import { ExampleBoxComponent } from './components/example-box/example-box.component';
 import { FeatureItemExampleComponent } from './components/quickfix-example.modal/quickfix-example.modal.component';
-import { LoadingContentComponent } from './components/loading-content/loading-content.component';
 import { InspectionItemBoxComponent } from './components/feature-item-box/inspection-item-box/inspection-item-box.component';
 import { AnnotationItemBoxComponent } from './components/feature-item-box/annotation-item-box/annotation-item-box.component';
 import { BlogLinkBoxComponent } from './components/blog-link-box/blog-link-box.component';
@@ -31,10 +33,11 @@ import { FeatureComponent } from './routes/feature/feature.component';
 import { InspectionComponent } from './routes/inspection/inspection.component';
 import { AnnotationComponent } from './routes/annotation/annotation.component';
 import { QuickFixComponent } from './routes/quickfixes/quickfix.component';
+import { IndenterComponent } from './routes/indenter/indenter.component';
 
 import { DefaultUrlSerializer, UrlTree } from '@angular/router';
-import { AuthMenuComponent } from './components/auth-menu/auth-menu.component';
 import { AuthComponent } from './routes/auth/auth.component';
+import { AuthMenuComponent } from './components/auth-menu/auth-menu.component';
 
 /**
  * https://stackoverflow.com/a/39560520
@@ -55,6 +58,8 @@ export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
     AppComponent,
     HomeComponent,
     AuthComponent,
+    AuthMenuComponent,
+    IndenterComponent,
     FeaturesComponent,
     FeatureComponent,
     TagDownloadComponent,
@@ -73,13 +78,13 @@ export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
     InspectionComponent,
     AnnotationComponent,
     QuickFixComponent,
-    AboutComponent,
-    AuthMenuComponent
+    AboutComponent
   ],
   bootstrap: [AppComponent],
   imports: [
-    BrowserModule,
     CommonModule,
+    BrowserModule,
+    FormsModule,
     RouterModule.forRoot([
       { path: '', component: HomeComponent, pathMatch: 'full' },
       { path: 'features', component: FeaturesComponent },
@@ -89,6 +94,7 @@ export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
       { path: 'quickfixes/:name', component: QuickFixComponent },
       { path: 'about', component: AboutComponent },
       { path: 'auth/github', component: AuthComponent },
+      { path: 'indenter', component: IndenterComponent },
       // legacy routes:
       { path: 'inspections/details/:name', redirectTo: 'inspections/:name' },
     ]),
@@ -98,7 +104,6 @@ export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
   providers: [
     DataService,
     ApiClientService,
-    AdminApiClientService,
     provideHttpClient(withInterceptorsFromDi()),
     {
       provide: UrlSerializer,
@@ -106,4 +111,5 @@ export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
     }
   ]
 })
+
 export class AppModule { }
diff --git a/rubberduckvba.client/src/app/components/auth-menu/auth-menu.component.ts b/rubberduckvba.client/src/app/components/auth-menu/auth-menu.component.ts
index eb1c88b..672b29c 100644
--- a/rubberduckvba.client/src/app/components/auth-menu/auth-menu.component.ts
+++ b/rubberduckvba.client/src/app/components/auth-menu/auth-menu.component.ts
@@ -1,4 +1,3 @@
-/// <reference path="../../app.module.ts" />
 import { Component, OnInit, TemplateRef, ViewChild, inject } from "@angular/core";
 import { FaIconLibrary } from "@fortawesome/angular-fontawesome";
 import { BehaviorSubject } from "rxjs";
@@ -6,8 +5,8 @@ import { UserViewModel } from "../../model/feature.model";
 import { AuthService } from "src/app/services/auth.service";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { fab } from "@fortawesome/free-brands-svg-icons";
-import { NgbModal, NgbToast } from "@ng-bootstrap/ng-bootstrap";
-import { AdminApiClientService, ApiClientService } from "../../services/api-client.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { ApiClientService } from "../../services/api-client.service";
 
 @Component({
   selector: 'auth-menu',
@@ -29,7 +28,7 @@ export class AuthMenuComponent implements OnInit {
   @ViewChild('confirmxmldocsbox', { read: TemplateRef }) confirmxmldocsbox: TemplateRef<any> | undefined;
   public modal = inject(NgbModal);
 
-  constructor(private auth: AuthService, private api: AdminApiClientService, private fa: FaIconLibrary) {
+  constructor(private auth: AuthService, private api: ApiClientService, private fa: FaIconLibrary) {
     fa.addIconPacks(fas);
     fa.addIconPacks(fab);
   }
diff --git a/rubberduckvba.client/src/app/components/example-box/example-box.component.html b/rubberduckvba.client/src/app/components/example-box/example-box.component.html
index 02d004d..d4a189c 100644
--- a/rubberduckvba.client/src/app/components/example-box/example-box.component.html
+++ b/rubberduckvba.client/src/app/components/example-box/example-box.component.html
@@ -1,7 +1,7 @@
 <div class="accordion" id="exampleBoxAccordion">
     <div class="card my-2">
         <div class="card-header bg-light-subtle my-0 py-0" id="exampleBoxHeading">
-            <div *ngIf="isInspection && inspectionExample" class="btn btn-link text-nowrap text-decoration-none w-100" role="button" data-toggle="collapse" data-target="#featureItemBoxCollapseBody" aria-controls="featureItemBoxCollapseBody" (click)="inspectionExample.isCollapsed = !inspectionExample.isCollapsed">
+            <div *ngIf="isInspection && inspectionExample" class="btn btn-link text-nowrap text-decoration-none w-100" role="button" data-bs-toggle="collapse" data-bs-target="#featureItemBoxCollapseBody" aria-controls="featureItemBoxCollapseBody" (click)="inspectionExample.isCollapsed = !inspectionExample.isCollapsed">
                 <div class="row my-0 py-0">
                     <div class="col-1">
                         &nbsp;
@@ -20,7 +20,7 @@ <h4>
                 </div>
             </div>
 
-            <div *ngIf="isQuickFix && quickFixExample" class="btn btn-link text-nowrap text-decoration-none w-100" role="button" data-toggle="collapse" data-target="#featureItemBoxCollapseBody" aria-controls="featureItemBoxCollapseBody" (click)="quickFixExample.isCollapsed = !quickFixExample.isCollapsed">
+            <div *ngIf="isQuickFix && quickFixExample" class="btn btn-link text-nowrap text-decoration-none w-100" role="button" data-bs-toggle="collapse" data-bs-target="#featureItemBoxCollapseBody" aria-controls="featureItemBoxCollapseBody" (click)="quickFixExample.isCollapsed = !quickFixExample.isCollapsed">
                 <div class="row my-0 py-0">
                     <div class="col-1">
                         &nbsp;
@@ -39,7 +39,7 @@ <h4>
                 </div>
             </div>
 
-            <div *ngIf="isAnnotation && annotationExample" class="btn btn-link text-nowrap text-decoration-none w-100" role="button" data-toggle="collapse" data-target="#featureItemBoxCollapseBody" aria-controls="featureItemBoxCollapseBody" (click)="annotationExample.isCollapsed = !annotationExample.isCollapsed">
+            <div *ngIf="isAnnotation && annotationExample" class="btn btn-link text-nowrap text-decoration-none w-100" role="button" data-bs-toggle="collapse" data-bs-target="#featureItemBoxCollapseBody" aria-controls="featureItemBoxCollapseBody" (click)="annotationExample.isCollapsed = !annotationExample.isCollapsed">
                 <div class="row my-0 py-0">
                     <div class="col-1">
                         &nbsp;
diff --git a/rubberduckvba.client/src/app/components/loading-content/loading-content.component.ts b/rubberduckvba.client/src/app/components/loading-content/loading-content.component.ts
index 65ec935..6e20f5a 100644
--- a/rubberduckvba.client/src/app/components/loading-content/loading-content.component.ts
+++ b/rubberduckvba.client/src/app/components/loading-content/loading-content.component.ts
@@ -1,11 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange, SimpleChanges, TemplateRef, ViewChild, inject } from '@angular/core';
-import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { Tag, TagDownloadInfo } from '../../model/tags.model';
-import { BehaviorSubject } from 'rxjs';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { AngularDeviceInformationService } from 'angular-device-information';
+import { Component, Input } from '@angular/core';
 
 @Component({
   //standalone: true,
diff --git a/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.html b/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.html
index f9f1a98..c63520a 100644
--- a/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.html
+++ b/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.html
@@ -18,6 +18,9 @@
                     <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }">
                         <a class="nav-link text-dark" [class.fw-bold]="isAboutPage" href="/about">About</a>
                     </li>
+                    <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }">
+                        <a class="nav-link text-dark" [class.fw-bold]="isIndenterPage" href="/indenter">Indenter</a>
+                    </li>
                     <li *ngIf="tagDownloads.length > 0" class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }">
                         <!-- if API failed, features page will just hang -->
                         <a class="nav-link text-dark" [class.fw-bold]="isFeaturesPage" href="/features">Features</a>
diff --git a/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.ts b/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.ts
index 4a2a35a..b88cba2 100644
--- a/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.ts
+++ b/rubberduckvba.client/src/app/components/nav-menu/nav-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ApiClientService } from '../../services/api-client.service';
 import { DownloadInfo } from '../../model/downloads.model';
 import { fab } from '@fortawesome/free-brands-svg-icons';
@@ -8,7 +8,6 @@ import { filter, map } from 'rxjs/operators';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { Router, NavigationEnd } from '@angular/router';
 import { AngularDeviceInformationService } from 'angular-device-information';
-import { AuthService } from "src/app/services/auth.service";
 
 @Component({
   selector: 'app-nav-menu',
@@ -20,6 +19,7 @@ export class NavMenuComponent implements OnInit {
   public isHomePage: boolean = true;
   public isFeaturesPage: boolean = false;
   public isAboutPage: boolean = false;
+  public isIndenterPage: boolean = false;
 
   public isExpanded: boolean = false;
   public canDownload: boolean = false;
@@ -38,7 +38,8 @@ export class NavMenuComponent implements OnInit {
         const url = navEnd.urlAfterRedirects;
         this.isFeaturesPage = url.startsWith('/features');
         this.isAboutPage = url.startsWith('/about');
-        this.isHomePage = !(this.isFeaturesPage || this.isAboutPage);
+        this.isIndenterPage = url.startsWith('/indenter');
+        this.isHomePage = !(this.isFeaturesPage || this.isAboutPage || this.isIndenterPage);
       });
   }
 
diff --git a/rubberduckvba.client/src/app/model/indenter.model.ts b/rubberduckvba.client/src/app/model/indenter.model.ts
new file mode 100644
index 0000000..ec06a38
--- /dev/null
+++ b/rubberduckvba.client/src/app/model/indenter.model.ts
@@ -0,0 +1,122 @@
+export enum IndenterEmptyLineHandling {
+  ignore = 0,
+  remove = 1,
+  indent = 2
+}
+
+export enum IndenterEndOfLineCommentStyle {
+  absolute = 0,
+  sameGap = 1,
+  standardGap = 2,
+  alignInColumn = 3
+}
+
+
+export interface IndenterViewModel {
+  indenterVersion: string;
+  code: string;
+  indentedCode: string;
+
+  // indent
+  indentSpaces: number;
+  emptyLineHandlingMethod: IndenterEmptyLineHandling;
+  indentEntireProcedureBody: boolean;
+  indentFirstDeclarationBlock: boolean;
+  indentFirstCommentBlock: boolean;
+  ignoreEmptyLinesInFirstBlock: boolean;
+  indentEnumTypeAsProcedure: boolean;
+  indentCase: boolean;
+
+  // outdent
+  //indentCompilerDirectives: boolean;
+  forceCompilerDirectivesInColumn1: boolean;
+  forceDebugPrintInColumn1: boolean;
+  forceDebugAssertInColumn1: boolean;
+  forceDebugStatementsInColumn1: boolean;
+  forceStopInColumn1: boolean;
+
+  // alignment
+  alignContinuations: boolean;
+  ignoreOperatorsInContinuations: boolean;
+  alignDims: boolean;
+  alignDimColumn: number;
+
+
+  // comments
+  alignCommentsWithCode: boolean;
+  endOfLineCommentStyle: IndenterEndOfLineCommentStyle;
+  endOfLineCommentColumnSpaceAlignment: number;
+
+  // vertical spacing
+  groupRelatedProperties: boolean;
+  verticallySpaceProcedures: boolean;
+  linesBetweenProcedures: number;
+}
+
+export class IndenterVersionViewModelClass {
+  public version: string;
+  constructor(version: string){
+    this.version = version;
+  }
+}
+
+export class IndenterViewModelClass implements IndenterViewModel {
+  indenterVersion: string;
+  code: string;
+  indentedCode: string;
+  indentSpaces: number;
+  emptyLineHandlingMethod: IndenterEmptyLineHandling;
+  indentEntireProcedureBody: boolean;
+  indentFirstDeclarationBlock: boolean;
+  indentFirstCommentBlock: boolean;
+  ignoreEmptyLinesInFirstBlock: boolean;
+  indentEnumTypeAsProcedure: boolean;
+  indentCase: boolean;
+  //indentCompilerDirectives: boolean;
+  forceCompilerDirectivesInColumn1: boolean;
+  forceStopInColumn1: boolean;
+  forceDebugPrintInColumn1: boolean;
+  forceDebugAssertInColumn1: boolean;
+  forceDebugStatementsInColumn1: boolean;
+  alignContinuations: boolean;
+  ignoreOperatorsInContinuations: boolean;
+  alignDims: boolean;
+  alignDimColumn: number;
+  alignCommentsWithCode: boolean;
+  endOfLineCommentStyle: IndenterEndOfLineCommentStyle;
+  endOfLineCommentColumnSpaceAlignment: number;
+  groupRelatedProperties: boolean;
+  verticallySpaceProcedures: boolean;
+  linesBetweenProcedures: number;
+
+  constructor(model: IndenterViewModel) {
+    this.indenterVersion = model.indenterVersion;
+    this.code = model.code;
+    this.indentedCode = model.indentedCode ?? model.code;
+
+    this.indentSpaces = model.indentSpaces;
+    this.emptyLineHandlingMethod = model.emptyLineHandlingMethod;
+    this.indentEntireProcedureBody = model.indentEntireProcedureBody;
+    this.indentFirstDeclarationBlock = model.indentFirstDeclarationBlock;
+    this.indentFirstCommentBlock = model.indentFirstCommentBlock;
+    this.ignoreEmptyLinesInFirstBlock = model.ignoreEmptyLinesInFirstBlock;
+    this.indentEnumTypeAsProcedure = model.indentEnumTypeAsProcedure;
+    this.indentCase = model.indentCase;
+    //this.indentCompilerDirectives = model.indentCompilerDirectives;
+    this.forceCompilerDirectivesInColumn1 = model.forceCompilerDirectivesInColumn1;
+    this.forceStopInColumn1 = model.forceStopInColumn1;
+    this.forceDebugPrintInColumn1 = model.forceDebugPrintInColumn1;
+    this.forceDebugAssertInColumn1 = model.forceDebugAssertInColumn1;
+    this.forceDebugStatementsInColumn1 = model.forceDebugStatementsInColumn1;
+    this.alignContinuations = model.alignContinuations;
+    this.ignoreOperatorsInContinuations = model.ignoreOperatorsInContinuations;
+    this.alignDims = model.alignDims;
+    this.alignDimColumn = model.alignDimColumn;
+    this.alignCommentsWithCode = model.alignCommentsWithCode;
+    this.endOfLineCommentStyle = model.endOfLineCommentStyle;
+    this.endOfLineCommentColumnSpaceAlignment = model.endOfLineCommentColumnSpaceAlignment;
+    this.groupRelatedProperties = model.groupRelatedProperties;
+    this.verticallySpaceProcedures = model.verticallySpaceProcedures;
+    this.linesBetweenProcedures = model.linesBetweenProcedures;
+  }
+}
diff --git a/rubberduckvba.client/src/app/routes/about/about.component.html b/rubberduckvba.client/src/app/routes/about/about.component.html
index 78497c0..905baf7 100644
--- a/rubberduckvba.client/src/app/routes/about/about.component.html
+++ b/rubberduckvba.client/src/app/routes/about/about.component.html
@@ -56,7 +56,7 @@ <h2>Privacy Policy</h2>
         </div>
         <hr />
 
-        <h2>Attributions</h2>
+        <h2><a id="attributions" href="about#attributions" class="text-decoration-none">Attributions</a></h2>
 
         <p>Rubberduck was made possible with the combined knowledge of many people, and depends on several libraries and projects.</p>
 
@@ -131,7 +131,7 @@ <h2>Attributions</h2>
                 <li>
                     <div class="card">
                         <div class="card-body">
-                            <fa-icon [icon]="'heart'"></fa-icon>&nbsp;<a class="text-decoration-none" href="https://web.archive.org/web/20180806191001fw_/http://www.oaltd.co.uk/Indenter/Default.htm/">Smart Indenter</a>
+                            <fa-icon [icon]="'heart'"></fa-icon>&nbsp;<a class="text-decoration-none" href="http://www.oaltd.co.uk/Indenter/">Smart Indenter</a>
                             <p class="small text-black-50">The original Smart Indenter VBIDE add-in VB6 source code that served as a reference.</p>
                         </div>
                     </div>
diff --git a/rubberduckvba.client/src/app/routes/home/home.component.html b/rubberduckvba.client/src/app/routes/home/home.component.html
index 7a46ac3..fb5610e 100644
--- a/rubberduckvba.client/src/app/routes/home/home.component.html
+++ b/rubberduckvba.client/src/app/routes/home/home.component.html
@@ -161,4 +161,3 @@ <h1>Resources</h1>
         <iframe id='kofiframe' src='https://ko-fi.com/rubberduckvba/?hidefeed=true&widget=true&embed=true&preview=true' style='border:none;width:100%;padding:4px;background:#f9f9f9;' height='600' title='rubberduckvba'></iframe>
     </div>
 </section>
-
diff --git a/rubberduckvba.client/src/app/routes/indenter/indenter.component.css b/rubberduckvba.client/src/app/routes/indenter/indenter.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/rubberduckvba.client/src/app/routes/indenter/indenter.component.html b/rubberduckvba.client/src/app/routes/indenter/indenter.component.html
new file mode 100644
index 0000000..f09964e
--- /dev/null
+++ b/rubberduckvba.client/src/app/routes/indenter/indenter.component.html
@@ -0,0 +1,463 @@
+
+<section *ngIf="model" class="row text-center my-3">
+    <div>
+        <h1>Online Indenter</h1>
+        <p>
+            Consistent identation is one of the most fundemntal qualities of code that is clean and clear.
+            Rubberduck makes indenting a procedure, module, or even an entire project, quick and simple.
+        </p>
+        <p>
+            With all the functionalities of the legendary 32-bit <strong><a href="/about#attributions">Smart Indenter</a></strong> add-in, and then some,
+            Rubberduck lets you configure <em>many</em> indenting options: feel free to use this page to experiment with them.
+        </p>
+    </div>
+</section>
+
+<section *ngIf="model" class="row my-3">
+    <div class="col-lg-6 accordion">
+
+        <!-- Indent Options -->
+        <div class="card my-2">
+            <div class="card-header bg-light-subtle">
+                <div role="button" class="btn btn-link text-nowrap text-decoration-none w-100" data-bs-toggle="collapse" data-bs-target="#group_IndentationOptions" aria-controls="group_IndentationOptions" (click)="isIndentOptionsExpanded = !isIndentOptionsExpanded">
+                    <div class="row">
+                        <div class="col-11 text-start">
+                            <h3>Indentation Options</h3>
+                        </div>
+                        <div class="col-1 text-end">
+                            <div class="float-end">
+                                <h4>
+                                    <fa-icon *ngIf="isIndentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-up']"></fa-icon>
+                                    <fa-icon *ngIf="!isIndentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-down']"></fa-icon>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="group_IdentationOptions" class="collapse card-body" [ngClass]="{ show: isIndentOptionsExpanded }">
+                <div class="form-group form-check">
+                    <label class="form-text fw-bold d-inline-block" for="indentSpacesBox">Indent spaces</label>
+                    <span class="m-2">
+                        <input id="indentSpacesBox" type="number" [(ngModel)]="model.indentSpaces" min="1" max="9" [required]="true" class="text-center p-1" />
+                    </span>
+                    <div>
+                        <small class="text-muted form-text">The size (in spaces) of an indentation level</small>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group form-check">
+                    <label class="form-text fw-bold d-inline-block" for="indentEmptyLinesHandlingBox">Empty lines</label>
+                    <span class="m-2">
+                        <select id="indentEmptyLinesHandlingBox" [(ngModel)]="model.emptyLineHandlingMethod" class="text-center p-1">
+                            <option value="0">Ignore</option>
+                            <option value="1">Remove</option>
+                            <option value="2">Indent</option>
+                        </select>
+                    </span>
+                    <div>
+                        <small id="empty-line-handling-description" class="form-text text-muted">Specifies whether and how to handle empty lines</small>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="indentProcBodyBox">
+                            <input id="indentProcBodyBox" type="checkbox" [(ngModel)]="model.indentEntireProcedureBody" />
+                            Indent procedure body
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">If checked, procedure scopes add an indentation level</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="indentFirstDeclBlockBox">
+                            <input id="indentFirstDeclBlockBox" type="checkbox" [(ngModel)]="model.indentFirstDeclarationBlock" />
+                            Indent first declaration block
+                        </label>
+                        <small class="text-muted form-text">If checked, a block of declarations at the top of a procedure adds an indentation level</small>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="indentFirstCommentBlockBox">
+                            <input id="indentFirstCommentBlockBox" type="checkbox" [(ngModel)]="model.indentFirstCommentBlock" />
+                            Indent first comment block
+                        </label>
+                        <small class="text-muted form-text">If checked, a block of comments at the top of a procedure adds an indentation level</small>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label id="indent-ignore-firstblock-emptylines-label" class="form-check-label" for="ignoreEmptyLinesBox">
+                            <input id="ignoreEmptyLinesBox" type="checkbox" [(ngModel)]="model.ignoreEmptyLinesInFirstBlock" />
+                            Ignore empty lines in first block comments
+                        </label>
+                        <small id="indent-ignore-firstblock-emptylines-help" class="text-muted form-text">If checked, the first block of comments can include empty lines</small>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="indentEnumBox">
+                            <input id="indentEnumBox" type="checkbox" [(ngModel)]="model.indentEnumTypeAsProcedure" />
+                            Indent Enum members
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">If checked, <code>Enum</code> members add an indentation level</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="indentCaseBox">
+                            <input id="indentCaseBox" type="checkbox" [(ngModel)]="model.indentCase" />
+                            Indent Case
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">If checked, <code>Case</code> blocks add an indentation level</small>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+        <!-- Outdent Options -->
+        <div class="card my-2">
+            <div class="card-header bg-light-subtle">
+                <div role="button" class="btn btn-link text-nowrap text-decoration-none w-100" data-bs-toggle="collapse" data-bs-target="#group_OutdentingOptions" aria-controls="group_OutdentingOptions" (click)="isOutdentOptionsExpanded = !isOutdentOptionsExpanded">
+                    <div class="row">
+                        <div class="col-11 text-start">
+                            <h3>Outdent Options</h3>
+                        </div>
+                        <div class="col-1 text-end">
+                            <div class="float-end">
+                                <h4>
+                                    <fa-icon *ngIf="isOutdentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-up']"></fa-icon>
+                                    <fa-icon *ngIf="!isOutdentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-down']"></fa-icon>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="group_OutdentingOptions" class="collapse card-body" [ngClass]="{ show: isOutdentOptionsExpanded }">
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="outdentPrecompilerBox">
+                            <input id="outdentPrecompilerBox" type="checkbox" [(ngModel)]="model.forceCompilerDirectivesInColumn1" />
+                            Outdent precompiler directives
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">Forces precompiler directives into column 1 regardless of current indentation level</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="outdentDebugPrintBox">
+                            <input id="outdentDebugPrintBox" type="checkbox" [(ngModel)]="model.forceDebugPrintInColumn1" />
+                            Outdent Debug.Print statements
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">Forces <code>Debug.Print</code> statements into column 1 regardless of current indentation level</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="outdentDebugAssertBox">
+                            <input id="outdentDebugAssertBox" type="checkbox" [(ngModel)]="model.forceDebugAssertInColumn1" />
+                            Outdent Debug.Assert statements
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">Forces <code>Debug.Assert</code> statements into column 1 regardless of current indentation level</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="outdentStopBox">
+                            <input id="outdentStopBox" type="checkbox" [(ngModel)]="model.forceStopInColumn1" />
+                            Outdent Stop statements
+                        </label>
+                        <div>
+                            <small class="text-muted form-text">Forces <code>Stop</code> statements into column 1 regardless of current indentation level</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Align Options -->
+        <div class="card my-2">
+            <div class="card-header bg-light-subtle">
+                <div role="button" class="btn btn-link text-nowrap text-decoration-none w-100" data-bs-toggle="collapse" data-bs-target="#group_AlignmentOptions" aria-controls="group_AlignmentOptions" (click)="isAlignmentOptionsExpanded = !isAlignmentOptionsExpanded">
+                    <div class="row">
+                        <div class="col-11 text-start">
+                            <h3>Alignment Options</h3>
+                        </div>
+                        <div class="col-1 text-end">
+                            <div class="float-end">
+                                <h4>
+                                    <fa-icon *ngIf="isAlignmentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-up']"></fa-icon>
+                                    <fa-icon *ngIf="!isAlignmentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-down']"></fa-icon>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="group_AlignmentOptions" class="collapse card-body" [ngClass]="{ show: isAlignmentOptionsExpanded }">
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="alignContinuationsBox">
+                            <input id="alignContinuationsBox" type="checkbox" [(ngModel)]="model.alignContinuations" />
+                            Align continuations
+                        </label>
+                        <div>
+                            <small class="text-muted form-text"></small>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="ignoreOperatorsBox">
+                            <input id="ignoreOperatorsBox" type="checkbox" [(ngModel)]="model.ignoreOperatorsInContinuations" [disabled]="!model.alignContinuations" />
+                            Ignore operators in continuations
+                        </label>
+                        <div>
+                            <small class="text-muted form-text"></small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="alignDimsBox">
+                            <input id="alignDimsBox" type="checkbox" [(ngModel)]="model.alignDims" />
+                            Align Dim statements into column
+                        </label>
+                        <div>
+                            <small class="text-muted form-text"></small>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="dimsColumnBox">
+                            <input id="dimsColumnBox" type="number" [(ngModel)]="model.alignDimColumn" min="1" max="99" [required]="true" [disabled]="!model.alignDims" />
+                        </label>
+                        <div>
+                            <small class="text-muted form-text"></small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Comment Options -->
+        <div class="card my-2">
+            <div class="card-header bg-light-subtle">
+                <div role="button" class="btn btn-link text-nowrap text-decoration-none w-100" data-bs-toggle="collapse" data-bs-target="#group_CommentOptions" aria-controls="group_CommentOptions" (click)="isCommentOptionsExpanded = !isCommentOptionsExpanded">
+                    <div class="row">
+                        <div class="col-11 text-start">
+                            <h3>Comment Options</h3>
+                        </div>
+                        <div class="col-1 text-end">
+                            <div class="float-end">
+                                <h4>
+                                    <fa-icon *ngIf="isCommentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-up']"></fa-icon>
+                                    <fa-icon *ngIf="!isCommentOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-down']"></fa-icon>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="group_CommentOptions" class="collapse card-body" [ngClass]="{ show: isCommentOptionsExpanded }">
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="alignCommentsBox">
+                            <input id="alignCommentsBox" type="checkbox" [(ngModel)]="model.alignCommentsWithCode" />
+                            Align comments with code
+                        </label>
+                        <div>
+                            <small id="align-comments-help" class="form-text text-muted">If checked, comment lines will be made to follow indentation levels</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="eolCommentsBox">
+                            End-of-line comments
+                            <select [(ngModel)]="model.endOfLineCommentStyle">
+                                <option value="0">Absolute</option>
+                                <option value="1">Same gap</option>
+                                <option value="2">Standard gap</option>
+                                <option value="3">Aligned</option>
+                            </select>
+                        </label>
+                        <div>
+                            <small id="line-ending-comments-help" class="form-text text-muted"></small>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" *ngIf="model.endOfLineCommentStyle == 3">
+                    <div class="form-check">
+                        <label class="form-check-label" for="eolCommentsColumnBox">
+                            Column:
+                            <input id="eolCommentsColumnBox" class="text-center" type="number" [(ngModel)]="model.endOfLineCommentColumnSpaceAlignment" min="1" max="99" [required]="true" [disabled]="!model.endOfLineCommentColumnSpaceAlignment" />
+                        </label>
+                        <div>
+                            <small id="line-ending-comment-column-help" class="form-text text-muted">End-of-line comments will begin at that column whenever possible</small>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Vertical Options -->
+        <div class="card my-2">
+            <div class="card-header bg-light-subtle">
+                <div role="button" class="btn btn-link text-nowrap text-decoration-none w-100" data-bs-toggle="collapse" data-bs-target="#group_VerticalSpacingOptions" aria-controls="group_VerticalSpacingOptions" (click)="isVerticalOptionsExpanded = !isVerticalOptionsExpanded">
+                    <div class="row">
+                        <div class="col-11 text-start">
+                            <h3>Vertical Spacing Options</h3>
+                        </div>
+                        <div class="col-1 text-end">
+                            <div class="float-end">
+                                <h4>
+                                    <fa-icon *ngIf="isVerticalOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-up']"></fa-icon>
+                                    <fa-icon *ngIf="!isVerticalOptionsExpanded" class="mt-2" [icon]="['fas', 'chevron-down']"></fa-icon>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="group_VerticalSpacingOptions" class="collapse card-body" [ngClass]="{ show: isVerticalOptionsExpanded }">
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="groupPropertiesBox">
+                            <input id="groupPropertiesBox" type="checkbox" [(ngModel)]="model.groupRelatedProperties" />
+                            Regroup same-name property members
+                        </label>
+                        <div>
+                            <small class="form-text text-muted">Removes all spaces between <code>Get</code>, <code>Let</code>, and <code>Set</code> accessors of Property members</small>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <div class="form-group">
+                    <div class="form-check">
+                        <label class="form-check-label" for="vspaceBox">
+                            <input id="vspaceBox" type="checkbox" [(ngModel)]="model.verticallySpaceProcedures" />
+                            Maintain vertical space between procedures
+                        </label>
+                        <div>
+                            <small class="form-text text-muted">Consistently keeps the specified number of empty lines between the members of a module</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" *ngIf="model.verticallySpaceProcedures">
+                    <div class="form-check">
+                        <label class="form-check-label" for="vspaceLinesBox">
+                            Lines:
+                            <input id="vspaceLinesBox" class="text-center" type="number" [(ngModel)]="model.endOfLineCommentColumnSpaceAlignment" min="1" max="2" [required]="true" [disabled]="!model.linesBetweenProcedures" />
+                        </label>
+                        <div>
+                            <small id="vertical-spacing-lines-help" class="form-text text-muted">The number of empty lines to maintain between procedures</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- API Info -->
+        <div class="card my-2">
+            <div class="card-header bg-light-subtle">
+                <div role="button" class="btn btn-link text-nowrap text-decoration-none w-100" data-bs-toggle="collapse" data-bs-target="#group_ApiOptions" aria-controls="group_ApiOptions" (click)="isApiAboutBoxExpanded = !isApiAboutBoxExpanded">
+                    <div class="row">
+                        <div class="col-11 text-start">
+                            <h3>API</h3>
+                        </div>
+                        <div class="col-1 text-end">
+                            <div class="float-end">
+                                <h4>
+                                    <fa-icon *ngIf="isApiAboutBoxExpanded" class="mt-2" [icon]="['fas', 'chevron-up']"></fa-icon>
+                                    <fa-icon *ngIf="!isApiAboutBoxExpanded" class="mt-2" [icon]="['fas', 'chevron-down']"></fa-icon>
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="group_VerticalSpacingOptions" class="collapse card-body" [ngClass]="{ show: isApiAboutBoxExpanded }">
+                <h4 class="card-title">Looking for a programmatic approach?</h4>
+                <div class="card-body">
+                    Try the API:
+                    <ol>
+                        <li>Request (GET) <code>api.rubberduckvba.com/indenter/defaults</code> to get a JSON object for the model (or copy it from below);</li>
+                        <li>Provide the code to be indented in the 'Code' property; use <code>\n</code> for newline characters;</li>
+                        <li>Post (POST) the JSON object to <code>api.rubberduckvba.com/indenter/indent</code> to get the indented code back as an array of strings.</li>
+                    </ol>
+                    <textarea id="template-json" class="code-area form-control font-monospace" rows="15" readonly [innerHTML]="asJson"></textarea>
+                </div>
+
+                <div class="card-footer">
+                    <button id="copy-template" class="btn btn-secondary mx-1" type="button">
+                        <span><i class="fa fa-clipboard"></i>&nbsp;Copy</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="card-header">
+                <h4>Try it right here!</h4>
+                <small class="card-text text-muted">Rubberduck.SmartIndenter.dll version: {{model.indenterVersion}}</small>
+            </div>
+            <div class="card-body">
+                <label class="form-text" for="indent-code"><fa-icon [icon]="'paste'"></fa-icon>&nbsp;Paste code to indent here:</label>
+                <textarea [(ngModel)]="model.code" (ngModelChange)="onModelChanged($event)" id="indentCode" class="code-area form-control font-monospace text-nowrap mt-2" rows="20" contenteditable="true"></textarea>
+            </div>
+            <div class="card-footer">
+                <button type="button" id="indent-button" class="btn btn-primary mx-1" (click)="indent()" [disabled]="model.code.length == 0">
+                    <span [hidden]="!isIndenterBusy" id="indent-busy-indicator" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                    <span id="indent-button-text">Indent</span>
+                </button>
+                <button id="copy-code" class="btn mx-1" [ngClass]="wasCopied ? 'btn-success' : 'btn-secondary'" type="button" [disabled]="model.code.length == 0" (click)="copy()">
+                    <span><fa-icon [icon]="'clipboard'"></fa-icon>&nbsp;{{wasCopied ? 'Copied!' : 'Copy'}}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- <div class="row"> -->
+    <!--     <div class="col-12"> -->
+    <!--         <img class="ducky my-2 w-10 hover-enlarge" alt="Rubberduck logo" src="../../assets/vector-ducky-dark.svg" /> -->
+    <!--     </div> -->
+    <!-- </div> -->
+
+    <div class="row">
+        <!-- TODO  -->
+    </div>
+
+</section>
diff --git a/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts b/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts
new file mode 100644
index 0000000..78f7244
--- /dev/null
+++ b/rubberduckvba.client/src/app/routes/indenter/indenter.component.ts
@@ -0,0 +1,65 @@
+import { Component, OnInit } from "@angular/core";
+import { FaIconLibrary } from "@fortawesome/angular-fontawesome";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { IndenterViewModel } from "../../model/indenter.model";
+import { ApiClientService } from "../../services/api-client.service";
+
+@Component({
+  selector: 'app-indenter',
+  templateUrl: './indenter.component.html',
+})
+export class IndenterComponent implements OnInit {
+  private _model!: IndenterViewModel;
+  public wasCopied: boolean = false;
+
+
+  constructor(fa: FaIconLibrary, private service: ApiClientService) {
+    fa.addIconPacks(fas);
+  }
+
+  ngOnInit(): void {
+    this.service.getIndenterDefaults().subscribe(model => {
+      this._model = model;
+    });
+  }
+
+  public isExpanded: boolean = false;
+  public isIndentOptionsExpanded: boolean = true;
+  public isOutdentOptionsExpanded: boolean = false;
+  public isAlignmentOptionsExpanded: boolean = false;
+  public isCommentOptionsExpanded: boolean = false;
+  public isVerticalOptionsExpanded: boolean = false;
+  public isApiAboutBoxExpanded: boolean = true;
+
+  public isIndenterBusy: boolean = false;
+
+  public get model(): IndenterViewModel {
+    return this._model;
+  }
+
+  public get asJson(): string {
+    return JSON.stringify(this._model);
+  }
+
+  public indent(): void {
+    this.isIndenterBusy = true;
+    this.service.indent(this.model).subscribe(vm => {
+      this.model.indentedCode = vm.indentedCode;
+      this.model.code = vm.indentedCode;
+      this.isIndenterBusy = false;
+    });
+  }
+
+  public clear(): void {
+    this.model.code = '';
+  }
+
+  public copy(): void {
+    navigator.clipboard.writeText(this.model.code).then(e => this.wasCopied = true);
+  }
+
+  public onModelChanged(code: string): void {
+    this.model.code = code;
+    this.wasCopied = false;
+  }
+}
diff --git a/rubberduckvba.client/src/app/services/api-client.service.ts b/rubberduckvba.client/src/app/services/api-client.service.ts
index 69584e0..c6ea06c 100644
--- a/rubberduckvba.client/src/app/services/api-client.service.ts
+++ b/rubberduckvba.client/src/app/services/api-client.service.ts
@@ -5,6 +5,7 @@ import { DownloadInfo } from "../model/downloads.model";
 import { DataService } from "./data.service";
 import { environment } from "../../environments/environment.prod";
 import { Observable, map } from "rxjs";
+import { IndenterVersionViewModelClass, IndenterViewModel, IndenterViewModelClass } from "../model/indenter.model";
 
 @Injectable()
 export class ApiClientService {
@@ -53,13 +54,6 @@ export class ApiClientService {
     const url = `${environment.apiBaseUrl}quickfixes/${name}`
     return this.data.getAsync<QuickFixViewModel>(url).pipe(map(e => new QuickFixViewModelClass(e)));
   }
-}
-
-@Injectable()
-export class AdminApiClientService {
-
-  constructor(private data: DataService) {
-  }
 
   public updateTagMetadata(): Observable<number> {
     const url = `${environment.apiBaseUrl}admin/update/tags`;
@@ -70,4 +64,17 @@ export class AdminApiClientService {
     const url = `${environment.apiBaseUrl}admin/update/xmldoc`;
     return this.data.postAsync(url);
   }
+
+  public getIndenterDefaults(): Observable<IndenterViewModel> {
+    const url = `${environment.apiBaseUrl}indenter/defaults`;
+    return this.data.getAsync<IndenterViewModel>(url).pipe(map(model => new IndenterViewModelClass(model)));
+  }
+
+  public indent(model: IndenterViewModel): Observable<IndenterViewModel> {
+    const url = `${environment.apiBaseUrl}indenter/indent`;
+    return this.data.postAsync<IndenterViewModel, string[]>(url, model).pipe(map(lines => {
+      model.indentedCode = lines.join('\n');
+      return model;
+    }));
+  }
 }
diff --git a/rubberduckvba.client/src/app/services/data.service.ts b/rubberduckvba.client/src/app/services/data.service.ts
index 9721dd5..4b1f094 100644
--- a/rubberduckvba.client/src/app/services/data.service.ts
+++ b/rubberduckvba.client/src/app/services/data.service.ts
@@ -1,7 +1,6 @@
 import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { Injectable, Query } from "@angular/core";
+import { Injectable } from "@angular/core";
 import { map, timeout, catchError, throwError, Observable } from "rxjs";
-import { ApiClientService } from "./api-client.service";
 
 @Injectable()
 export class DataService {
@@ -14,14 +13,14 @@ export class DataService {
   public getAsync<TResult>(url: string): Observable<TResult> {
     let headers = new HttpHeaders()
       .append('accept', 'application/json');
-
     const token = sessionStorage.getItem('github:access_token');
+    let withCreds = false;
     if (token) {
-      headers = headers.append('X-ACCESS-TOKEN', token)
-        .append('Access-Control-Allow-Origin', '*');
+      headers = headers.append('X-ACCESS-TOKEN', token);
+      withCreds = true;
     }
 
-    return this.http.get(url, { headers })
+    return this.http.get(url, { headers, withCredentials: withCreds })
       .pipe(
         map(result => <TResult>result),
         timeout(this.timeout),
@@ -34,17 +33,19 @@ export class DataService {
 
   public postAsync<TContent, TResult>(url: string, content?: TContent): Observable<TResult> {
     let headers = new HttpHeaders()
+      .append('Access-Control-Allow-Origin', '*')
       .append('accept', 'application/json')
       .append('Content-Type', 'application/json; charset=utf-8');
-
     const token = sessionStorage.getItem('github:access_token');
+    let withCreds = false;
     if (token) {
       headers = headers.append('X-ACCESS-TOKEN', token);
+      withCreds = true;
     }
 
     return (content
-      ? this.http.post(url, content, { headers })
-      : this.http.post(url, { headers }))
+      ? this.http.post(url, content, { headers, withCredentials:withCreds })
+      : this.http.post(url, { headers, withCredentials: withCreds }))
       .pipe(
         map(result => <TResult>result),
         timeout(this.timeout),