diff --git a/app/src/main/java/com/philliphsu/clock2/editalarm/BaseTimePickerDialog.java b/app/src/main/java/com/philliphsu/clock2/editalarm/BaseTimePickerDialog.java
index 7a0a89d..051d0e4 100644
--- a/app/src/main/java/com/philliphsu/clock2/editalarm/BaseTimePickerDialog.java
+++ b/app/src/main/java/com/philliphsu/clock2/editalarm/BaseTimePickerDialog.java
@@ -33,7 +33,31 @@ public abstract class BaseTimePickerDialog extends DialogFragment {
         mCallback = callback;
     }
 
-//    Code for BottomSheetDialogs only. To uncomment, highlight and CTRL + /
+    // Code for AlertDialog style only.
+//    @NonNull
+//    @Override
+//    public Dialog onCreateDialog(Bundle savedInstanceState) {
+//        // Use an AlertDialog to display footer buttons, rather than
+//        // re-invent them in our layout.
+//        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
+//        builder.setView(contentLayout())
+//                // The action strings are already defined and localized by the system!
+//                .setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
+//                    @Override
+//                    public void onClick(DialogInterface dialog, int which) {
+//
+//                    }
+//                })
+//                .setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
+//                    @Override
+//                    public void onClick(DialogInterface dialog, int which) {
+//
+//                    }
+//                });
+//        return builder.create();
+//    }
+
+      // Code for BottomSheetDialogs only. To uncomment, highlight and CTRL + /
 //    @Override
 //    public Dialog onCreateDialog(Bundle savedInstanceState) {
 //        Dialog dialog = super.onCreateDialog(savedInstanceState);
diff --git a/app/src/main/java/com/philliphsu/clock2/editalarm/EditAlarmActivity.java b/app/src/main/java/com/philliphsu/clock2/editalarm/EditAlarmActivity.java
index 08d5663..419c888 100644
--- a/app/src/main/java/com/philliphsu/clock2/editalarm/EditAlarmActivity.java
+++ b/app/src/main/java/com/philliphsu/clock2/editalarm/EditAlarmActivity.java
@@ -322,7 +322,8 @@ public class EditAlarmActivity extends BaseActivity implements
         // So the next time we call show() on it, the input field will show the
         // last inputted time.
 //        NumpadTimePickerDialog.newInstance(this).show(getSupportFragmentManager(), TAG_TIME_PICKER);
