Model in Layout breaks other pages

I have a design flaw based on my lack of MVC4 experience.

The issue is that I have a model in my Layout...

@model BasicFinanceUI.Models.LoginModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>

    <title>@ViewBag.Title</title>
</head>

The reason it's on my Layout, is that the Login button is on the layout screen, and it launches a modal popup, which has fiends that use the model.

So, at the bottom of the layout, I have:

<div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Login</h3>
                <div class="modal-body">
                    @using (Html.BeginForm("LoginUser", "User"))
                    {
                        <p>
                            @Html.LabelFor(x => x.Username)
                            @Html.TextBoxFor(x => x.Username)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.Password)
                            @Html.PasswordFor(x => x.Password)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.RememberMe)
                            @Html.CheckBoxFor(x => x.RememberMe)
                        </p>
                        <div class="modal-footer">
                            <input type="submit" value="Login" name="btn_login" class="btn btn-default" />
                            <a class="btn btn-primary" data-dismiss="modal">Cancel</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

I also have a Login and Logout button on my /Home/Index, so the user see's two login buttons when on the default page. One on the main page, and one in the header/menu, which is shared.

I think having the model, and probably all the Login screen code, on the Layout page, might be the problem here. How should I be implementing this?

I need the Login button on the Index.cshtml page (Default), and the button in the Layout's menu at the top. And both use the model popup code shown above.

First build the view like you have it but instead of using helpers just build the html fields. Make sure you put an id or a class on the fields that we can use as a selector

<input type="text" class="txtUserName" /> etc

then make sure you have jquery referenced on the page and put this on the bottom of your screen

<script type="text/javascript">
    $(document).ready(function(){
        $('.btnSubmit').on('click', function(){
            $.ajax({
                url: "@(Url.Action("Action", "Controller")",
                type: "POST",
                contentType: "application/json",
                data: { UserName: $('.txtUserName').val(), Password: $('.txtPassword').val() }
                cache: false,
                async: true,
                success: function (result) {
                    alert('Login Successful!');
                    window.location = "@Url.Action("Index", "Controller")";
                }
            });
        });
    });
</script>

then on your controller you need to have a method set up to receive the ajax call

[HttpPost]
public ActionResult Login(string UserName, string Password){
    //Check the user name and password against the database
    //from here http://stackoverflow.com/questions/10608198/asp-net-mvc3-returning-success-jsonresult
    var result=new { Success="True", Message="Success"};
    return Json(result, JsonRequestBehavior.AllowGet);
}