diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index 359a8af77..6394a0697 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -37,27 +37,8 @@ function FilterListDetails(props: any) {
                <div className="card-body p-2">
                    <div className="container m-0">
                        <div className="row">
-                           <div className="col-9">
-                               <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
-                               <ul className="list-group list-group-flush">
-                                   <Languages languages={props.details.languages}/>
-                                   <PublishedDate date={props.details.publishedDate}/>
-                                   <DiscontinuedDate date={props.details.discontinuedDate}/>
-                                   <License license={props.details.license}/>
-                               </ul>
-                           </div>
-                           <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end">
-                               <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
-                               <ViewUrl url={props.details.viewUrl} name={props.details.name}/>
-                               <HomeUrl url={props.details.homeUrl} name={props.details.name}/>
-                               <PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
-                               <DonateUrl url={props.details.donateUrl} name={props.details.name}/>
-                               <IssuesUrl url={props.details.issuesUrl} name={props.details.name}/>
-                               <ForumUrl url={props.details.forumUrl} name={props.details.name}/>
-                               <ChatUrl url={props.details.chatUrl} name={props.details.name}/>
-                               <SubmissionUrl url={props.details.submissionUrl} name={props.details.name}/>
-                               <EmailAddress email={props.details.emailAddress} name={props.details.name}/>
-                           </div>
+                           <ListInfo details={props.details}/>
+                           <ListUrls details={props.details}/>
                        </div>
                        <div className="row">
                            <Maintainers maintainers={props.details.maintainers}/>
@@ -67,6 +48,33 @@ function FilterListDetails(props: any) {
            </div>;
 }
 
+function ListInfo(props: any) {
+    return <div className="col-9">
+               <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
+               <ul className="list-group list-group-flush">
+                   <Languages languages={props.details.languages}/>
+                   <PublishedDate date={props.details.publishedDate}/>
+                   <DiscontinuedDate date={props.details.discontinuedDate}/>
+                   <License license={props.details.license}/>
+               </ul>
+           </div>;
+}
+
+function ListUrls(props: any) {
+    return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end">
+               <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
+               <ViewUrl url={props.details.viewUrl} name={props.details.name}/>
+               <HomeUrl url={props.details.homeUrl} name={props.details.name}/>
+               <PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
+               <DonateUrl url={props.details.donateUrl} name={props.details.name}/>
+               <IssuesUrl url={props.details.issuesUrl} name={props.details.name}/>
+               <ForumUrl url={props.details.forumUrl} name={props.details.name}/>
+               <ChatUrl url={props.details.chatUrl} name={props.details.name}/>
+               <SubmissionUrl url={props.details.submissionUrl} name={props.details.name}/>
+               <EmailAddress email={props.details.emailAddress} name={props.details.name}/>
+           </div>;
+}
+
 function Description(props: any) {
     return props.description
         ? (props.url
@@ -223,51 +231,57 @@ function Maintainer(props: any) {
                    <h3 className="card-header">Maintained by {props.maintainer.name}</h3>
                    <div className="container pt-1">
                        <div className="row">
-                           <div className="col-9">
-                               {props.maintainer.additionalLists.length > 0
-                                   ? <div>
-                                         <h4>More by {props.maintainer.name}:</h4>
-                                         <ul>
-                                             {props.maintainer.additionalLists.map(
-                                                 (list: any) => <MaintainerAdditionalList list={list} key={list.id
-                                                     .toString()}/>)}
-                                         </ul>
-                                     </div>
-                                   : null}
-                           </div>
-                           <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end" role="group">
-                               {props.maintainer.homeUrl
-                                   ? <a href={props.maintainer.homeUrl
-} className="btn btn-primary fl-btn-details-action"
-                                        title={`View the home page of ${props.maintainer.name}.`}>
-                                         Home
-                                     </a>
-                                   : null}
-                               {props.maintainer.emailAddress
-                                   ? <a href={`mailto:${props.maintainer.emailAddress}`}
-                                        className="btn btn-primary fl-btn-details-action"
-                                        title={`Email ${props.maintainer.name}.`}>
-                                         Email
-                                     </a>
-                                   : null}
-                               {props.maintainer.twitterHandle
-                                   ? <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
-                                        className="btn btn-primary fl-btn-details-action"
-                                        title={`View the Twitter page of ${props.maintainer.name}.`}>
-                                         Twitter
-                                     </a>
-                                   : null}
-                           </div>
+                           <MaintainerAdditionalLists maintainer={props.maintainer}/>
+                           <MaintainerUrls maintainer={props.maintainer}/>
                        </div>
                    </div>
                </div>
            </div>;
 }
 
+function MaintainerAdditionalLists(props: any) {
+    return <div className="col-9">
+               {props.maintainer.additionalLists.length > 0
+                   ? <div>
+                         <h4>More by {props.maintainer.name}:</h4>
+                         <ul>
+                             {props.maintainer.additionalLists.map(
+                                 (list: any) => <MaintainerAdditionalList list={list} key={list.id.toString()}/>)}
+                         </ul>
+                     </div>
+                   : null}
+           </div>;
+}
+
 function MaintainerAdditionalList(props: any) {
     return <li>{props.list.name}</li>;
 }
 
+function MaintainerUrls(props: any) {
+    return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end" role="group">
+               {props.maintainer.homeUrl
+                   ? <a href={props.maintainer.homeUrl} className="btn btn-primary fl-btn-details-action"
+                        title={`View the home page of ${props.maintainer.name}.`}>
+                         Home
+                     </a>
+                   : null}
+               {props.maintainer.emailAddress
+                   ? <a href={`mailto:${props.maintainer.emailAddress}`}
+                        className="btn btn-primary fl-btn-details-action"
+                        title={`Email ${props.maintainer.name}.`}>
+                         Email
+                     </a>
+                   : null}
+               {props.maintainer.twitterHandle
+                   ? <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
+                        className="btn btn-primary fl-btn-details-action"
+                        title={`View the Twitter page of ${props.maintainer.name}.`}>
+                         Twitter
+                     </a>
+                   : null}
+           </div>;
+}
+
 interface IFilterListDetailsDto {
     chatUrl: string;
     description: string;
@@ -284,6 +298,7 @@ interface IFilterListDetailsDto {
     policyUrl: string;
     publishedDate: string;
     submissionUrl: string;
+    syntax: IListSyntaxDto[];
     viewUrl: string;
 }
 
@@ -304,4 +319,15 @@ interface IListMaintainerDto {
 interface IMaintainerAdditionalListsDto {
     id: number;
     name: string;
+}
+
+interface IListSyntaxDto {
+    definitionUrl: string;
+    name: string;
+    supportedSoftware: ISyntaxSupportedSoftwareDto[];
+}
+
+interface ISyntaxSupportedSoftwareDto {
+    homeUrl: string;
+    name: string;
 }
\ No newline at end of file