diff --git a/capella_model_explorer/backend/explorer.py b/capella_model_explorer/backend/explorer.py
index c56c541..e324c22 100644
--- a/capella_model_explorer/backend/explorer.py
+++ b/capella_model_explorer/backend/explorer.py
@@ -286,7 +286,9 @@ async def post_compare(commit_range: CommitRange):
                     self.model, commit_range.head, commit_range.prev
                 )
                 self.diff["lookup"] = create_diff_lookup(self.diff["objects"])
-                return {"success": True}
+                if self.diff["lookup"]:
+                    return {"success": True}
+                return {"success": False, "error": "No model changes to show"}
             except Exception as e:
                 LOGGER.exception("Failed to compare versions")
                 return {"success": False, "error": str(e)}
@@ -301,8 +303,11 @@ async def post_object_diff(object_id: ObjectDiffID):
 
         @self.router.get("/api/commits")
         async def get_commits():
-            result = model_diff.populate_commits(self.model)
-            return result
+            try:
+                result = model_diff.populate_commits(self.model)
+                return result
+            except Exception as e:
+                return {"error": str(e)}
 
         @self.router.get("/api/diff")
         async def get_diff():
diff --git a/capella_model_explorer/backend/model_diff.py b/capella_model_explorer/backend/model_diff.py
index c4f7cce..dad95c2 100644
--- a/capella_model_explorer/backend/model_diff.py
+++ b/capella_model_explorer/backend/model_diff.py
@@ -168,7 +168,7 @@ def _get_revision_info(
         .strip()
         .split("\x00")
     )
-    subject = description.splitlines()[0]
+    subject = description.splitlines()[0] if description.splitlines() else ""
     try:
         tag = subprocess.check_output(
             ["git", "tag", "--points-at", revision],
diff --git a/frontend/src/components/CommitInformation.jsx b/frontend/src/components/CommitInformation.jsx
new file mode 100644
index 0000000..ebad513
--- /dev/null
+++ b/frontend/src/components/CommitInformation.jsx
@@ -0,0 +1,46 @@
+// Copyright DB InfraGO AG and contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const CommitInformation = ({
+  commitDetails,
+  isExpanded,
+  toggleExpand,
+  section
+}) => {
+  return (
+    <div className="text-left">
+      <p>
+        <span className="font-semibold">Hash:</span> {commitDetails.hash}
+      </p>
+      {commitDetails.tag && (
+        <p>
+          <span className="font-semibold">Tag:</span> {commitDetails.tag}
+        </p>
+      )}
+      <p>
+        <span className="font-semibold">Author:</span> {commitDetails.author}
+      </p>
+      <p style={{ whiteSpace: 'pre-wrap' }}>
+        <span className="font-semibold">Description:</span>{' '}
+        {isExpanded
+          ? commitDetails.description
+          : `${commitDetails.description.split('\n')[0]}${
+              commitDetails.description.includes('\n') ? '' : ''
+            }`}
+      </p>
+      {commitDetails.description.includes('\n') && (
+        <button
+          className="mb-4 mt-2 font-normal text-custom-blue
+            hover:text-custom-blue-hover"
+          onClick={() => toggleExpand(section)}>
+          {isExpanded ? 'Show Less' : 'Show Full Description'}
+        </button>
+      )}
+      <p>
+        <span className="font-semibold">Date:</span> {commitDetails.date}
+      </p>
+    </div>
+  );
+};
+
+export default CommitInformation;
diff --git a/frontend/src/components/ModelDiff.jsx b/frontend/src/components/ModelDiff.jsx
index 0c086a9..c62ee41 100644
--- a/frontend/src/components/ModelDiff.jsx
+++ b/frontend/src/components/ModelDiff.jsx
@@ -4,65 +4,72 @@
 import { API_BASE_URL, ROUTE_PREFIX } from '../APIConfig';
 import { useState } from 'react';
 import { Spinner } from './Spinner';
+import CommitInformation from './CommitInformation';
 
 export const ModelDiff = ({ onRefetch, hasDiffed }) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [completeLoading, setCompleteLoading] = useState(false);
-  const [commitDetails, setCommitDetails] = useState({});
+  const [loadingState, setLoadingState] = useState('idle');
+  const [commitDetails, setCommitDetails] = useState([]);
   const [selectionOptions, setSelectionOptions] = useState([]);
   const [isPopupVisible, setIsPopupVisible] = useState(false);
