diff --git a/src/lib/components/lists/ListItem.svelte b/src/lib/components/lists/ListItem.svelte
index 5cb5bce..e61d378 100644
--- a/src/lib/components/lists/ListItem.svelte
+++ b/src/lib/components/lists/ListItem.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
+	import { twMerge } from "tailwind-merge";
 
-	export let href: string | null = null;
+	export let href: string | undefined = undefined;
+	export let borderColor: string | undefined = undefined;
+	let classes: string = 'px-4 py-3 flex justify-between items-center first:rounded-t last:rounded-b border-b border-b-neutral-800 last:border-b-0';
+
+	const getBorderColor = () => {
+		if (!borderColor) return 'border-l-0 ml-0.5';
+		return `border-l-2 ml-0 ${borderColor}`;
+	};
 
 	const handleClick = () => {
 		if (!href) return;
@@ -9,11 +17,13 @@
 	};
 </script>
 
-<div class={`px-4 py-3 flex justify-between items-center ${href ? 'cursor-pointer' : ''}`} on:click={handleClick}>
-	<div class="flex items-center space-x-2">
+<div class={twMerge(classes, getBorderColor())} class:cursor-pointer={href} on:click={handleClick}>
+	<div class="flex-1 items-center space-x-2">
 		<slot />
 	</div>
 	{#if href}
-		<iconify-icon icon="lucide:chevron-right" class="text-xl" />
+		<div class="pl-4 flex flex-row items-center">
+			<iconify-icon icon="lucide:chevron-right" class="text-xl" />
+		</div>
 	{/if}
 </div>
diff --git a/src/lib/styles/buttons.scss b/src/lib/styles/buttons.scss
index 04c3dd3..87ac984 100644
--- a/src/lib/styles/buttons.scss
+++ b/src/lib/styles/buttons.scss
@@ -3,8 +3,17 @@
     @apply text-neutral-900 font-display font-normal;
     @apply border border-electric;
     @apply hover:border-electric;
-    @apply hover:to-electric-700 hover:from-electric-600;
-    @apply transition ease-in-out duration-150;
+    @apply hover:to-electric-500 hover:from-electric-500;
+    @apply transition-all ease-in-out duration-150;
+}
+
+.btn-dark {
+	@apply bg-gradient-to-b from-neutral-600 to-neutral-800;
+	@apply text-neutral-100 font-display font-normal;
+	@apply border border-neutral-600;
+	@apply hover:border-neutral-600;
+	@apply hover:to-neutral-600 hover:from-neutral-600;
+	@apply transition-all ease-in-out duration-150;
 }
 
 .btn-transparent {
diff --git a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
index fa79506..ef8e4be 100644
--- a/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
+++ b/src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { invalidateAll } from "$app/navigation";
 	import { page } from "$app/stores";
 	import CollapsibleListItem from '$lib/components/lists/CollapsibleListItem.svelte';
 	import ListItem from '$lib/components/lists/ListItem.svelte';
@@ -6,6 +7,7 @@
 	import StatGroupItem from '$lib/components/stats/StatGroupItem.svelte';
 	import Tag from '$lib/components/Tag.svelte';
 	import { ORGANIZATION_ROUTES } from "$lib/constants/routeConstants";
+	import { errorMessage, successMessage } from "$lib/toast";
 	import 'iconify-icon';
 
 	$: ({ orgId, repository, rules, customRules } = $page.data);
@@ -13,6 +15,19 @@
 	const getNewRuleRoute = (): string => {
 		return ORGANIZATION_ROUTES.REPOSITORY_RULE_NEW(orgId, repository.public_id);
 	}
+
+	const addressSuggestion = (event: Event, publicId: string, accept: boolean) => {
+		event.stopPropagation();
+
+		if (accept) {
+			console.log('Accepting', publicId);
+			successMessage('Rule accepted');
+		} else {
+			console.log('Rejecting', publicId);
+			errorMessage('Rule rejected');
+		}
+		invalidateAll();
+	};
 </script>
 
 <div class="py-10 px-4 space-y-6">
@@ -27,22 +42,66 @@
 		<StatGroupItem title={'Coding Standards'} value={28} />
 	</StatGroup> -->
 
-	<div class="flex flex-row justify-between items-center">
-		<h2 class="text-xl font-semibold">Custom Rules</h2>
-		{#if customRules?.length}
-			<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
-		{/if}
-	</div>
+	<!-- SUGGESTED -->
+	{#if customRules?.length}
+		<div class="flex flex-row items-center space-x-4">
+			<h2 class="text-xl font-semibold">Suggested Rules</h2>
+			<Tag clazz="bg-electric">{customRules?.length}</Tag>
+		</div>
 
-	<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
-		{#if customRules?.length}
+		<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
 			{#each customRules as rule}
-				<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
-					<span>{rule.title}</span>
+				<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-electric">
+					<div class="flex-1 flex flex-row">
+						<div class="flex-1 flex flex-col justify-center space-y-1">
+							<div>
+								<span>{rule.title}</span>
+							</div>
+							{#if rule.tags?.length}
+								<div class="space-x-1 pb-1">
+									{#each rule.tags as tag}
+										<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
+									{/each}
+								</div>
+							{/if}
+						</div>
+						<div class="flex flex-row items-center space-x-2">
+							<div class="lg:tooltip" data-tip="Reject">
+								<button
+									class="btn btn-sm btn-circle w-12 btn-dark"
+									on:click={(e) => addressSuggestion(e, rule.public_id, false)}
+								>
+									<iconify-icon icon="lucide:x" class="text-xl"></iconify-icon>
+								</button>
+							</div>
+							<div class="lg:tooltip" data-tip="Accept">
+								<button
+									class="btn btn-sm btn-circle w-12 btn-electric"
+									on:click={(e) => addressSuggestion(e, rule.public_id, true)}
+								>
+									<iconify-icon icon="lucide:check" class="text-xl"></iconify-icon>
+								</button>
+							</div>
+						</div>
+					</div>
 				</ListItem>
 			{/each}
-		{:else}
-			<div class="p-6 flex flex-col items-center space-y-2">
+		</div>
+	{/if}
+
+	<div class="divider"></div>
+
+	{#if rules?.length}
+		<div class="flex flex-row justify-between items-center">
+			<h2 class="text-xl font-semibold">Code Review Rules</h2>
+			{#if customRules?.length}
+				<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
+			{/if}
+		</div>
+
+		<div class="space-y-2">
+			{#if !customRules?.length}
+			<div class="p-6 flex flex-col items-center space-y-2 bg-neutral-900 rounded border border-neutral-800">
 				<span>
 					<iconify-icon icon="lucide:file-check" class="text-5xl text-neutral-100"></iconify-icon>
 				</span>
@@ -52,54 +111,48 @@
 					<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
 				</div>
 			</div>
-		{/if}
-	</div>
+			{/if}
 
-	{#if rules?.length}
-		<h2 class="text-xl font-semibold">Code Review Rules</h2>
+			<div class="bg-neutral-900 rounded border border-neutral-800">
 
-		<div class="space-y-2">
-			<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
+				<!-- CUSTOM -->
+				{#if customRules?.length}
+					{#each customRules as rule}
+						<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-electric">
+							<div class="space-y-1">
+								<div>
+									<span>{rule.title}</span>
+								</div>
+								{#if rule.tags?.length}
+									<div class="space-x-1 pb-1">
+										{#each rule.tags as tag}
+											<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						</ListItem>
+					{/each}
+				{/if}
+
+				<!-- SQUIRE -->
 				{#each rules as rule}
-					<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
+					<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-icey">
 						<div class="space-y-1">
 							<div>
 								<span>{rule.title}</span>
 							</div>
-							<div class="space-x-1 pb-1">
-								{#each rule.tags as tag}
-									<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
-								{/each}
-							</div>
+							{#if rule.tags?.length}
+								<div class="space-x-1 pb-1">
+									{#each rule.tags as tag}
+										<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
+									{/each}
+								</div>
+							{/if}
 						</div>
 					</ListItem>
 				{/each}
 			</div>
-
-			<!-- {#each frameworks as framework}
-				<CollapsibleListItem>
-					<div slot="top" class="flex-1">
-						<div class="w-full flex flex-row items-center space-x-2">
-							<div class="flex-1">{framework.name}</div>
-							{#if framework.comments > 0}
-								<div class="flex items-center space-x-1 text-gray-400">
-									<iconify-icon icon="lucide:message-square-code" class="text-xl" />
-									<span>{framework.comments}</span>
-								</div>
-							{/if}
-						</div>
-
-					</div>
-					<div slot="bottom" class="divide-y divide-neutral-800">
-						{#each framework.standards as standard}
-							<ListItem href={ORGANIZATION_ROUTES.STANDARD(orgId, repository.public_id, framework.public_id, standard.public_id)}>
-								<Tag clazz="bg-electric">{standard.key}</Tag>
-								<span>{standard.title}</span>
-							</ListItem>
-						{/each}
-					</div>
-				</CollapsibleListItem>
-			{/each} -->
 		</div>
 	{/if}
 </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8e4aa65..f96627c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -42,6 +42,20 @@ export default {
 					800: '#005753',
 					900: '#001F1D',
 					950: '#000302'
+				},
+				icey: {
+					DEFAULT: '#7B61FF',
+					50: '#EEEBFF',
+					100: '#E1DBFF',
+					200: '#C8BDFF',
+					300: '#AE9EFF',
+					400: '#9580FF',
+					500: '#7B61FF',
+					600: '#3F1AFF',
+					700: '#2200D1',
+					800: '#17008A',
+					900: '#0B0042',
+					950: '#05001F'
 				}
 			}
 		}