-        NumberGridTimePickerDialog.newInstance().show(getSupportFragmentManager(), TAG_TIME_PICKER);
+        NumberGridTimePickerDialog.newInstance(NumberGridTimePickerDialog.INDEX_HOURS)
+                .show(getSupportFragmentManager(), TAG_TIME_PICKER);
     }
 
     private void setWeekDaysText() {
diff --git a/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGrid.java b/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGrid.java
index b493a34..b8d4d2c 100644
--- a/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGrid.java
+++ b/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGrid.java
@@ -4,12 +4,15 @@ import android.content.Context;
 import android.support.v7.widget.GridLayout;
 import android.text.format.DateFormat;
 import android.util.AttributeSet;
+import android.view.View;
+import android.widget.TextView;
 
 import com.philliphsu.clock2.R;
 
 /**
  * Created by Phillip Hsu on 7/21/2016.
  */
+@Deprecated
 public class NumberGrid extends GridLayout {
     private static final String TAG = "NumberGrid";
     private static final int COLUMNS = 3;
@@ -80,6 +83,42 @@ public class NumberGrid extends GridLayout {
 //        }
     }
 
+    /**
+     * Set the numbers to be displayed in this grid.
+     */
+    public void setNumbers(int[] numbers) {
+        // TODO: This method isn't applicable to the 24 Hour grid.. consider creating a subclass
+        // just for 24 hour values? Or just use a regular GridLayout in the dialog's layout
+        // as the container for whatever arbitrary children you want?
+        // TODO: Depending on the user's clock system, there will be different logic to toggle
+        // between "pages". If the user uses 12-hour time, then the same NumberGrid can be reused
+        // for both pages, and you can use this method to replace the texts. Otherwise, you have to
+        // remove all of the 24-hour value items from this grid and inflate the minutes layout
+        // into this grid. Find an elegant solution to implement this logic.
+        setNumbers(numbers, false);
+    }
+
+    public void setNumbers(int[] numbers, boolean zeroPadSingleDigits) {
+        if (numbers != null) {
+            int i = 0;
+            View child;
+            while ((child = getChildAt(i)) instanceof TextView/*TODO: TextViewWithCircularIndicator*/) {
+                String s = zeroPadSingleDigits
+                        ? String.format("%02d", numbers[i])
+                        : String.valueOf(numbers[i]);
+                ((TextView) child).setText(s);
+                child.setOnClickListener(new OnClickListener() {
+                    @Override
+                    public void onClick(View v) {
+                        setNumbers(new int[] {0,5,10,15,20,25,30,35,40,45,50,55}, true);
+                        inflate(getContext(), R.layout.content_number_grid_minute_tuners, NumberGrid.this);
+                    }
+                });
+                i++;
+            }
+        }
+    }
+
     /**
      * Final because this is implemented for the grid of numbers. If subclasses need their own
      * click listeners for non-numeric buttons, they should set new OnClickListeners on those buttons.
@@ -103,10 +142,14 @@ public class NumberGrid extends GridLayout {
 //        setAlignmentMode(ALIGN_BOUNDS);
         setColumnCount(COLUMNS);
         // When we initialize, display the hour values "page".
-        int layout = DateFormat.is24HourFormat(getContext())
+        boolean is24HourMode = DateFormat.is24HourFormat(getContext());
+        int layout = is24HourMode
                 ? R.layout.content_24h_number_grid
-                : R.layout.content_12h_number_grid;
+                : R.layout.content_number_grid;
         inflate(getContext(), layout, this);
+        if (!is24HourMode) {
+            setNumbers(new int[] {1,2,3,4,5,6,7,8,9,10,11,12});
+        }
 //        ButterKnife.bind(this);
     }
 }
diff --git a/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGridTimePickerDialog.java b/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGridTimePickerDialog.java
index ea24948..856ff41 100644
--- a/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGridTimePickerDialog.java
+++ b/app/src/main/java/com/philliphsu/clock2/editalarm/NumberGridTimePickerDialog.java
@@ -1,46 +1,110 @@
 package com.philliphsu.clock2.editalarm;
 
-import android.app.Dialog;
-import android.content.DialogInterface;
 import android.os.Bundle;
-import android.support.v4.app.DialogFragment;
-import android.support.v7.app.AlertDialog;
+import android.support.annotation.Nullable;
+import android.support.v7.widget.GridLayout;
+import android.text.format.DateFormat;
+import android.util.Log;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
 
 import com.philliphsu.clock2.R;
 
+import butterknife.Bind;
+
 /**
  * Created by Phillip Hsu on 7/21/2016.
- *
- * AppCompat-themed AlertDialog.
  */
-public class NumberGridTimePickerDialog extends DialogFragment {
+// TODO: COnsider renaming to GridTimePickerDialog
+public class NumberGridTimePickerDialog extends BaseTimePickerDialog {
+    private static final String TAG = "GridTimePickerDialog"; // cannot be more than 23 chars...
+    private static final int[] HOURS_12 = {1,2,3,4,5,6,7,8,9,10,11,12};
+    private static final int[] HOURS_24_HALF_DAY_1 = {0,1,2,3,4,5,6,7,8,9,10,11};
+    private static final int[] HOURS_24_HALF_DAY_2 = {12,13,14,15,16,17,18,19,20,21,22,23};
+    private static final int[] MINUTES = {0,5,10,15,20,25,30,35,40,45,50,55};
 
-    public static NumberGridTimePickerDialog newInstance() {
-        return new NumberGridTimePickerDialog();
+    public static final int INDEX_HOURS = 0;
+    public static final int INDEX_MINUTES = 1;
+
+    // TODO: Private?
+    // Describes both AM/PM in the 12-hour clock and the half-days of the 24-hour clock.
+    public static final int HALF_DAY_1 = 1;
+    public static final int HALF_DAY_2 = 2;
+
+    private int mCurrentIndex = INDEX_HOURS;
+    private boolean mIs24HourMode;
+    private int mSelectedHalfDay = HALF_DAY_1;
+
+    @Bind(R.id.grid_layout) GridLayout mGridLayout;
+
+    /**
+     * @param timeFieldIndex The index representing the time field whose values, ranging from its natural
+     *                       lower and upper limits, will be presented as choices in the GridLayout
+     *                       contained in this dialog's layout. Must be one of {@link #INDEX_HOURS}
+     *                       or {@link #INDEX_MINUTES}.
+     */
+    // TODO: halfDay param
+    public static NumberGridTimePickerDialog newInstance(int timeFieldIndex) {
+        NumberGridTimePickerDialog dialog = new NumberGridTimePickerDialog();
+        dialog.mCurrentIndex = timeFieldIndex;
+        return dialog;
     }
 
     @Override
-    public Dialog onCreateDialog(Bundle savedInstanceState) {
-        // Use an AlertDialog to display footer buttons, rather than
-        // re-invent them in our layout.
-        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
-        builder.setView(R.layout.dialog_time_picker_number_grid)
-                // The action strings are already defined and localized by the system!
-                .setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
-                    @Override
-                    public void onClick(DialogInterface dialog, int which) {
-
-                    }
-                })
-                .setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
-                    @Override
-                    public void onClick(DialogInterface dialog, int which) {
-
-                    }
-                });
-        return builder.create();
-//        return super.onCreateDialog(savedInstanceState);
+    public void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        // The Activity is created at this point
+        mIs24HourMode = DateFormat.is24HourFormat(getActivity());
     }
 
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+        View view = super.onCreateView(inflater, container, savedInstanceState);
+        // Inflate the child views into the grid
+        View.inflate(getActivity(),
+                mIs24HourMode ? R.layout.content_24h_number_grid : R.layout.content_number_grid,
+                mGridLayout);
+        // Set the appropriate texts on each view
+        for (int i = 0; i < mGridLayout.getChildCount(); i++) {
+            View v = mGridLayout.getChildAt(i);
+            if (mIs24HourMode) {
+                TwentyFourHourGridItem item = (TwentyFourHourGridItem) v;
+                String s1 = String.format("%02d", HOURS_24_HALF_DAY_1[i]);
+                String s2 = String.valueOf(HOURS_24_HALF_DAY_2[i]);
+                if (mSelectedHalfDay == HALF_DAY_1) {
+                    item.setPrimaryText(s1);
+                    item.setSecondaryText(s2);
+                } else if (mSelectedHalfDay == HALF_DAY_2) {
+                    item.setPrimaryText(s2);
+                    item.setSecondaryText(s1);
+                } else {
+                    Log.e(TAG, "mSelectedHalfDay = " + mSelectedHalfDay + "?");
+                }
+            } else {
+                TextView tv = (TextView) v;
+                if (mCurrentIndex == INDEX_HOURS) {
+                    tv.setText(String.valueOf(HOURS_12[i]));
+                } else if (mCurrentIndex == INDEX_MINUTES) {
+                    tv.setText(String.format("%02d", MINUTES[i]));
+                } else {
+                    Log.e(TAG, "mCurrentIndex = " + mCurrentIndex + "?");
+                }
+            }
+        }
 
+        if (mCurrentIndex == INDEX_MINUTES) {
+            // Add the minute tuner buttons as well
+            View.inflate(getActivity(), R.layout.content_number_grid_minute_tuners, mGridLayout);
+        }
+
+        return view;
+    }
+
+    @Override
+    protected int contentLayout() {
+        return R.layout.dialog_time_picker_number_grid;
+    }
 }
