diff --git a/templates/group/settings/layout_footer.tmpl b/templates/group/settings/layout_footer.tmpl
new file mode 100644
index 0000000000..bd72b35c4f
--- /dev/null
+++ b/templates/group/settings/layout_footer.tmpl
@@ -0,0 +1,11 @@
+{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+<div class="page-content">
+	<div class="repo-layout-right">
+		<div>
+			{{/* block: repo-setting-content */}}
+			{{end}}
+
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/group/settings/layout_head.tmpl b/templates/group/settings/layout_head.tmpl
new file mode 100644
index 0000000000..64eb6becdc
--- /dev/null
+++ b/templates/group/settings/layout_head.tmpl
@@ -0,0 +1,14 @@
+{{template "base/head" .ctxData}}
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+	{{template "group/header" .ctxData}}
+	<div class="ui container flex-container">
+		{{template "group/settings/navbar" .ctxData}}
+		<div class="flex-container-main">
+			{{template "base/alert" .ctxData}}
+			{{/* block: group-setting-content */}}
+
+			{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
+		</div>
+	</div>
+</div>
+{{end}}
diff --git a/templates/group/settings/navbar.tmpl b/templates/group/settings/navbar.tmpl
new file mode 100644
index 0000000000..c5f01ae6ee
--- /dev/null
+++ b/templates/group/settings/navbar.tmpl
@@ -0,0 +1,27 @@
+<div class="flex-container-nav">
+	<div class="ui fluid vertical menu">
+		<div class="header item">{{ctx.Locale.Tr "group.settings"}}</div>
+		<a class="{{if .PageIsSettingsOptions}}active {{end}}item" href="{{.OrgGroupLink}}/settings">
+			{{ctx.Locale.Tr "group.settings.options"}}
+		</a>
+		{{if .EnableActions}}
+			<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets .PageIsSharedSettingsVariables}}open{{end}}>
+				<summary>{{ctx.Locale.Tr "actions.actions"}}</summary>
+				<div class="menu">
+					<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{.OrgGroupLink}}/settings/actions/runners">
+						{{ctx.Locale.Tr "actions.runners"}}
+					</a>
+					<a class="{{if .PageIsSharedSettingsSecrets}}active {{end}}item" href="{{.OrgGroupLink}}/settings/actions/secrets">
+						{{ctx.Locale.Tr "secrets.secrets"}}
+					</a>
+					<a class="{{if .PageIsSharedSettingsVariables}}active {{end}}item" href="{{.OrgGroupLink}}/settings/actions/variables">
+						{{ctx.Locale.Tr "actions.variables"}}
+					</a>
+				</div>
+			</details>
+		{{end}}
+		<a class="{{if .PageIsSettingsDelete}}active {{end}}item" href="{{.OrgGroupLink}}/settings/delete">
+			{{ctx.Locale.Tr "org.settings.delete"}}
+		</a>
+	</div>
+</div>
diff --git a/templates/group/settings/options.tmpl b/templates/group/settings/options.tmpl
new file mode 100644
index 0000000000..8cd3c4afbe
--- /dev/null
+++ b/templates/group/settings/options.tmpl
@@ -0,0 +1,56 @@
+{{template "group/settings/layout_head" (dict "ctxData" . "pageClass" "repo-group settings options")}}
+<h4 class="ui top attached header">
+	{{ctx.Locale.Tr "group.settings.options"}}
+</h4>
+<div class="ui attached segment">
+	<form class="ui form" action="{{.Link}}" method="post">
+		{{.CsrfTokenHtml}}
+		<div class="required field {{if .Err_Name}}error{{end}}">
+			<label for="group_name">
+				{{ctx.Locale.Tr "group.group_name_holder"}}
+			</label>
+			<input id="group_name" name="name" value="{{.Group.Name}}" data-group-name="{{.Group.Name}}" autofocus required
+						 maxlength="40">
+		</div>
+		<div class="divider"></div>
+		<div class="field" id="visibility_box">
+			<label for="visibility">{{ctx.Locale.Tr "group.settings.visibility"}}</label>
+			<div class="field">
+				<div class="ui radio checkbox">
+					<input class="enable-system-radio" name="visibility" type="radio" value="0" {{if eq .CurrentVisibility 0}}checked{{end}}>
+					<label>{{ctx.Locale.Tr "group.settings.visibility.public"}}</label>
+				</div>
+			</div>
+			<div class="field">
+				<div class="ui radio checkbox">
+					<input class="enable-system-radio" name="visibility" type="radio" value="1" {{if eq .CurrentVisibility 1}}checked{{end}}>
+					<label>{{ctx.Locale.Tr "group.settings.visibility.limited"}}</label>
+				</div>
+			</div>
+			<div class="field">
+				<div class="ui radio checkbox">
+					<input class="enable-system-radio" name="visibility" type="radio" value="2" {{if eq .CurrentVisibility 2}}checked{{end}}>
+					<label>{{ctx.Locale.Tr "group.settings.visibility.private"}}</label>
+				</div>
+			</div>
+		</div>
+		<div class="field">
+			<button class="ui primary button">{{ctx.Locale.Tr "group.settings.update_settings"}}</button>
+		</div>
+	</form>
+	<div class="divider"></div>
+
+	<form class="ui form" action="{{.Link}}/avatar" method="post" enctype="multipart/form-data">
+		{{.CsrfTokenHtml}}
+		<div class="inline field">
+			<label for="avatar">{{ctx.Locale.Tr "settings.choose_new_avatar"}}</label>
+			<input name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+		</div>
+
+		<div class="field">
+			<button class="ui primary button">{{ctx.Locale.Tr "settings.update_avatar"}}</button>
+			<button class="ui red button link-action" data-url="{{.Link}}/avatar/delete">{{ctx.Locale.Tr "settings.delete_current_avatar"}}</button>
+		</div>
+	</form>
+</div>
+{{template "group/settings/layout_footer" .}}