-  const [selectedDetails, setSelectedDetails] = useState('');
+  const [selectedDetails, setSelectedDetails] = useState(null);
   const [error, setError] = useState('');
   const [selectedOption, setSelectedOption] = useState('');
-  const [isExpandedHead, setIsExpandedHead] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState({
+    head: false,
+    details: false
+  });
+  const [diffSuccess, setDiffSuccess] = useState(null);
 
   const handleSelectChange = (e) => {
-    const option = e.target.value;
-    setSelectedOption(option);
-    const selectedValue = JSON.parse(e.target.value);
-    setSelectedDetails(selectedValue);
-    setIsExpanded(false);
+    const option = JSON.parse(e.target.value);
+    setSelectedOption(e.target.value);
+    setSelectedDetails(option);
+    setIsExpanded((prev) => ({ ...prev, details: false }));
   };
 
   const handleGenerateDiff = async () => {
-    if (!commitDetails[0].hash || !selectedDetails.hash) {
+    const headCommit = commitDetails[0]?.hash;
+    const selectedCommit = selectedDetails?.hash;
+
+    if (!headCommit || !selectedCommit) {
       alert('Please select a version.');
       return;
     }
-    setCompleteLoading(false);
-    setIsLoading(true);
+
+    setLoadingState('loading');
+    setError('');
+
     try {
-      const url = API_BASE_URL + '/compare';
-      const response = await postData(url, {
-        head: commitDetails[0].hash,
-        prev: selectedDetails.hash
+      const response = await postData(`${API_BASE_URL}/compare`, {
+        head: headCommit,
+        prev: selectedCommit
       });
       const data = await response.json();
+
       if (data.error) {
         throw new Error(data.error);
       }
+
+      setDiffSuccess(true);
+      setLoadingState('complete');
     } catch (error) {
-      console.error('Error:', error);
+      setDiffSuccess(false);
+      setError(error.message);
+      setLoadingState('error');
     } finally {
-      setIsLoading(false);
-      setCompleteLoading(true);
       onRefetch();
     }
   };
 
-  const postData = async (url = '', data = {}) => {
+  const postData = async (url, data) => {
     try {
       const response = await fetch(url, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(data)
       });
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
+
+      if (!response.ok) throw new Error('Network response was not ok');
       return response;
     } catch (error) {
       console.error('Error in postData:', error);
@@ -70,20 +77,32 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
     }
   };
 
-  async function openModelCompareDialog() {
+  const openModelCompareDialog = async () => {
     try {
-      const response = await fetch(API_BASE_URL + '/commits');
+      setError('');
+      setSelectedOption('');
+      setSelectedDetails(null);
+      setDiffSuccess(null);
+      setLoadingState('idle');
+
+      const response = await fetch(`${API_BASE_URL}/commits`);
+
       if (!response.ok) {
-        throw new Error(
-          'Failed to fetch commits info: ' + response.statusText
-        );
+        const err = await response.json();
+        throw new Error(err.error || 'Internal server error.');
       }
+
       const data = await response.json();
       if (data === null) {
-        alert('No commits found.');
-        throw new Error('No commits found.');
+        throw new Error('Not a git repo');
+      } else if (data.length < 2) {
+        throw new Error('Not enough commits to compare.');
+      } else if (data.error) {
+        throw new Error('Internal server error: ' + data.error);
       }
+
       setCommitDetails(data);
+
       const options = data.map((commit) => ({
         value: JSON.stringify(commit),
         label: `${commit.hash.substring(0, 7)} ${
@@ -94,16 +113,22 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
       setSelectionOptions(options);
       setIsPopupVisible(true);
     } catch (err) {
-      setError(err.message);
+      alert(err.message || 'An error occurred while fetching commits.');
     }
-  }
+  };
 
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
+  const closeModelCompareDialog = () => {
+    setIsPopupVisible(false);
+    setLoadingState('idle');
+    setSelectedOption('');
+    setSelectedDetails(null);
   };
 
-  const toggleExpandHead = () => {
-    setIsExpandedHead(!isExpandedHead);
+  const toggleExpand = (section) => {
+    setIsExpanded((prev) => ({
+      ...prev,
+      [section]: !prev[section]
+    }));
   };
 
   return (
@@ -121,12 +146,9 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
         <div>
           <div
             className="fixed inset-0 z-10 bg-black bg-opacity-50"
-            onClick={() => {
-              if (!isLoading) {
-                setIsPopupVisible(false);
-                setCompleteLoading(false);
-              }
-            }}></div>
+            onClick={
+              loadingState !== 'loading' ? closeModelCompareDialog : null
+            }></div>
           <div
             className="absolute left-1/2 top-1/2 z-20 w-1/2 min-w-0
               -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto
@@ -136,156 +158,118 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
             onClick={(e) => e.stopPropagation()}>
             <div className="flex flex-col space-y-8 break-words text-lg">
               <div>
-                {error ? (
-                  <div>
-                    <p className="font-semibold text-red-500">
-                      Cannot generate model diff: {error}
-                    </p>
-                  </div>
-                ) : (
-                  <>
-                    <select
-                      className="mb-2 w-full cursor-not-allowed bg-gray-300
-                        text-gray-500 dark:bg-custom-dark-3 dark:text-gray-100"
-                      disabled>
-                      <option>{selectionOptions[0].label}</option>
-                    </select>
-                    <div className="text-left">
-                      <p>
-                        <span className="font-semibold">Hash:</span>{' '}
-                        {commitDetails[0].hash}
-                      </p>
-                      {commitDetails[0].tag && (
-                        <p>
-                          <span className="font-semibold">Tag:</span>{' '}
-                          {commitDetails[0].tag}
-                        </p>
-                      )}
-                      <p>
-                        <span className="font-semibold">Author:</span>{' '}
-                        {commitDetails[0].author}
-                      </p>
-                      <p style={{ whiteSpace: 'pre-wrap' }}>
-                        <span className="font-semibold">Description:</span>{' '}
-                        {isExpandedHead
-                          ? commitDetails[0].description
-                          : `${commitDetails[0].description.split('\n')[0]}${commitDetails[0].description.includes('\n') ? '' : ''}`}
-                      </p>
-                      {commitDetails[0].description.includes('\n') && (
-                        <button
-                          className="mb-4 mt-2 font-normal text-custom-blue
-                            hover:text-custom-blue-hover"
-                          onClick={toggleExpandHead}>
-                          {isExpandedHead
-                            ? 'Show Less'
-                            : 'Show Full Description'}
-                        </button>
-                      )}
-                      <p>
-                        <span className="font-semibold">Date:</span>{' '}
-                        {commitDetails[0].date}
-                      </p>
+                <select
+                  className="mb-2 w-full cursor-not-allowed bg-gray-300
+                    text-gray-500 dark:bg-custom-dark-3 dark:text-gray-100"
+                  disabled>
+                  <option>{selectionOptions[0]?.label}</option>
+                </select>
+
+                <CommitInformation
+                  commitDetails={commitDetails[0]}
+                  isExpanded={isExpanded.head}
+                  toggleExpand={toggleExpand}
+                  section="head"
+                />
+
+                <select
+                  className="mb-2 mt-2 w-full bg-gray-200 dark:bg-custom-dark-3
+                    dark:text-gray-100"
+                  value={selectedOption}
+                  onChange={handleSelectChange}
+                  disabled={loadingState === 'loading'}>
+                  <option disabled value="">
+                    Select Commit:
+                  </option>
+                  {selectionOptions.slice(1).map((option) => (
+                    <option
+                      key={option.value}
+                      value={option.value}
+                      className="font-mono">
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+
+                {selectedDetails && (
+                  <CommitInformation
+                    commitDetails={selectedDetails}
+                    isExpanded={isExpanded.details}
+                    toggleExpand={toggleExpand}
+                    section="details"
+                  />
+                )}
+                <div className="mb-4 mt-4 flex items-center justify-center">
+                  {loadingState === 'loading' && <Spinner />}
+                </div>
+                <div className="flex flex-col">
+                  {loadingState === 'loading' && (
+                    <div
+                      className="mt-4 rounded border border-blue-400
+                        bg-blue-100 p-4 text-blue-700">
+                      <strong>Comparing versions...</strong>
                     </div>
-                    <select
-                      className="mb-2 mt-2 w-full bg-gray-200
-                        dark:bg-custom-dark-3 dark:text-gray-100"
-                      value={selectedOption}
-                      onChange={handleSelectChange}
-                      disabled={isLoading}>
-                      <option disabled value="">
-                        Select Commit:
-                      </option>
-                      {selectionOptions.slice(1).map((option) => (
-                        <option
-                          key={option.value}
-                          value={option.value}
-                          className="font-mono">
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
-                    {selectedDetails && (
-                      <div className="text-left">
-                        <p>
-                          <span className="font-semibold">Hash:</span>{' '}
-                          {selectedDetails.hash}
-                        </p>
-                        {selectedDetails.tag && (
-                          <p>
-                            <span className="font-semibold">Tag:</span>{' '}
-                            {selectedDetails.tag}
-                          </p>
-                        )}
-                        <p>
-                          <span className="font-semibold">Author:</span>{' '}
-                          {selectedDetails.author}
-                        </p>
-                        <p style={{ whiteSpace: 'pre-wrap' }}>
-                          <span className="font-semibold">Description:</span>{' '}
-                          {isExpanded
-                            ? selectedDetails.description
-                            : `${selectedDetails.description.split('\n')[0]}${
-                                selectedDetails.description.includes('\n')
-                                  ? ''
-                                  : ''
-                                }`}
-                        </p>
-                        {selectedDetails.description.includes('\n') && (
-                          <button
-                            className="mb-4 mt-2 font-normal text-custom-blue
-                              hover:text-custom-blue-hover"
-                            onClick={toggleExpand}>
-                            {isExpanded
-                              ? 'Show Less'
-                              : 'Show Full Description'}
-                          </button>
-                        )}
-                        <p>
-                          <span className="font-semibold">Date:</span>{' '}
-                          {selectedDetails.date.substring(0, 10)}
-                        </p>
+                  )}
+                  {loadingState === 'complete' && diffSuccess && (
+                    <>
+                      <div
+                        className="mt-4 rounded border border-green-400
+                          bg-green-100 p-4 text-green-700">
+                        Successfully compared versions ✓
                       </div>
-                    )}
-                    {isLoading && (
-                      <div className="mb-8 mt-8">
-                        <Spinner />
+                      <button
+                        className="mt-4 rounded bg-green-500 px-4 py-2
+                          text-white hover:bg-green-600"
+                        onClick={() =>
+                          window.open(
+                            `${ROUTE_PREFIX}/model-comparison`,
+                            '_blank'
+                          )
+                        }>
+                        View model comparison
+                      </button>
+                      <button
+                        className="mt-4 rounded bg-custom-blue px-4 py-2
+                          text-white hover:bg-custom-blue-hover"
+                        onClick={handleGenerateDiff}>
+                        Compare to a different version
+                      </button>
+                    </>
+                  )}
+                  {loadingState === 'error' && (
+                    <>
+                      <div
+                        className={`mt-4 rounded border p-4 ${
+                        error === 'No model changes to show'
+                            ? 'border-yellow-400 bg-yellow-100 text-yellow-700'
+                            : 'border-red-400 bg-red-100 text-red-700'
+                        }`}>
+                        {error !== 'No model changes to show' && (
+                          <strong>Error:</strong>
+                        )}{' '}
+                        {error}
                       </div>
-                    )}
-                    <div className="flex flex-col">
                       <button
-                        className={`mt-4 rounded px-4 py-2 text-white ${
-                          isLoading
-                            ? 'bg-gray-500'
-                            : completeLoading
-                              ? 'bg-green-500'
-                              : 'bg-custom-blue hover:bg-custom-blue-hover'
-                        }`}
-                        onClick={handleGenerateDiff}
-                        disabled={isLoading || completeLoading}>
-                        {isLoading ? (
-                          'Comparing versions...'
-                        ) : completeLoading ? (
-                          <span>Versions compared successfully &#10003;</span>
-                        ) : (
-                          'Compare versions'
-                        )}
+                        className="mt-4 rounded bg-custom-blue px-4 py-2
+                          text-white hover:bg-custom-blue-hover"
+                        onClick={() => {
+                          setError('');
+                          handleGenerateDiff();
+                        }}>
+                        Compare to a different version
                       </button>
-                      {completeLoading && (
-                        <button
-                          className="mt-4 rounded bg-custom-blue px-4 py-2
-                            text-white hover:bg-custom-blue-hover"
-                          onClick={() => {
-                            window.open(
-                              `${ROUTE_PREFIX}/model-comparison`,
-                              '_blank'
-                            );
-                          }}>
-                          View model comparison
-                        </button>
-                      )}
-                    </div>
-                  </>
-                )}
+                    </>
+                  )}
+                  {loadingState === 'idle' && (
+                    <button
+                      className="mt-4 rounded bg-custom-blue px-4 py-2
+                        text-white hover:bg-custom-blue-hover"
+                      onClick={handleGenerateDiff}
+                      disabled={loadingState === 'loading'}>
+                      Compare versions
+                    </button>
+                  )}
+                </div>
               </div>
             </div>
           </div>