diff --git a/app/src/main/java/com/philliphsu/clock2/editalarm/TwentyFourHourGridItem.java b/app/src/main/java/com/philliphsu/clock2/editalarm/TwentyFourHourGridItem.java
index 02c46c0..e225083 100644
--- a/app/src/main/java/com/philliphsu/clock2/editalarm/TwentyFourHourGridItem.java
+++ b/app/src/main/java/com/philliphsu/clock2/editalarm/TwentyFourHourGridItem.java
@@ -55,7 +55,7 @@ public class TwentyFourHourGridItem extends LinearLayout {
     private void init() {
         setOrientation(VERTICAL);
         setGravity(Gravity.CENTER);
-        inflate(getContext(), R.layout.element_24h_number_grid, this);
+        inflate(getContext(), R.layout.content_24h_grid_item, this);
         ButterKnife.bind(this);
     }
 }
diff --git a/app/src/main/res/layout/content_12h_number_grid.xml b/app/src/main/res/layout/content_12h_number_grid.xml
deleted file mode 100644
index c856d7f..0000000
--- a/app/src/main/res/layout/content_12h_number_grid.xml
+++ /dev/null
@@ -1,80 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<merge xmlns:android="http://schemas.android.com/apk/res/android"
-       xmlns:app="http://schemas.android.com/apk/res-auto">
-
-    <!-- TODO: Define another style with LWW and LHW -->
-    <!-- TODO: Use a fixed height so the circular indicator doesn't stretch into an oval. -->
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="1"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="2"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="3"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="4"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="5"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="6"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="7"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="8"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="9"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="10"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="11"/>
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        style="@style/GridLayoutNumpadButton"
-        app:layout_gravity="center"
-        android:text="12"/>
-
-</merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/element_24h_number_grid.xml b/app/src/main/res/layout/content_24h_grid_item.xml
similarity index 92%
rename from app/src/main/res/layout/element_24h_number_grid.xml
rename to app/src/main/res/layout/content_24h_grid_item.xml
index 00c37b3..8a4c54e 100644
--- a/app/src/main/res/layout/element_24h_number_grid.xml
+++ b/app/src/main/res/layout/content_24h_grid_item.xml
@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
 
+    <!-- TODO: Define styles -->
+
     <TextView
         android:id="@+id/primary"
         android:layout_width="wrap_content"
diff --git a/app/src/main/res/layout/content_24h_number_grid.xml b/app/src/main/res/layout/content_24h_number_grid.xml
index f307e8d..cf19b77 100644
--- a/app/src/main/res/layout/content_24h_number_grid.xml
+++ b/app/src/main/res/layout/content_24h_number_grid.xml
@@ -1,91 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<merge xmlns:android="http://schemas.android.com/apk/res/android"
-       xmlns:app="http://schemas.android.com/apk/res-auto">
-
-    <!-- TODO: Define a grid item style with the first 3 attrs-->
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="00"
-        app:secondaryText="12"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="01"
-        app:secondaryText="13"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="02"
-        app:secondaryText="14"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="03"
-        app:secondaryText="15"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="04"
-        app:secondaryText="16"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="05"
-        app:secondaryText="17"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="06"
-        app:secondaryText="18"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="07"
-        app:secondaryText="19"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="08"
-        app:secondaryText="20"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="09"
-        app:secondaryText="21"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="10"
-        app:secondaryText="22"/>
-    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_gravity="center"
-        style="@style/GridLayoutNumpadElement"
-        app:primaryText="11"
-        app:secondaryText="23"/>
-
+<merge>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
+    <include layout="@layout/item_24h_number_grid"/>
 </merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/content_number_grid.xml b/app/src/main/res/layout/content_number_grid.xml
new file mode 100644
index 0000000..56d39df
--- /dev/null
+++ b/app/src/main/res/layout/content_number_grid.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+    <include layout="@layout/item_number_grid"/>
+</merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/content_minutes_number_grid.xml b/app/src/main/res/layout/content_number_grid_minute_tuners.xml
similarity index 51%
rename from app/src/main/res/layout/content_minutes_number_grid.xml
rename to app/src/main/res/layout/content_number_grid_minute_tuners.xml
index caa3dbf..31d444a 100644
--- a/app/src/main/res/layout/content_minutes_number_grid.xml
+++ b/app/src/main/res/layout/content_number_grid_minute_tuners.xml
@@ -1,32 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
-
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-    <include layout="@layout/element_number_grid"/>
-
     <!-- TODO: Use fixed width and height -->
+    <!-- TODO: Add these views to the number grid-->
     <ImageButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         style="@style/GridLayoutNumpadElement"
         android:src="@drawable/ic_minus_circle_24dp"
+        app:layout_gravity="center"
         app:layout_column="1"/>
-
     <ImageButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         style="@style/GridLayoutNumpadElement"
         android:src="@drawable/ic_add_circle_24dp"
+        app:layout_gravity="center"
         app:layout_column="2"/>
 </merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/dialog_time_picker_number_grid.xml b/app/src/main/res/layout/dialog_time_picker_number_grid.xml
index 0bd9493..71df5a1 100644
--- a/app/src/main/res/layout/dialog_time_picker_number_grid.xml
+++ b/app/src/main/res/layout/dialog_time_picker_number_grid.xml
@@ -1,18 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="match_parent"
-                android:layout_height="match_parent">
+                android:layout_height="match_parent"
+                xmlns:app="http://schemas.android.com/apk/res-auto">
 
-    <com.philliphsu.clock2.editalarm.NumberGrid
-        android:id="@+id/grid"
+    <android.support.v7.widget.GridLayout
+        android:id="@+id/grid_layout"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/numpad_height"/>
+        android:layout_height="@dimen/numpad_height"
+        app:columnCount="3"/>
 
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
-        android:layout_below="@id/grid">
+        android:layout_below="@id/grid_layout">
 
         <Button
             android:layout_width="0dp"
diff --git a/app/src/main/res/layout/item_24h_number_grid.xml b/app/src/main/res/layout/item_24h_number_grid.xml
new file mode 100644
index 0000000..c4dbe91
--- /dev/null
+++ b/app/src/main/res/layout/item_24h_number_grid.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+       xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <!-- TODO: Define a grid item style with the first 3 attrs-->
+    <com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_gravity="center"
+        style="@style/GridLayoutNumpadElement"/>
+
+</merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/item_number_grid.xml b/app/src/main/res/layout/item_number_grid.xml
new file mode 100644
index 0000000..9a4cac2
--- /dev/null
+++ b/app/src/main/res/layout/item_number_grid.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+       xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <!-- TODO: Define another style with LWW and LHW -->
+    <!-- TODO: Use a fixed height so the circular indicator doesn't stretch into an oval. -->
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        style="@style/GridLayoutNumpadButton"
+        app:layout_gravity="center"/>
+
+</merge>
\ No newline at end of file